feat(project): pickup mode switch with auto-save and rollback

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

@@ -6,7 +6,11 @@
  */
 import type { PickupMode } from '#/api/store-pickup';
 
+import { Switch } from 'ant-design-vue';
+
 interface Props {
+  disabled?: boolean;
+  isSwitching?: boolean;
   mode: PickupMode;
   options: Array<{ label: string; value: PickupMode }>;
 }
@@ -16,19 +20,58 @@ const props = defineProps<Props>();
 const emit = defineEmits<{
   (event: 'change', mode: PickupMode): void;
 }>();
+
+function getModeLabel(mode: PickupMode) {
+  return props.options.find((item) => item.value === mode)?.label ?? mode;
+}
 </script>
 
 <template>
-  <div class="pickup-mode-switch">
-    <button
-      v-for="item in props.options"
-      :key="item.value"
-      type="button"
-      class="pickup-mode-item"
-      :class="{ active: props.mode === item.value }"
-      @click="emit('change', item.value)"
+  <div class="pickup-mode-switch-wrap">
+    <div class="pickup-mode-switch">
+      <button
+        type="button"
+        class="pickup-mode-item"
+        :class="{ active: props.mode === 'big' }"
+        :disabled="props.disabled || props.isSwitching"
+        @click="emit('change', 'big')"
+      >
+        {{ getModeLabel('big') }}
+      </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="{ active: props.mode === 'fine' }"
+        :disabled="props.disabled || props.isSwitching"
+        @click="emit('change', 'fine')"
+      >
+        {{ getModeLabel('fine') }}
+      </button>
+    </div>
+
+    <div
+      class="pickup-mode-guide"
+      :class="
+        props.mode === 'fine'
+          ? 'pickup-mode-guide-fine'
+          : 'pickup-mode-guide-big'
+      "
     >
-      {{ item.label }}
-    </button>
+      <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>