优化台桌显示

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "vite-electron",
 	"private": true,
-	"version": "2.0.16",
+	"version": "2.0.17",
 	"main": "dist-electron/main.js",
 	"scripts": {
 		"dev": "chcp 65001 && vite",

src/views/table/components/tableInfo.vue

@@ -61,6 +61,9 @@
                 <div class="btn_wrap" v-if="props.tableInfo.status == 'settled'">
                     <el-button type="primary" style="width: 100%;" @click="clearTableStatus">清理完成</el-button>
                 </div>
+                <div class="btn_wrap" v-if="props.tableInfo.status == 'unbound'">
+                    <el-button type="default" disabled style="width: 100%;">{{  props.tableInfo.statusMsg }}</el-button>
+                </div>
             </div>
             <transition name="el-fade-in">
                 <div class="people_num_wrap" v-show="showPeopleNum">

src/views/table/index.vue

@@ -72,8 +72,8 @@
             </div>
         </div>
         <el-drawer v-model="drawerVisible"
-            :title="`${tableList[tableItemActive].name} | ${tableList[tableItemActive].areaName}`" size="350px"
-            v-if="tableList.length">
+            :title="`${tableList[tableItemActive].areaName} | ${tableList[tableItemActive].name} （${tableList[tableItemActive].personNum || 0}/${tableList[tableItemActive].maxCapacity}）`"
+            size="35%" v-if="tableList.length">
             <tableInfo :tableInfo="tableList[tableItemActive]" @success="paySuccess" />
         </el-drawer>
         <!-- <div class="right_card card">
@@ -151,22 +151,22 @@ function tabChange(item, index) {
 
 // 计算当前的时间差
 function countTime(t) {
-  if (!t) return '0小时1分'
-  
-  const now = dayjs().valueOf()
-  const createTime = dayjs(t).valueOf()
-  
-  let diff = now - createTime
+    if (!t) return '0小时1分'
 
-  // 负数 或 小于1分钟，都强制显示 0小时1分
-  if (diff < 0 || diff < 60 * 1000) {
-    return '0小时1分'
-  }
+    const now = dayjs().valueOf()
+    const createTime = dayjs(t).valueOf()
 
-  const h = Math.floor(diff / 3600000)
-  const m = Math.floor((diff % 3600000) / 60000)
+    let diff = now - createTime
 
-  return `${h}小时${m}分`
+    // 负数 或 小于1分钟，都强制显示 0小时1分
+    if (diff < 0 || diff < 60 * 1000) {
+        return '0小时1分'
+    }
+
+    const h = Math.floor(diff / 3600000)
+    const m = Math.floor((diff % 3600000) / 60000)
+
+    return `${h}小时${m}分`
 }
 
 // 支付成功，刷新状态
@@ -256,16 +256,35 @@ async function shopTableAjax(isLoading = true) {
 
 const refreshKey = ref(0)
 
+// 精准【每分钟 00 秒】自动刷新时间（和时钟完全同步）
+let timeTimer = null
+
+function syncMinuteRefresh() {
+    // 1. 计算当前时间距离下一个 00 秒还剩多少毫秒
+    const now = new Date()
+    const seconds = now.getSeconds()
+    const delay = (60 - seconds) * 1000 // 等到下一个整分钟
+
+    // 2. 等到整分钟时，执行一次刷新
+    setTimeout(() => {
+        refreshKey.value++ // 刷新时间
+
+        // 3. 之后每 60 秒执行一次（永远在 00 秒刷新）
+        timeTimer = setInterval(() => {
+            refreshKey.value++
+        }, 60000)
+    }, delay)
+}
+
 onMounted(() => {
     shopAreaAjax()
     shopTableAjax()
+    syncMinuteRefresh()
+})
 
-    const timeTimer = setInterval(() => {
-        refreshKey.value++ // 强制视图更新时间
-    }, 60000)
-    onUnmounted(() => {
-        clearInterval(timeTimer)
-    })
+// 销毁清理
+onUnmounted(() => {
+    clearInterval(timeTimer)
 })
 
 </script>