feat(project): 优化费用与自提模式切换交互

apps/web-antd/src/views/store/pickup/components/PickupModeSwitch.vue

@@ -6,8 +6,6 @@
  */
 import type { PickupMode } from '#/api/store-pickup';
 
-import { Switch } from 'ant-design-vue';
-
 interface Props {
   disabled?: boolean;
   isSwitching?: boolean;
@@ -24,54 +22,53 @@ const emit = defineEmits<{
 function getModeLabel(mode: PickupMode) {
   return props.options.find((item) => item.value === mode)?.label ?? mode;
 }
+
+function getModeHint(mode: PickupMode) {
+  return mode === 'big'
+    ? '按时段统一预约，适合固定营业节奏'
+    : '按精细时间点预约，适合高峰分流';
+}
 </script>
 
 <template>
-  <div class="pickup-mode-switch-wrap">
-    <div class="pickup-mode-switch">
+  <div class="pickup-mode-panel" :class="{ switching: props.isSwitching }">
+    <div class="pickup-mode-header">
+      <div class="pickup-mode-title">自提预约模式</div>
+      <div class="pickup-mode-badge">
+        {{
+          props.isSwitching ? '切换中...' : `当前：${getModeLabel(props.mode)}`
+        }}
+      </div>
+    </div>
+
+    <div class="pickup-mode-grid">
       <button
         type="button"
-        class="pickup-mode-item"
+        class="pickup-mode-card"
         :class="{ active: props.mode === 'big' }"
         :disabled="props.disabled || props.isSwitching"
         @click="emit('change', 'big')"
       >
-        {{ getModeLabel('big') }}
+        <div class="pickup-mode-card-title">
+          <span class="pickup-mode-dot"></span>
+          {{ getModeLabel('big') }}
+        </div>
+        <div class="pickup-mode-card-hint">{{ getModeHint('big') }}</div>
       </button>
 
-      <Switch
-        :checked="props.mode === 'fine'"
-        :loading="props.isSwitching"
-        :disabled="props.disabled || props.isSwitching"
-        @update:checked="(checked) => emit('change', checked ? 'fine' : 'big')"
-      />
-
       <button
         type="button"
-        class="pickup-mode-item"
+        class="pickup-mode-card"
         :class="{ active: props.mode === 'fine' }"
         :disabled="props.disabled || props.isSwitching"
         @click="emit('change', 'fine')"
       >
-        {{ getModeLabel('fine') }}
+        <div class="pickup-mode-card-title">
+          <span class="pickup-mode-dot"></span>
+          {{ getModeLabel('fine') }}
+        </div>
+        <div class="pickup-mode-card-hint">{{ getModeHint('fine') }}</div>
       </button>
     </div>
-
-    <div
-      class="pickup-mode-guide"
-      :class="
-        props.mode === 'fine'
-          ? 'pickup-mode-guide-fine'
-          : 'pickup-mode-guide-big'
-      "
-    >
-      <div class="guide-title">当前生效规则</div>
-      <div v-if="props.mode === 'big'" class="guide-desc">
-        顾客按大时段进行预约，系统按已配置时段控制可约时间与容量。
-      </div>
-      <div v-else class="guide-desc">
-        顾客按精细时间窗口预约，系统按精细规则自动生成可约时间点。
-      </div>
-    </div>
   </div>
 </template>