style: 优化堂食抽屉状态胶囊与标签输入样式

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="

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 {