feat: 批量工具面板改为抽屉式交互

apps/web-antd/src/views/product/batch/components/BatchImportExportPanel.vue

@@ -4,6 +4,7 @@ import { Button, Select, Space, Upload } from 'ant-design-vue';
 
 interface Props {
   categoryOptions: Array<{ label: string; value: string }>;
+  embedded?: boolean;
   exportCategoryIds: string[];
   exportScopeType: 'all' | 'category';
   open: boolean;
@@ -21,7 +22,9 @@ interface Emits {
   (event: 'update:exportScopeType', value: 'all' | 'category'): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  embedded: false,
+});
 const emit = defineEmits<Emits>();
 
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
@@ -40,8 +43,12 @@ function setExportCategoryIds(value: unknown) {
 </script>
 
 <template>
-  <section v-if="props.open" class="pbt-panel">
+  <section
-    <header class="pbt-panel-hd">
+    v-if="props.open"
+    class="pbt-panel"
+    :class="{ 'pbt-panel-embedded': props.embedded }"
+  >
+    <header v-if="!props.embedded" class="pbt-panel-hd">
       <h3>导入导出</h3>
       <button type="button" class="pbt-close" @click="emit('close')">×</button>
     </header>

apps/web-antd/src/views/product/batch/components/BatchMoveCategoryPanel.vue

@@ -3,6 +3,7 @@ import { Button, Select } from 'ant-design-vue';
 
 interface Props {
   categoryOptions: Array<{ label: string; value: string }>;
+  embedded?: boolean;
   estimatedCount: number;
   open: boolean;
   sourceCategoryId: string;
@@ -17,7 +18,9 @@ interface Emits {
   (event: 'update:targetCategoryId', value: string): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  embedded: false,
+});
 const emit = defineEmits<Emits>();
 
 function setSourceCategory(value: unknown) {
@@ -30,8 +33,12 @@ function setTargetCategory(value: unknown) {
 </script>
 
 <template>
-  <section v-if="props.open" class="pbt-panel">
+  <section
-    <header class="pbt-panel-hd">
+    v-if="props.open"
+    class="pbt-panel"
+    :class="{ 'pbt-panel-embedded': props.embedded }"
+  >
+    <header v-if="!props.embedded" class="pbt-panel-hd">
       <h3>批量移动分类</h3>
       <button type="button" class="pbt-close" @click="emit('close')">×</button>
     </header>

apps/web-antd/src/views/product/batch/components/BatchPriceAdjustPanel.vue

@@ -9,6 +9,7 @@ interface Props {
   amountType: 'fixed' | 'percent';
   categoryOptions: Array<{ label: string; value: string }>;
   direction: 'down' | 'up';
+  embedded?: boolean;
   open: boolean;
   previewItems: BatchPricePreviewRow[];
   previewLoading: boolean;
@@ -32,7 +33,9 @@ interface Emits {
   (event: 'update:scopeType', value: BatchScopeType): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  embedded: false,
+});
 const emit = defineEmits<Emits>();
 
 const scopePills = [
@@ -93,8 +96,12 @@ function setAmount(value: null | number | string) {
 </script>
 
 <template>
-  <section v-if="props.open" class="pbt-panel">
+  <section
-    <header class="pbt-panel-hd">
+    v-if="props.open"
+    class="pbt-panel"
+    :class="{ 'pbt-panel-embedded': props.embedded }"
+  >
+    <header v-if="!props.embedded" class="pbt-panel-hd">
       <h3>批量调价</h3>
       <button type="button" class="pbt-close" @click="emit('close')">×</button>
     </header>

apps/web-antd/src/views/product/batch/components/BatchSaleSwitchPanel.vue

@@ -5,6 +5,7 @@ import { Button, Select } from 'ant-design-vue';
 interface Props {
   action: 'off' | 'on';
   categoryOptions: Array<{ label: string; value: string }>;
+  embedded?: boolean;
   estimatedCount: number;
   open: boolean;
   productOptions: Array<{ label: string; value: string }>;
@@ -23,7 +24,9 @@ interface Emits {
   (event: 'update:scopeType', value: BatchScopeType): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  embedded: false,
+});
 const emit = defineEmits<Emits>();
 
 const scopePills = [
@@ -54,8 +57,12 @@ function setScopeProductIds(value: unknown) {
 </script>
 
 <template>
-  <section v-if="props.open" class="pbt-panel">
+  <section
-    <header class="pbt-panel-hd">
+    v-if="props.open"
+    class="pbt-panel"
+    :class="{ 'pbt-panel-embedded': props.embedded }"
+  >
+    <header v-if="!props.embedded" class="pbt-panel-hd">
       <h3>批量上下架</h3>
       <button type="button" class="pbt-close" @click="emit('close')">×</button>
     </header>

apps/web-antd/src/views/product/batch/components/BatchStoreSyncPanel.vue

@@ -2,6 +2,7 @@
 import { Button, Checkbox, Input, Select, Space } from 'ant-design-vue';
 
 interface Props {
+  embedded?: boolean;
   open: boolean;
   productIds: string[];
   productOptions: Array<{ label: string; value: string }>;
@@ -24,7 +25,9 @@ interface Emits {
   (event: 'update:targetStoreIds', value: string[]): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  embedded: false,
+});
 const emit = defineEmits<Emits>();
 
 function normalizeArray(value: unknown) {
@@ -56,8 +59,12 @@ function setSyncStatus(value: boolean | string | undefined) {
 </script>
 
 <template>
-  <section v-if="props.open" class="pbt-panel">
+  <section
-    <header class="pbt-panel-hd">
+    v-if="props.open"
+    class="pbt-panel"
+    :class="{ 'pbt-panel-embedded': props.embedded }"
+  >
+    <header v-if="!props.embedded" class="pbt-panel-hd">
       <h3>批量同步门店</h3>
       <button type="button" class="pbt-close" @click="emit('close')">×</button>
     </header>

apps/web-antd/src/views/product/batch/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Page } from '@vben/common-ui';
+import { computed } from 'vue';
 
-import { Alert, Empty, Spin } from 'ant-design-vue';
+import { Alert, Drawer, Empty, Spin } from 'ant-design-vue';
 
 import BatchImportExportPanel from './components/BatchImportExportPanel.vue';
 import BatchMoveCategoryPanel from './components/BatchMoveCategoryPanel.vue';
@@ -11,6 +12,7 @@ import BatchStoreSyncPanel from './components/BatchStoreSyncPanel.vue';
 import StoreScopeToolbar from '../../shared/components/StoreScopeToolbar.vue';
 import BatchToolCards from './components/BatchToolCards.vue';
 import { useProductBatchPage } from './composables/useProductBatchPage';
+import type { BatchToolKey } from './types';
 
 const {
   activeTool,
@@ -119,6 +121,21 @@ function updateExportScopeType(value: 'all' | 'category') {
 function updateExportCategoryIds(value: string[]) {
   exportCategoryIds.value = value;
 }
+
+const toolTitleMap: Record<BatchToolKey, string> = {
+  price: '批量调价',
+  sale: '批量上下架',
+  category: '批量移动分类',
+  sync: '批量同步门店',
+  excel: '导入导出',
+};
+
+const activeToolTitle = computed(() => {
+  if (!activeTool.value) {
+    return '';
+  }
+  return toolTitleMap[activeTool.value];
+});
 </script>
 
 <template>
@@ -151,98 +168,6 @@ function updateExportCategoryIds(value: string[]) {
           :active-tool="activeTool"
           @toggle="toggleTool"
         />
-
-        <BatchPriceAdjustPanel
-          :open="activeTool === 'price'"
-          :scope-type="scopeType"
-          :scope-category-ids="scopeCategoryIds"
-          :scope-product-ids="scopeProductIds"
-          :category-options="categoryOptions"
-          :product-options="productOptions"
-          :direction="priceDirection"
-          :amount-type="priceAmountType"
-          :amount="priceAmount"
-          :preview-items="pricePreview.items"
-          :preview-total="pricePreview.totalCount"
-          :preview-loading="pricePreviewLoading"
-          :submitting="isSubmitting"
-          @update:scope-type="setScopeType"
-          @update:scope-category-ids="updateScopeCategoryIds"
-          @update:scope-product-ids="updateScopeProductIds"
-          @update:direction="updatePriceDirection"
-          @update:amount-type="updatePriceAmountType"
-          @update:amount="updatePriceAmount"
-          @preview="previewPriceAdjust"
-          @submit="submitPriceAdjust"
-          @close="closeTool"
-        />
-
-        <BatchSaleSwitchPanel
-          :open="activeTool === 'sale'"
-          :scope-type="scopeType"
-          :scope-category-ids="scopeCategoryIds"
-          :scope-product-ids="scopeProductIds"
-          :category-options="categoryOptions"
-          :product-options="productOptions"
-          :estimated-count="scopeEstimatedCount"
-          :action="saleAction"
-          :submitting="isSubmitting"
-          @update:scope-type="setScopeType"
-          @update:scope-category-ids="updateScopeCategoryIds"
-          @update:scope-product-ids="updateScopeProductIds"
-          @update:action="updateSaleAction"
-          @submit="submitSaleSwitch"
-          @close="closeTool"
-        />
-
-        <BatchMoveCategoryPanel
-          :open="activeTool === 'category'"
-          :category-options="categoryOptions"
-          :source-category-id="moveSourceCategoryId"
-          :target-category-id="moveTargetCategoryId"
-          :estimated-count="moveEstimatedCount"
-          :submitting="isSubmitting"
-          @update:source-category-id="updateMoveSourceCategoryId"
-          @update:target-category-id="updateMoveTargetCategoryId"
-          @submit="submitMoveCategory"
-          @close="closeTool"
-        />
-
-        <BatchStoreSyncPanel
-          :open="activeTool === 'sync'"
-          :source-store-name="selectedStoreLabel"
-          :target-store-ids="syncTargetStoreIds"
-          :target-store-options="targetStoreOptions"
-          :product-ids="syncProductIds"
-          :product-options="productOptions"
-          :sync-price="syncPrice"
-          :sync-stock="syncStock"
-          :sync-status="syncStatus"
-          :submitting="isSubmitting"
-          @update:target-store-ids="updateSyncTargetStoreIds"
-          @update:product-ids="updateSyncProductIds"
-          @update:sync-price="updateSyncPrice"
-          @update:sync-stock="updateSyncStock"
-          @update:sync-status="updateSyncStatus"
-          @submit="submitStoreSync"
-          @close="closeTool"
-        />
-
-        <BatchImportExportPanel
-          :open="activeTool === 'excel'"
-          :selected-file-name="importFile?.name || ''"
-          :export-scope-type="exportScopeType"
-          :export-category-ids="exportCategoryIds"
-          :category-options="categoryOptions"
-          :submitting="isSubmitting"
-          @select-file="setImportFile"
-          @update:export-scope-type="updateExportScopeType"
-          @update:export-category-ids="updateExportCategoryIds"
-          @download-template="downloadImportTemplate"
-          @submit-import="submitImport"
-          @submit-export="submitExport"
-          @close="closeTool"
-        />
       </template>
 
       <Alert
@@ -253,6 +178,116 @@ function updateExportCategoryIds(value: string[]) {
         :message="latestResultText"
       />
     </div>
+
+    <Drawer
+      class="pbt-drawer"
+      :title="activeToolTitle"
+      :open="Boolean(activeTool)"
+      :width="920"
+      @close="closeTool"
+    >
+      <BatchPriceAdjustPanel
+        v-if="activeTool === 'price'"
+        embedded
+        :open="true"
+        :scope-type="scopeType"
+        :scope-category-ids="scopeCategoryIds"
+        :scope-product-ids="scopeProductIds"
+        :category-options="categoryOptions"
+        :product-options="productOptions"
+        :direction="priceDirection"
+        :amount-type="priceAmountType"
+        :amount="priceAmount"
+        :preview-items="pricePreview.items"
+        :preview-total="pricePreview.totalCount"
+        :preview-loading="pricePreviewLoading"
+        :submitting="isSubmitting"
+        @update:scope-type="setScopeType"
+        @update:scope-category-ids="updateScopeCategoryIds"
+        @update:scope-product-ids="updateScopeProductIds"
+        @update:direction="updatePriceDirection"
+        @update:amount-type="updatePriceAmountType"
+        @update:amount="updatePriceAmount"
+        @preview="previewPriceAdjust"
+        @submit="submitPriceAdjust"
+        @close="closeTool"
+      />
+
+      <BatchSaleSwitchPanel
+        v-if="activeTool === 'sale'"
+        embedded
+        :open="true"
+        :scope-type="scopeType"
+        :scope-category-ids="scopeCategoryIds"
+        :scope-product-ids="scopeProductIds"
+        :category-options="categoryOptions"
+        :product-options="productOptions"
+        :estimated-count="scopeEstimatedCount"
+        :action="saleAction"
+        :submitting="isSubmitting"
+        @update:scope-type="setScopeType"
+        @update:scope-category-ids="updateScopeCategoryIds"
+        @update:scope-product-ids="updateScopeProductIds"
+        @update:action="updateSaleAction"
+        @submit="submitSaleSwitch"
+        @close="closeTool"
+      />
+
+      <BatchMoveCategoryPanel
+        v-if="activeTool === 'category'"
+        embedded
+        :open="true"
+        :category-options="categoryOptions"
+        :source-category-id="moveSourceCategoryId"
+        :target-category-id="moveTargetCategoryId"
+        :estimated-count="moveEstimatedCount"
+        :submitting="isSubmitting"
+        @update:source-category-id="updateMoveSourceCategoryId"
+        @update:target-category-id="updateMoveTargetCategoryId"
+        @submit="submitMoveCategory"
+        @close="closeTool"
+      />
+
+      <BatchStoreSyncPanel
+        v-if="activeTool === 'sync'"
+        embedded
+        :open="true"
+        :source-store-name="selectedStoreLabel"
+        :target-store-ids="syncTargetStoreIds"
+        :target-store-options="targetStoreOptions"
+        :product-ids="syncProductIds"
+        :product-options="productOptions"
+        :sync-price="syncPrice"
+        :sync-stock="syncStock"
+        :sync-status="syncStatus"
+        :submitting="isSubmitting"
+        @update:target-store-ids="updateSyncTargetStoreIds"
+        @update:product-ids="updateSyncProductIds"
+        @update:sync-price="updateSyncPrice"
+        @update:sync-stock="updateSyncStock"
+        @update:sync-status="updateSyncStatus"
+        @submit="submitStoreSync"
+        @close="closeTool"
+      />
+
+      <BatchImportExportPanel
+        v-if="activeTool === 'excel'"
+        embedded
+        :open="true"
+        :selected-file-name="importFile?.name || ''"
+        :export-scope-type="exportScopeType"
+        :export-category-ids="exportCategoryIds"
+        :category-options="categoryOptions"
+        :submitting="isSubmitting"
+        @select-file="setImportFile"
+        @update:export-scope-type="updateExportScopeType"
+        @update:export-category-ids="updateExportCategoryIds"
+        @download-template="downloadImportTemplate"
+        @submit-import="submitImport"
+        @submit-export="submitExport"
+        @close="closeTool"
+      />
+    </Drawer>
   </Page>
 </template>
 

apps/web-antd/src/views/product/batch/styles/panel.less

@@ -1,4 +1,22 @@
-.page-product-batch {
+.pbt-drawer .ant-drawer-header {
+  padding: 14px 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.pbt-drawer .ant-drawer-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+
+.pbt-drawer .ant-drawer-body {
+  padding: 16px 20px 20px;
+  background: #f8fafc;
+}
+
+.page-product-batch,
+.pbt-drawer {
+
   .pbt-panel {
     padding: 20px;
     background: #fff;
@@ -6,6 +24,13 @@
     box-shadow: var(--pbt-shadow-sm);
   }
 
+  .pbt-panel.pbt-panel-embedded {
+    padding: 0;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
   .pbt-panel-hd {
     display: flex;
     align-items: center;

apps/web-antd/src/views/product/batch/styles/responsive.less

@@ -21,3 +21,9 @@
     }
   }
 }
+
+@media (width <= 1200px) {
+  .pbt-drawer .ant-drawer-content-wrapper {
+    width: min(920px, 100vw) !important;
+  }
+}