feat: 新增费用设置页面并对齐原型交互

apps/web-antd/src/views/store/fees/components/FeesOtherCard.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+/**
+ * 文件职责：其他费用设置卡片。
+ * 1. 展示餐具费、加急费开关与金额输入。
+ * 2. 通过回调上抛字段更新，保存/重置由父级处理。
+ */
+import { Button, Card, InputNumber, Switch } from 'ant-design-vue';
+
+interface Props {
+  cutleryAmount: number;
+  cutleryEnabled: boolean;
+  isSaving: boolean;
+  onSetCutleryAmount: (value: number) => void;
+  onSetCutleryEnabled: (value: boolean) => void;
+  onSetRushAmount: (value: number) => void;
+  onSetRushEnabled: (value: boolean) => void;
+  rushAmount: number;
+  rushEnabled: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'reset'): void;
+  (event: 'save'): void;
+}>();
+
+function toNumber(value: null | number | string, fallback = 0) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+</script>
+
+<template>
+  <Card :bordered="false" class="fees-card">
+    <template #title>
+      <span class="section-title">其他费用</span>
+      <span class="section-sub-title">可选，按需开启</span>
+    </template>
+
+    <div class="other-fee-row">
+      <Switch
+        :checked="props.cutleryEnabled"
+        @update:checked="(value) => props.onSetCutleryEnabled(Boolean(value))"
+      />
+      <div class="other-fee-meta">
+        <div class="other-fee-name">餐具费</div>
+        <div class="other-fee-hint">
+          向顾客收取一次性餐具费用，顾客可选择不需要餐具
+        </div>
+      </div>
+      <div class="other-fee-input-row">
+        <span class="fees-unit">¥</span>
+        <InputNumber
+          :value="props.cutleryAmount"
+          :min="0"
+          :precision="2"
+          :step="0.5"
+          :controls="false"
+          :disabled="!props.cutleryEnabled"
+          class="other-fee-input"
+          placeholder="如：1.00"
+          @update:value="
+            (value) =>
+              props.onSetCutleryAmount(toNumber(value, props.cutleryAmount))
+          "
+        />
+      </div>
+    </div>
+
+    <div class="other-fee-row">
+      <Switch
+        :checked="props.rushEnabled"
+        @update:checked="(value) => props.onSetRushEnabled(Boolean(value))"
+      />
+      <div class="other-fee-meta">
+        <div class="other-fee-name">加急费</div>
+        <div class="other-fee-hint">顾客选择加急配送时额外收取的费用</div>
+      </div>
+      <div class="other-fee-input-row">
+        <span class="fees-unit">¥</span>
+        <InputNumber
+          :value="props.rushAmount"
+          :min="0"
+          :precision="2"
+          :step="0.5"
+          :controls="false"
+          :disabled="!props.rushEnabled"
+          class="other-fee-input"
+          placeholder="如：3.00"
+          @update:value="
+            (value) => props.onSetRushAmount(toNumber(value, props.rushAmount))
+          "
+        />
+      </div>
+    </div>
+
+    <div class="fees-actions">
+      <Button :disabled="props.isSaving" @click="emit('reset')">重置</Button>
+      <Button type="primary" :loading="props.isSaving" @click="emit('save')">
+        保存设置
+      </Button>
+    </div>
+  </Card>
+</template>