From f2c50f69d13fa1102bd62a3b47c6074968bdc034 Mon Sep 17 00:00:00 2001
From: MSuMshk <2039814060@qq.com>
Date: Thu, 26 Feb 2026 17:07:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=8A=BD=E5=B1=89=E5=B8=83=E5=B1=80=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复导入导出面板按钮重叠，改为纵向排列
- 移除抽屉关闭按钮(×)
- 调价面板步骤2拆分为两行布局，输入框独立一行
---
 .../components/BatchImportExportPanel.vue     |   2 +-
 .../components/BatchPriceAdjustPanel.vue      |   5 +
 .../src/views/product/batch/index.vue         |   1 +
 .../src/views/product/batch/styles/panel.less | 215 +++++++++++++-----
 4 files changed, 164 insertions(+), 59 deletions(-)

diff --git a/apps/web-antd/src/views/product/batch/components/BatchImportExportPanel.vue b/apps/web-antd/src/views/product/batch/components/BatchImportExportPanel.vue
index f1553e8..21ef56b 100644
--- a/apps/web-antd/src/views/product/batch/components/BatchImportExportPanel.vue
+++ b/apps/web-antd/src/views/product/batch/components/BatchImportExportPanel.vue
@@ -85,7 +85,7 @@ function setExportCategoryIds(value: unknown) {
 
       <article class="pbt-sub-card">
         <h4>导出商品</h4>
-        <div class="pbt-step" style="margin-bottom: 12px">
+        <div class="pbt-step">
           <div class="pbt-pills">
             <button
               type="button"
diff --git a/apps/web-antd/src/views/product/batch/components/BatchPriceAdjustPanel.vue b/apps/web-antd/src/views/product/batch/components/BatchPriceAdjustPanel.vue
index ba705fa..b5ac60e 100644
--- a/apps/web-antd/src/views/product/batch/components/BatchPriceAdjustPanel.vue
+++ b/apps/web-antd/src/views/product/batch/components/BatchPriceAdjustPanel.vue
@@ -143,6 +143,7 @@ function setAmount(value: null | number | string) {
 
     <div class="pbt-step">
       <div class="pbt-step-label"><span class="num">2</span> 调价方式</div>
+      <!-- 1. 方向与类型选择 -->
       <div class="pbt-adjust-row">
         <div class="pbt-pills">
           <button
@@ -168,11 +169,15 @@ function setAmount(value: null | number | string) {
             {{ item.label }}
           </button>
         </div>
+      </div>
+      <!-- 2. 数值输入与预览 -->
+      <div class="pbt-adjust-input">
         <InputNumber
           :value="props.amount"
           :min="0"
           :step="0.1"
           class="pbt-number"
+          :addon-after="props.amountType === 'percent' ? '%' : '¥'"
           @update:value="setAmount"
         />
         <Button :loading="props.previewLoading" @click="emit('preview')">
diff --git a/apps/web-antd/src/views/product/batch/index.vue b/apps/web-antd/src/views/product/batch/index.vue
index c823cac..d1fe4f1 100644
--- a/apps/web-antd/src/views/product/batch/index.vue
+++ b/apps/web-antd/src/views/product/batch/index.vue
@@ -188,6 +188,7 @@ const activeToolTitle = computed(() => {
       :title="activeToolTitle"
       :open="Boolean(activeTool)"
       :width="920"
+      :closable="false"
       @close="closeTool"
     >
       <BatchPriceAdjustPanel
diff --git a/apps/web-antd/src/views/product/batch/styles/panel.less b/apps/web-antd/src/views/product/batch/styles/panel.less
index ae066a2..bdea23b 100644
--- a/apps/web-antd/src/views/product/batch/styles/panel.less
+++ b/apps/web-antd/src/views/product/batch/styles/panel.less
@@ -1,17 +1,26 @@
-.pbt-drawer .ant-drawer-header {
-  padding: 14px 20px;
-  border-bottom: 1px solid #f0f0f0;
-}
+/* 批量工具抽屉样式 —— 与项目其他抽屉保持一致的设计语言。 */
+.pbt-drawer {
+  .ant-drawer-content-wrapper {
+    box-shadow:
+      0 8px 24px rgb(0 0 0 / 8%),
+      0 2px 6px rgb(0 0 0 / 4%);
+  }
 
-.pbt-drawer .ant-drawer-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: #1a1a2e;
-}
+  .ant-drawer-header {
+    min-height: 56px;
+    padding: 0 24px;
+    border-bottom: 1px solid #f0f0f0;
+  }
 
-.pbt-drawer .ant-drawer-body {
-  padding: 16px 20px 20px;
-  background: #f8fafc;
+  .ant-drawer-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2937;
+  }
+
+  .ant-drawer-body {
+    padding: 20px 24px;
+  }
 }
 
 .page-product-batch,
@@ -39,9 +48,9 @@
 
   .pbt-panel-hd h3 {
     margin: 0;
-    font-size: 15px;
+    font-size: 16px;
     font-weight: 600;
-    color: #1a1a2e;
+    color: #1f2937;
   }
 
   .pbt-close {
@@ -52,26 +61,45 @@
     cursor: pointer;
     background: none;
     border: none;
-    border-radius: 8px;
+    border-radius: 6px;
   }
 
   .pbt-close:hover {
     color: #111827;
-    background: #f3f4f6;
+    background: #f5f5f5;
   }
 
+  /* ---- 步骤区块 ---- */
   .pbt-step {
+    padding: 16px;
     margin-bottom: 16px;
+    background: #fafbfc;
+    border: 1px solid #f0f0f0;
+    border-radius: 10px;
   }
 
   .pbt-step-label {
+    position: relative;
     display: flex;
     gap: 8px;
     align-items: center;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 500;
-    color: #4b5563;
+    padding-left: 12px;
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    color: #1f2937;
+  }
+
+  .pbt-step-label::before {
+    position: absolute;
+    top: -1px;
+    bottom: -1px;
+    left: 0;
+    width: 3px;
+    content: '';
+    background: linear-gradient(180deg, #4da3ff 0%, #1677ff 100%);
+    border-radius: 4px;
   }
 
   .pbt-step-label .num {
@@ -81,58 +109,82 @@
     width: 20px;
     height: 20px;
     font-size: 11px;
-    color: #fff;
-    background: #1677ff;
+    font-weight: 700;
+    color: #1677ff;
+    background: #eff6ff;
     border-radius: 50%;
   }
 
+  /* ---- 胶囊按钮 ---- */
   .pbt-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
   }
 
   .pbt-pill {
+    min-width: 80px;
     height: 34px;
-    padding: 0 14px;
+    padding: 0 16px;
     font-size: 13px;
-    color: #4b5563;
+    color: #6b7280;
     cursor: pointer;
     background: #fff;
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
-    transition: var(--pbt-transition);
+    border: 1px solid #e5e7eb;
+    border-radius: 999px;
+    transition:
+      color 0.2s ease,
+      border-color 0.2s ease,
+      background-color 0.2s ease;
   }
 
   .pbt-pill:hover {
     color: #1677ff;
-    border-color: #1677ff;
+    border-color: #91caff;
   }
 
   .pbt-pill.active {
-    color: #fff;
-    background: #1677ff;
+    color: #1677ff;
+    background: #eff6ff;
     border-color: #1677ff;
   }
 
+  /* ---- 调价行 ---- */
   .pbt-adjust-row {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 16px;
     align-items: center;
+
+    .pbt-pills {
+      margin-bottom: 0;
+    }
+  }
+
+  .pbt-adjust-input {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-top: 12px;
   }
 
   .pbt-number {
-    width: 130px;
+    width: 160px;
   }
 
   .pbt-select-wide {
-    width: min(680px, 100%);
+    width: min(100%, 640px);
   }
 
   .pbt-select-narrow {
-    width: min(280px, 100%);
+    width: min(100%, 280px);
+  }
+
+  /* ---- 预览表格 ---- */
+  .pbt-table {
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
   }
 
   .pbt-table .up {
@@ -145,67 +197,114 @@
     color: #22c55e;
   }
 
+  /* ---- 信息提示条 ---- */
   .pbt-info {
-    padding: 8px 12px;
-    margin: 8px 0 16px;
-    font-size: 13px;
-    color: #1f2937;
-    background: #f0fdf4;
-    border: 1px solid #bbf7d0;
-    border-radius: 8px;
-  }
-
-  .pbt-actions {
     display: flex;
     gap: 8px;
     align-items: center;
-    padding-top: 12px;
-    border-top: 1px solid #f3f4f6;
+    padding: 10px 14px;
+    margin: 8px 0 16px;
+    font-size: 13px;
+    color: #15803d;
+    background: #f0fdf4;
+    border: 1px solid #bbf7d0;
+    border-radius: 10px;
   }
 
+  /* ---- 底部操作栏 ---- */
+  .pbt-actions {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding-top: 16px;
+    margin-top: 4px;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  .pbt-actions .ant-btn {
+    min-width: 96px;
+    height: 40px;
+    padding: 0 24px;
+    font-size: 15px;
+    border-radius: 10px;
+  }
+
+  /* ---- 导入导出子卡片 ---- */
   .pbt-sub-cards {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    display: flex;
+    flex-direction: column;
     gap: 16px;
   }
 
   .pbt-sub-card {
-    padding: 16px;
-    border: 1px solid #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 20px;
+    background: #fafbfc;
+    border: 1px solid #e5e7eb;
     border-radius: 10px;
+    transition: border-color 0.2s ease;
+  }
+
+  .pbt-sub-card:hover {
+    border-color: #d1d5db;
   }
 
   .pbt-sub-card h4 {
-    margin: 0 0 12px;
+    position: relative;
+    padding-left: 12px;
+    margin: 0;
     font-size: 14px;
     font-weight: 600;
-    color: #1a1a2e;
+    line-height: 1;
+    color: #1f2937;
   }
 
+  .pbt-sub-card h4::before {
+    position: absolute;
+    top: -1px;
+    bottom: -1px;
+    left: 0;
+    width: 3px;
+    content: '';
+    background-color: #1677ff;
+    border-radius: 2px;
+  }
+
+  /* ---- 上传区域 ---- */
   .pbt-upload-icon {
     margin: 0;
-    font-size: 22px;
+    font-size: 20px;
+    font-weight: 700;
+    color: #1677ff;
   }
 
   .pbt-upload-title {
-    margin: 2px 0;
+    margin: 4px 0 0;
     font-size: 13px;
     color: #4b5563;
   }
 
   .pbt-upload-tip {
-    margin: 0;
+    margin: 2px 0 0;
     font-size: 12px;
     color: #9ca3af;
   }
 
   .pbt-upload-file {
-    margin-top: 10px;
     font-size: 12px;
     color: #4b5563;
   }
 
   .pbt-upload-actions {
-    margin-top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .pbt-upload-actions .ant-btn {
+    border-radius: 8px;
   }
 }