From c71c8f1b09c8adc8b905837beea8a9ae5130a926 Mon Sep 17 00:00:00 2001
From: MSuMshk <2039814060@qq.com>
Date: Mon, 16 Feb 2026 15:56:49 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=A0=82=E9=A3=9F?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89=E7=8A=B6=E6=80=81=E8=83=B6=E5=9B=8A=E4=B8=8E?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E8=BE=93=E5=85=A5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dine-in/components/DineInTableDrawer.vue  | 21 ++++++-
 .../views/store/dine-in/styles/drawer.less    | 55 +++++++++++++++++++
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/apps/web-antd/src/views/store/dine-in/components/DineInTableDrawer.vue b/apps/web-antd/src/views/store/dine-in/components/DineInTableDrawer.vue
index 9b273d4..9c8fb0a 100644
--- a/apps/web-antd/src/views/store/dine-in/components/DineInTableDrawer.vue
+++ b/apps/web-antd/src/views/store/dine-in/components/DineInTableDrawer.vue
@@ -10,7 +10,7 @@ import type {
   DineInTableFormState,
 } from '#/views/store/dine-in/types';
 
-import { Button, Drawer, Input, Select, Switch, Tag } from 'ant-design-vue';
+import { Button, Drawer, Input, Select, Switch } from 'ant-design-vue';
 
 interface Props {
   areaOptions: Array<{ label: string; value: string }>;
@@ -37,6 +37,12 @@ const emit = defineEmits<{
 }>();
 
 const statusHintText = '就餐中/已预约由业务驱动，管理端仅控制是否停用';
+const businessStatusClassMap: Record<DineInTableStatus, string> = {
+  dining: 'business-status--dining',
+  disabled: 'business-status--disabled',
+  free: 'business-status--free',
+  reserved: 'business-status--reserved',
+};
 
 function readInputValue(event: Event) {
   const target = event.target as HTMLInputElement | null;
@@ -61,6 +67,10 @@ function readTagValues(value: unknown) {
     .map((item) => item.trim())
     .filter(Boolean);
 }
+
+function resolveBusinessStatusClass(status: DineInTableStatus) {
+  return businessStatusClassMap[status] ?? 'business-status--disabled';
+}
 </script>
 
 <template>
@@ -117,9 +127,13 @@ function readTagValues(value: unknown) {
     <div class="drawer-form-block">
       <label class="drawer-form-label">业务状态</label>
       <div class="drawer-status-preview">
-        <Tag color="processing">
+        <span
+          class="business-status-pill"
+          :class="resolveBusinessStatusClass(props.form.sourceStatus)"
+        >
+          <span class="business-status-dot"></span>
           {{ props.statusLabelMap[props.form.sourceStatus] ?? '--' }}
-        </Tag>
+        </span>
         <span class="drawer-form-hint">{{ statusHintText }}</span>
       </div>
     </div>
@@ -127,6 +141,7 @@ function readTagValues(value: unknown) {
     <div class="drawer-form-block">
       <label class="drawer-form-label">标签</label>
       <Select
+        class="drawer-tag-select"
         mode="tags"
         :value="props.form.tags"
         :options="
diff --git a/apps/web-antd/src/views/store/dine-in/styles/drawer.less b/apps/web-antd/src/views/store/dine-in/styles/drawer.less
index 3fd7af8..7afd027 100644
--- a/apps/web-antd/src/views/store/dine-in/styles/drawer.less
+++ b/apps/web-antd/src/views/store/dine-in/styles/drawer.less
@@ -1,6 +1,10 @@
 /* 文件职责：堂食管理抽屉与批量弹窗样式。 */
 .dinein-area-drawer-wrap,
 .dinein-table-drawer-wrap {
+  .ant-select {
+    width: 100%;
+  }
+
   .ant-drawer-body {
     padding: 16px 20px 90px;
   }
@@ -11,6 +15,13 @@
   }
 }
 
+.dinein-table-drawer-wrap {
+  .drawer-tag-select .ant-select-selector {
+    min-height: 38px !important;
+    padding: 3px 10px !important;
+  }
+}
+
 .drawer-form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -61,6 +72,50 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
+  align-items: flex-start;
+}
+
+.business-status-pill {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  padding: 6px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+}
+
+.business-status-dot {
+  width: 9px;
+  height: 9px;
+  background: currentcolor;
+  border-radius: 50%;
+}
+
+.business-status-pill.business-status--free {
+  color: #16a34a;
+  background: #f0fdf4;
+  border-color: #bbf7d0;
+}
+
+.business-status-pill.business-status--dining {
+  color: #d97706;
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+
+.business-status-pill.business-status--reserved {
+  color: #2563eb;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.business-status-pill.business-status--disabled {
+  color: #6b7280;
+  background: #f3f4f6;
+  border-color: #d1d5db;
 }
 
 .drawer-footer {