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

apps/web-antd/src/views/store/fees/index.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+/**
+ * 文件职责：费用设置页面主视图。
+ * 1. 组合起送/配送费、包装费、其他费用卡片。
+ * 2. 承接门店维度切换、阶梯抽屉与复制弹窗。
+ */
+import type { PackagingFeeTierDto } from '#/api/store-fees';
+
+import { Page } from '@vben/common-ui';
+
+import { Card, Empty, Spin } from 'ant-design-vue';
+
+import CopyToStoresModal from '../components/CopyToStoresModal.vue';
+import StoreScopeToolbar from '../components/StoreScopeToolbar.vue';
+import FeesDeliveryCard from './components/FeesDeliveryCard.vue';
+import FeesOtherCard from './components/FeesOtherCard.vue';
+import FeesPackagingCard from './components/FeesPackagingCard.vue';
+import FeesTierDrawer from './components/FeesTierDrawer.vue';
+import { useStoreFeesPage } from './composables/useStoreFeesPage';
+
+const {
+  copyCandidates,
+  copyTargetStoreIds,
+  form,
+  formatCurrency,
+  formatTierRange,
+  handleCopyCheckAll,
+  handleCopySubmit,
+  handleSubmitTier,
+  isCopyAllChecked,
+  isCopyIndeterminate,
+  isCopyModalOpen,
+  isCopySubmitting,
+  isPageLoading,
+  isSavingDelivery,
+  isSavingOther,
+  isSavingPackaging,
+  isStoreLoading,
+  isTierDrawerOpen,
+  onDeleteTier,
+  openCopyModal,
+  openTierDrawer,
+  resetDeliverySection,
+  resetOtherSection,
+  resetPackagingSection,
+  saveDeliverySection,
+  saveOtherSection,
+  savePackagingSection,
+  selectedStoreId,
+  selectedStoreName,
+  setBaseDeliveryFee,
+  setCopyModalOpen,
+  setCutleryAmount,
+  setCutleryEnabled,
+  setFixedPackagingFee,
+  setFreeDeliveryThreshold,
+  setMinimumOrderAmount,
+  setPackagingMode,
+  setRushAmount,
+  setRushEnabled,
+  setSelectedStoreId,
+  setTierDrawerOpen,
+  setTierFee,
+  setTierMaxAmount,
+  setTierMinAmount,
+  setTieredEnabled,
+  storeOptions,
+  tierDrawerTitle,
+  tierForm,
+  toggleCopyStore,
+} = useStoreFeesPage();
+
+function onEditTier(tier: PackagingFeeTierDto) {
+  openTierDrawer('edit', tier);
+}
+</script>
+
+<template>
+  <Page title="费用设置" content-class="space-y-4 page-store-fees">
+    <StoreScopeToolbar
+      :selected-store-id="selectedStoreId"
+      :store-options="storeOptions"
+      :is-store-loading="isStoreLoading"
+      :copy-disabled="!selectedStoreId || copyCandidates.length === 0"
+      copy-button-text="复制费用设置到其他门店"
+      @update:selected-store-id="setSelectedStoreId"
+      @copy="openCopyModal"
+    />
+
+    <template v-if="storeOptions.length === 0">
+      <Card :bordered="false">
+        <Empty description="暂无门店，请先创建门店" />
+      </Card>
+    </template>
+
+    <template v-else>
+      <Spin :spinning="isPageLoading">
+        <FeesDeliveryCard
+          :minimum-order-amount="form.minimumOrderAmount"
+          :base-delivery-fee="form.baseDeliveryFee"
+          :free-delivery-threshold="form.freeDeliveryThreshold"
+          :is-saving="isSavingDelivery"
+          :on-set-minimum-order-amount="setMinimumOrderAmount"
+          :on-set-base-delivery-fee="setBaseDeliveryFee"
+          :on-set-free-delivery-threshold="setFreeDeliveryThreshold"
+          @save="saveDeliverySection"
+          @reset="resetDeliverySection"
+        />
+
+        <FeesPackagingCard
+          :packaging-mode="form.packagingFeeMode"
+          :tiered-enabled="form.orderPackagingFeeMode === 'tiered'"
+          :fixed-packaging-fee="form.fixedPackagingFee"
+          :tiers="form.packagingFeeTiers"
+          :is-saving="isSavingPackaging"
+          :format-currency="formatCurrency"
+          :format-tier-range="formatTierRange"
+          :on-set-packaging-mode="setPackagingMode"
+          :on-set-tiered-enabled="setTieredEnabled"
+          :on-set-fixed-packaging-fee="setFixedPackagingFee"
+          @add-tier="openTierDrawer('create')"
+          @edit-tier="onEditTier"
+          @delete-tier="onDeleteTier"
+          @save="savePackagingSection"
+          @reset="resetPackagingSection"
+        />
+
+        <FeesOtherCard
+          :cutlery-enabled="form.otherFees.cutlery.enabled"
+          :cutlery-amount="form.otherFees.cutlery.amount"
+          :rush-enabled="form.otherFees.rush.enabled"
+          :rush-amount="form.otherFees.rush.amount"
+          :is-saving="isSavingOther"
+          :on-set-cutlery-enabled="setCutleryEnabled"
+          :on-set-cutlery-amount="setCutleryAmount"
+          :on-set-rush-enabled="setRushEnabled"
+          :on-set-rush-amount="setRushAmount"
+          @save="saveOtherSection"
+          @reset="resetOtherSection"
+        />
+      </Spin>
+    </template>
+
+    <FeesTierDrawer
+      :open="isTierDrawerOpen"
+      :title="tierDrawerTitle"
+      :form="tierForm"
+      :is-saving="isSavingPackaging"
+      :on-set-min-amount="setTierMinAmount"
+      :on-set-max-amount="setTierMaxAmount"
+      :on-set-fee="setTierFee"
+      @update:open="setTierDrawerOpen"
+      @submit="handleSubmitTier"
+    />
+
+    <CopyToStoresModal
+      :open="isCopyModalOpen"
+      :copy-candidates="copyCandidates"
+      :target-store-ids="copyTargetStoreIds"
+      :is-all-checked="isCopyAllChecked"
+      :is-indeterminate="isCopyIndeterminate"
+      :is-submitting="isCopySubmitting"
+      :selected-store-name="selectedStoreName"
+      title="复制费用设置到其他门店"
+      confirm-text="确认复制"
+      @update:open="setCopyModalOpen"
+      @check-all="handleCopyCheckAll"
+      @submit="handleCopySubmit"
+      @toggle-store="
+        ({ storeId, checked }) => toggleCopyStore(storeId, checked)
+      "
+    />
+  </Page>
+</template>
+
+<style lang="less">
+@import './styles/index.less';
+</style>