From 9922d20141a98ae4fccd100c89ac029c005a78d9 Mon Sep 17 00:00:00 2001
From: zzh <1368735060@qq.com>
Date: Wed, 7 Oct 2026 15:08:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=98=E8=AE=A4=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=81=94=E5=8A=A8=E5=8A=A0=E8=BD=BD=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=98=E7=BD=91=E5=85=A5=E5=8F=A3=E4=B8=8E=E7=BA=BF?=
 =?UTF-8?q?=E8=B7=AF=E9=9D=A2=E6=9D=BF=E4=BD=93=E9=AA=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

页面背景默认改为默认灰并同步启动屏；顶栏/登录头可回官网；线路卡片与话题面板顾问入口改为图标。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 index.html                                    |   24 +-
 src/api/channel/salesProduct.ts               |   32 +-
 src/api/channel/serviceChannel.ts             |   36 +-
 src/assets/style/global.less                  |    2 +-
 src/components/ApiTest/index.vue              |    6 +-
 src/components/CustomLeftMenu/index.vue       |   19 +-
 src/components/HandsontablePro/index.vue      |   83 +-
 src/components/top-nav/index.vue              |   90 +-
 src/config/settings.json                      |    2 +-
 src/locale/en-US.ts                           |   17 +
 src/locale/zh-CN.ts                           |   21 +-
 src/styles/dark-mode.less                     |    2 +-
 src/utils/auditFields.ts                      |   50 +
 src/utils/pageBackground.ts                   |    2 +-
 src/utils/publishSnapshotDiff.ts              |   17 +
 src/views/api/downstreamInterface/index.vue   |   38 +-
 src/views/api/requestLog/index.vue            |   40 +-
 src/views/api/upstreamInterface/index.vue     |  135 +-
 .../components/BillingConditionEditor.vue     |   90 +-
 .../components/BillingSimulateDrawer.vue      |    2 +-
 .../components/PriceListHotTable.vue          |  590 ++++
 src/views/channel/salesProducts/index.vue     | 2861 +++++++++++------
 src/views/channel/serviceChannels/index.vue   | 2327 +++++++++-----
 src/views/channel/weightRounding/index.vue    |   28 +-
 src/views/channel/weightRules/index.vue       |   24 +-
 .../login/components/pwd-login/index.vue      |   18 +-
 src/views/login/index.vue                     |   10 +
 src/views/order/customs9610Order/index.vue    |    3 +-
 src/views/order/myOrders/index.vue            |  141 +-
 src/views/order/pickupOrder/index.vue         |   67 +-
 src/views/order/platformStoreOrder/index.vue  |   54 +-
 src/views/order/waybillManage/index.vue       |  131 +-
 src/views/site/SiteHeader.vue                 |    1 +
 src/views/site/SiteRoutesPanel.vue            |   34 +-
 src/views/site/SiteTopicPanel.vue             |   58 +-
 src/views/site/index.vue                      |    2 +-
 src/views/site/styles/ai-advisor.css          |  258 +-
 src/views/site/styles/main.css                |    2 +-
 src/views/track/trackOrder/index.vue          |   52 +-
 39 files changed, 5304 insertions(+), 2065 deletions(-)
 create mode 100644 src/utils/auditFields.ts
 create mode 100644 src/views/channel/salesProducts/components/PriceListHotTable.vue

diff --git a/index.html b/index.html
index 62b8e66..3f1593d 100644
--- a/index.html
+++ b/index.html
@@ -56,14 +56,24 @@
 
         var isH5 = isH5Path;
         var isEn = false;
+        var pageBg = '#f0f3f4';
         try {
           var locale =
             localStorage.getItem('arco-locale') || localStorage.getItem('locale') || '';
           isEn = /^en/i.test(locale);
+          var storedBg = localStorage.getItem('app-page-background-color');
+          if (storedBg && /^#?[0-9a-fA-F]{6}$/.test(storedBg)) {
+            pageBg = storedBg.charAt(0) === '#' ? storedBg : '#' + storedBg;
+          }
         } catch (e) {}
         var root = document.documentElement;
         if (isH5) root.classList.add('app-boot-h5');
         if (isEn) root.classList.add('app-boot-en');
+        /* 加载页与 OMS/官网共用页面背景配置，首屏前写入避免闪色 */
+        root.style.setProperty('--app-page-bg', pageBg);
+        root.style.setProperty('--kc-page-bg', pageBg);
+        root.style.setProperty('--ai-bg', pageBg);
+        root.style.setProperty('--ai-canvas', pageBg);
         try {
           document.title = isH5
             ? isEn
@@ -100,7 +110,7 @@
        * 常驻 stable 会在右侧留出约 15px 空缝，贯穿 fixed 顶栏。
        */
       html {
-        background: #f5f4f1;
+        background: var(--app-page-bg, #f0f3f4);
       }
       html.app-boot-site #app-boot {
         display: none !important;
@@ -118,7 +128,7 @@
       #app {
         margin: 0;
         min-height: 100%;
-        background: #f5f4f1;
+        background: var(--app-page-bg, #f0f3f4);
       }
       #app-boot {
         position: fixed;
@@ -133,7 +143,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: #f5f4f1;
+        background: var(--app-page-bg, #f0f3f4);
         /*
          * 必须与 global.less 首屏后状态一致：
          * Vue 加载后 html 会带上 antialiased，若 boot 首帧没有，中文会突然变细像「字号缩小」。
@@ -272,9 +282,9 @@
       #app-boot.is-timeout .boot-sub {
         color: #86909c;
       }
-      /* H5：样式挂在 html.app-boot-h5 上，首屏即正确，不再二次改字号/Logo */
+      /* H5：样式挂在 html.app-boot-h5 上，首屏即正确，不再二次改字号/Logo；背景随页面背景配置 */
       html.app-boot-h5 {
-        background: #f5f6f8;
+        background: var(--app-page-bg, #f0f3f4);
       }
       html.app-boot-h5.app-booting {
         scrollbar-gutter: stable;
@@ -282,10 +292,10 @@
       html.app-boot-h5,
       html.app-boot-h5 body,
       html.app-boot-h5 #app {
-        background: #f5f6f8;
+        background: var(--app-page-bg, #f0f3f4);
       }
       html.app-boot-h5 #app-boot {
-        background: #f5f6f8;
+        background: var(--app-page-bg, #f0f3f4);
         padding: env(safe-area-inset-top, 0) 24px env(safe-area-inset-bottom, 0);
       }
       html.app-boot-h5 #app-boot .boot-panel {
diff --git a/src/api/channel/salesProduct.ts b/src/api/channel/salesProduct.ts
index 09d9ebe..09c096c 100644
--- a/src/api/channel/salesProduct.ts
+++ b/src/api/channel/salesProduct.ts
@@ -81,15 +81,29 @@ export async function saveSalesProductCustomerGuide(body: {
   assertBusinessOk(res.data)
 }
 
-/** 卖价 */
-export async function getSalesProductPriceList(salesProductId: number | string) {
+/** 卖价列表；列表页请传 includeDetails:false，避免拉回整张价格矩阵导致卡顿 */
+export async function getSalesProductPriceList(
+  salesProductId: number | string,
+  opts?: { includeDetails?: boolean },
+) {
   const res = await axiosInstance.get(omsUrl('/channel/sales-product/price/list'), {
-    params: { salesProductId },
+    params: {
+      salesProductId,
+      includeDetails: opts?.includeDetails ?? true,
+    },
   })
   const { items } = parseListPayload(res.data)
   return items ?? []
 }
 
+/** 单条卖价（含 factors/details），编辑弹窗按需加载 */
+export async function getSalesProductPrice(id: number | string) {
+  const res = await axiosInstance.get(omsUrl('/channel/sales-product/price/get'), {
+    params: { id },
+  })
+  return unwrapData<any>(res.data) ?? res.data?.data ?? res.data
+}
+
 export async function createSalesProductPrice(body: Record<string, any>) {
   const res = await axiosInstance.post(omsUrl('/channel/sales-product/price/create'), body)
   assertBusinessOk(res.data)
@@ -150,6 +164,8 @@ export async function getSalesProductPublishPriceList(params: {
   salesProductId: number | string
   page?: number
   pageSize?: number
+  /** false 时后端不返回快照正文，用于版本头展示 */
+  includeContent?: boolean
 }) {
   const res = await axiosInstance.get(omsUrl('/channel/sales-product/publish/price/list'), { params })
   return parseListPayload(res.data)
@@ -159,11 +175,21 @@ export async function getSalesProductPublishRulesList(params: {
   salesProductId: number | string
   page?: number
   pageSize?: number
+  /** false 时只返回版本头，不带快照正文 */
+  includeContent?: boolean
 }) {
   const res = await axiosInstance.get(omsUrl('/channel/sales-product/publish/rules/list'), { params })
   return parseListPayload(res.data)
 }
 
+/** 单条发布记录（含快照正文） */
+export async function getSalesProductPublishRecord(id: number | string) {
+  const res = await axiosInstance.get(omsUrl('/channel/sales-product/publish/get'), {
+    params: { id },
+  })
+  return unwrapData<any>(res.data) ?? res.data?.data ?? res.data
+}
+
 /** 预览即将发布的快照（不落库），用于发布弹窗与发布记录核对 */
 export async function getSalesProductPublishPreview(params: {
   salesProductId: number | string
diff --git a/src/api/channel/serviceChannel.ts b/src/api/channel/serviceChannel.ts
index 9e4d9c5..b6ceffc 100644
--- a/src/api/channel/serviceChannel.ts
+++ b/src/api/channel/serviceChannel.ts
@@ -1,7 +1,22 @@
 import { axiosInstance } from '@/api/rbac'
-import { assertBusinessOk, omsUrl, parseListPayload } from '@/api/oms/common'
+import { assertBusinessOk, omsUrl, parseListPayload, unwrapData } from '@/api/oms/common'
 import { ENABLE_STATUS, isEnableStatusEnabled, toEnableStatus } from '@/utils/enableStatus'
 
+/** 渠道下拉：全部名称，不分页 */
+export async function getServiceChannelOptions() {
+  const res = await axiosInstance.get(omsUrl('/channel/service-channel/options'))
+  const body = res.data
+  if (Array.isArray(body)) return body
+  assertBusinessOk(body)
+  const raw = body?.data ?? body?.Data ?? body?.result ?? body?.Result ?? body
+  if (Array.isArray(raw)) return raw
+  if (raw && typeof raw === 'object') {
+    const items = (raw as any).items ?? (raw as any).Items ?? (raw as any).list ?? (raw as any).List
+    if (Array.isArray(items)) return items
+  }
+  return []
+}
+
 export async function getServiceChannelList(params: {
   page?: number
   pageSize?: number
@@ -181,15 +196,30 @@ export async function deleteServiceChannelGroup(id: number | string) {
   assertBusinessOk(res.data)
 }
 
-export async function getServiceChannelPriceList(serviceChannelId: number | string) {
+/** 买价列表；列表页请传 includeDetails:false，避免拉回整张价格矩阵导致卡顿 */
+export async function getServiceChannelPriceList(
+  serviceChannelId: number | string,
+  opts?: { includeDetails?: boolean },
+) {
   const res = await axiosInstance.get(omsUrl('/channel/service-channel/price/list'), {
-    params: { serviceChannelId },
+    params: {
+      serviceChannelId,
+      includeDetails: opts?.includeDetails ?? true,
+    },
   })
   // 与 parseListPayload 一致：兼容 data 为数组、{ items }、{ list } 等
   const { items } = parseListPayload(res.data)
   return items
 }
 
+/** 单条买价（含 factors/details），编辑弹窗按需加载 */
+export async function getServiceChannelPrice(id: number | string) {
+  const res = await axiosInstance.get(omsUrl('/channel/service-channel/price/get'), {
+    params: { id },
+  })
+  return unwrapData<any>(res.data) ?? res.data?.data ?? res.data
+}
+
 export async function createServiceChannelPrice(body: Record<string, any>) {
   const res = await axiosInstance.post(omsUrl('/channel/service-channel/price/create'), body)
   assertBusinessOk(res.data)
diff --git a/src/assets/style/global.less b/src/assets/style/global.less
index 5f7f059..a0a43cf 100644
--- a/src/assets/style/global.less
+++ b/src/assets/style/global.less
@@ -5,7 +5,7 @@
   --app-primary-color-light: #eef3f6;
   --app-navbar-bg: #054f74;
   --app-sidebar-bg: #054f74;
-  --app-page-bg: #f5f4f1;
+  --app-page-bg: #f0f3f4;
   --app-card-bg: #ffffff;
   --app-card-border: #e5e6eb;
   --app-elevated-bg: #ffffff;
diff --git a/src/components/ApiTest/index.vue b/src/components/ApiTest/index.vue
index c220514..049e8a9 100644
--- a/src/components/ApiTest/index.vue
+++ b/src/components/ApiTest/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { ref, reactive, computed, nextTick, watch, h } from 'vue';
+  import { ref, reactive, computed, nextTick, watch, h, defineAsyncComponent } from 'vue';
   import type { PropType } from 'vue';
   import { IconDelete } from '@arco-design/web-vue/es/icon';
   import { Message, Modal } from '@arco-design/web-vue';
@@ -14,9 +14,11 @@
   import { getInterfaceGetInterfaceById } from '@/api/InterfaceServices/interface';
   import { getMethodText } from '@/views/api/upstreamInterface/utils';
   import { useTabRowCounts } from '@/utils/useTabRowCounts';
-  import RequestLog from '@/views/api/requestLog/index.vue';
   import { prodApiOrigin } from '@/utils/rewriteBrowserApiPath';
 
+  /** 请求日志页含 Handsontable，仅打开「查看报文」时再加载 */
+  const RequestLog = defineAsyncComponent(() => import('@/views/api/requestLog/index.vue'));
+
   const { t } = useI18n();
 
   defineOptions({
diff --git a/src/components/CustomLeftMenu/index.vue b/src/components/CustomLeftMenu/index.vue
index 9f6e91e..14fe798 100644
--- a/src/components/CustomLeftMenu/index.vue
+++ b/src/components/CustomLeftMenu/index.vue
@@ -603,6 +603,8 @@
     --clm-node-second-line-height: 16px;
     --clm-node-padding-y: 5px;
     --clm-node-height: 60px;
+    /* 菜单项垂直间距 */
+    --clm-node-gap: 8px;
 
     position: relative;
     display: flex;
@@ -858,7 +860,7 @@
       }
 
       .tree-node {
-        margin: 2px 0;
+        margin: calc(var(--clm-node-gap) / 2) 0;
         padding: var(--clm-node-padding-y) 8px;
         border-radius: var(--clm-radius);
         border: 1px solid rgba(15, 16, 17, 0.06);
@@ -879,7 +881,7 @@
           height: auto;
           min-height: 34px;
           max-height: none;
-          margin: 8px 0 2px;
+          margin: calc(var(--clm-node-gap) + 4px) 0 calc(var(--clm-node-gap) / 2);
           padding: 6px 8px;
           border-color: transparent;
           background: transparent;
@@ -1098,7 +1100,7 @@
     box-sizing: border-box;
     border: 1px solid rgba(15, 16, 17, 0.06);
     padding: var(--clm-node-padding-y) 8px;
-    margin: 2px 0;
+    margin: calc(var(--clm-node-gap) / 2) 0;
     border-radius: var(--clm-radius);
     transition: background-color 0.12s ease, border-color 0.12s ease;
     cursor: pointer;
@@ -1120,7 +1122,7 @@
       height: auto;
       min-height: 34px;
       max-height: none;
-      margin: 10px 0 4px;
+      margin: calc(var(--clm-node-gap) + 4px) 0 calc(var(--clm-node-gap) / 2);
       padding: 6px 8px;
       border-color: transparent;
       background: transparent;
@@ -1184,10 +1186,11 @@
       }
     }
 
-    /* 实体叶子：保持卡片感 */
+    /* 实体叶子：固定高度，内容块垂直居中避免贴底 */
     &.tree-node--leaf {
       background: var(--color-fill-1);
       border-color: rgba(15, 16, 17, 0.07);
+      align-items: center;
     }
 
     &:hover {
@@ -1250,7 +1253,11 @@
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
-    height: 100%;
+    height: auto;
+  }
+
+  .node-second-row > td {
+    padding-top: 2px;
   }
 
   .node-content-cell {
diff --git a/src/components/HandsontablePro/index.vue b/src/components/HandsontablePro/index.vue
index c9cdb1f..9730fcf 100644
--- a/src/components/HandsontablePro/index.vue
+++ b/src/components/HandsontablePro/index.vue
@@ -1824,8 +1824,14 @@
               if (!hotInstance) return;
               const editor = hotInstance.getActiveEditor() as any;
               if (!editor) return;
+              // TextEditor：只有传入 string 才会用该初值；数字会被忽略并回退 originalValue。
+              // 显式传入 String(cell) 避免 originalValue 未就绪时点进编辑被清空。
+              const raw = hotInstance.getDataAtCell(r, c);
+              const initial = raw === null || raw === undefined ? '' : String(raw);
               if (!editor.isOpened?.()) {
-                editor.beginEditing?.();
+                editor.beginEditing?.(initial);
+              } else if (editor.TEXTAREA && (editor.TEXTAREA.value == null || editor.TEXTAREA.value === '')) {
+                editor.setValue?.(initial);
               }
               // 下拉/自动完成：点开即展开选项，避免用户不知道还能点箭头
               const meta = hotInstance.getCellMeta(r, c);
@@ -1833,8 +1839,12 @@
               if (t === 'dropdown' || t === 'autocomplete') {
                 window.setTimeout(() => {
                   try {
-                    if (typeof editor.open === 'function') editor.open();
-                    else if (typeof editor.queryChoices === 'function') editor.queryChoices(editor.TEXTAREA?.value ?? '');
+                    if (editor.TEXTAREA && !editor.TEXTAREA.value && initial) {
+                      editor.setValue?.(initial);
+                    }
+                    // 用空 query 拉全量选项，避免「当前值与 source 不完全一致」时列表被滤空
+                    if (typeof editor.queryChoices === 'function') editor.queryChoices('');
+                    else if (typeof editor.open === 'function') editor.open();
                   } catch (_) {
                     /* ignore */
                   }
@@ -2406,8 +2416,7 @@
     }
   }
 
-  // 监听数据变化
-  watch(() => props.data, () => {
+  function refreshHandsontableData() {
     if (ignoreDataWatch) return;
     // 编辑中勿 loadData，否则输入框/下拉会被立刻拆掉
     if (hotInstance && props.readOnly === false) {
@@ -2422,7 +2431,29 @@
         void initHandsontableWhenReady({ finalize: false });
       });
     }
-  }, { deep: true });
+  }
+
+  /**
+   * 数据刷新策略：
+   * - 可编辑表：afterChange 会写回行对象；若 deep watch，上千行一改一格就全表 loadData → 卡死。
+   *   因此只在数组引用/长度变化时刷新。
+   * - 只读表：仍 deep watch，兼容外部原地改字段后的展示刷新。
+   */
+  watch(
+    () => [props.data, props.data?.length] as const,
+    () => {
+      refreshHandsontableData();
+    },
+  );
+
+  watch(
+    () => props.data,
+    () => {
+      if (props.readOnly === false) return;
+      refreshHandsontableData();
+    },
+    { deep: true },
+  );
 
   // 监听分页变化
   watch([() => props.currentPage, () => props.pageSize], () => {
@@ -2442,10 +2473,26 @@
     { deep: true }
   );
 
-  // 列定义变化时，重新对齐顺序并重建表格
+  function columnsStructuralKey(cols: ColumnDef[]): string {
+    return (cols || [])
+      .map((c) =>
+        [
+          c.key,
+          c.label,
+          c.type || '',
+          c.readOnly ? 1 : 0,
+          c.width || '',
+          Array.isArray(c.source) ? c.source.join('\u0001') : '',
+        ].join('\u0002'),
+      )
+      .join('\u0003');
+  }
+
+  // 列定义变化时，仅在结构真正变化时重建（避免 computed 每次新对象引用就整表销毁）
   watch(
-    () => props.columns,
-    () => {
+    () => columnsStructuralKey(props.columns),
+    (next, prev) => {
+      if (next === prev) return;
       internalColumnOrder.value = normalizeColumnOrder(props.columns, internalColumnOrder.value);
       if (hotInstance) {
         nextTick(() => {
@@ -2454,7 +2501,6 @@
         });
       }
     },
-    { deep: true }
   );
 
   // 窗口大小变化处理函数
@@ -2502,12 +2548,15 @@
 
   // 容器尺寸变化时同步表格高度，使列表高度与容器一致
   let resizeObserver: ResizeObserver | null = null;
+  let lastObservedTableHeight = 0;
+  let resizeRaf = 0;
   const setupResizeObserver = () => {
     if (!containerRef.value) return;
     if (resizeObserver) {
       resizeObserver.disconnect();
       resizeObserver = null;
     }
+    lastObservedTableHeight = 0;
     resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
       if (!entry || !hotInstance) return;
@@ -2515,9 +2564,14 @@
       // 高度以本组件根容器实测为准；勿用外层 props.height 覆盖，否则与 flex 内真实高度不一致，stretchH 会把列压满导致横向条消失
       if (h <= 0) return;
       const fh = Math.max(Math.floor(h - customScrollbarSize), 120);
-      hotInstance.updateSettings({ height: fh });
-      nextTick(() => {
-        hotInstance?.refreshDimensions();
+      // 高度几乎不变时跳过，避免 updateSettings→再触发 RO 的死循环把页面卡死
+      if (Math.abs(fh - lastObservedTableHeight) < 2) return;
+      lastObservedTableHeight = fh;
+      if (resizeRaf) cancelAnimationFrame(resizeRaf);
+      resizeRaf = requestAnimationFrame(() => {
+        resizeRaf = 0;
+        if (!hotInstance) return;
+        hotInstance.updateSettings({ height: fh }, false);
         ensureHorizontalScrollbarVisible();
         syncHorizontalScrollbarMetrics();
         syncVerticalScrollbarMetrics();
@@ -3382,7 +3436,8 @@
 .autocompleteEditor.handsontable.listbox,
 .ht-theme-classic .handsontable.listbox,
 .ht-theme-classic-dark .handsontable.listbox {
-  z-index: 5600 !important;
+  /* 高于 Arco Modal（约 1001+），避免弹窗内下拉被挡住 */
+  z-index: 11000 !important;
   border: 1px solid var(--color-border-2, #e5e6eb) !important;
   border-radius: 6px !important;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
diff --git a/src/components/top-nav/index.vue b/src/components/top-nav/index.vue
index d0dc916..03091cc 100644
--- a/src/components/top-nav/index.vue
+++ b/src/components/top-nav/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div id="top-nav" class="top-nav" :class="{ tabNavEnable: tabNavEnable }">
     <div class="top-nav-header">
-      <!-- Logo 区域 -->
-      <div class="top-nav-logo">
+      <!-- Logo 区域：点击跳转官网首页 -->
+      <a class="top-nav-logo" href="/" :title="t('brand.fullName')" @click.prevent="goOfficialSite">
         <img :src="navLogo" :alt="t('brand.name')" />
         <div class="top-nav-logo__brand">
           <span class="top-nav-logo__name">{{ t('brand.name') }}</span>
           <span class="top-nav-logo__full">{{ t('brand.fullName') }}</span>
         </div>
-      </div>
+      </a>
       
       <!-- 顶部水平菜单：磁吸滑块 + 极速 hover 下拉 -->
       <div
@@ -298,6 +298,11 @@ const topNavEnable = computed(() => true); // 启用顶部导航
 const tabNavEnable = computed(() => appStore.tabBar);
 const printConnectionState = useHiprintClientState();
 
+/** 顶栏 Logo → 官网首页（开发环境即 http://localhost:5173/） */
+function goOfficialSite() {
+  window.location.href = '/';
+}
+
 const menuItemEls = new Map<string, HTMLElement>();
 const indicatorReady = ref(false);
 const indicatorVisible = ref(false);
@@ -307,6 +312,8 @@ const indicatorStyle = ref<Record<string, string>>({
 });
 /** 磁吸：当前指针悬停的一级菜单；空则吸回路由选中项 */
 const hoverMenuKey = ref('');
+/** 跳转中目标一级（路由尚未变时避免滑块先吸回旧项再弹到新项） */
+const pendingNavTopKey = ref('');
 /** 下拉进入/离开延迟（ms）：偏快，横向扫菜单时几乎无感 */
 const SUBMENU_ENTER_DELAY = 20;
 const SUBMENU_LEAVE_DELAY = 120;
@@ -336,6 +343,7 @@ function setMenuItemRef(key: string, el: Element | ComponentPublicInstance | nul
 function resolveIndicatorKey() {
   if (hoverMenuKey.value) return hoverMenuKey.value;
   if (openedSubmenuKey.value) return openedSubmenuKey.value;
+  if (pendingNavTopKey.value) return pendingNavTopKey.value;
   return isOverflowActive.value ? MORE_MENU_KEY : belongTopMenu.value;
 }
 
@@ -385,6 +393,7 @@ function onMenuItemPointerEnter(key: string) {
 }
 
 function onMenuBarPointerLeave(e: PointerEvent) {
+  if (navPaintLock.value) return;
   const next = e.relatedTarget as Node | null;
   // 指针进入二级浮层时保持当前一级高亮，不吸回
   if (
@@ -398,6 +407,7 @@ function onMenuBarPointerLeave(e: PointerEvent) {
   hoverMenuKey.value = '';
   moveIndicatorToKey(
     openedSubmenuKey.value ||
+      pendingNavTopKey.value ||
       (isOverflowActive.value ? MORE_MENU_KEY : belongTopMenu.value),
   );
 }
@@ -417,7 +427,14 @@ async function onTopMenuClick(e: MouseEvent, item: any) {
   e.preventDefault();
   const children = filterPage(item.children);
   if (children.length > 0) {
-    paintNavThenGo(children[0]);
+    // 有二级时只展开面板，不抢先进第一项（否则再点目标页等于连续加载两次）
+    if (openedSubmenuKey.value === MORE_MENU_KEY) {
+      return;
+    }
+    const key = menuKey(item);
+    openedSubmenuKey.value = key;
+    hoverMenuKey.value = key;
+    moveIndicatorToKey(key);
     return;
   }
   paintNavThenGo(item);
@@ -771,6 +788,19 @@ function onSubmenuPopupVisibleChange(key: string, visible: boolean) {
     openedSubmenuKey.value = key;
     hoverMenuKey.value = key;
     moveIndicatorToKey(key);
+    // 展开一级时预取二级路由 chunk，缩短点击后白屏
+    if (key === MORE_MENU_KEY) {
+      overflowTopMenus.value.forEach((item) => {
+        filterPage(item.children).forEach((child) => prefetchMenuRoute(child));
+      });
+    } else {
+      const parent =
+        fittedTopMenus.value.find((m) => menuKey(m) === key) ||
+        overflowTopMenus.value.find((m) => menuKey(m) === key);
+      if (parent) {
+        filterPage(parent.children).forEach((child) => prefetchMenuRoute(child));
+      }
+    }
     nextTick(() => {
       requestAnimationFrame(() => {
         const el = document.querySelector(
@@ -1058,15 +1088,44 @@ function previewMenuNavigation(item: any) {
   }
 }
 
+/** 二级项所属一级（溢出则落到「更多」） */
+function findTopMenuKeyForItem(item: any): string {
+  const targetKey = menuKey(item);
+  const targetPath = String(item?.path || item?.route || '');
+  if (!targetKey && !targetPath) return '';
+
+  for (const menu of visibleTopMenus.value) {
+    const topKey = menuKey(menu);
+    if (topKey && topKey === targetKey) {
+      return overflowTopMenus.value.some((m) => menuKey(m) === topKey)
+        ? MORE_MENU_KEY
+        : topKey;
+    }
+    for (const child of filterPage(menu.children) || []) {
+      const childPath = String(child.path || child.route || '');
+      const childMatched =
+        (targetKey && menuKey(child) === targetKey) ||
+        (targetPath && childPath === targetPath);
+      if (!childMatched) continue;
+      return overflowTopMenus.value.some((m) => menuKey(m) === topKey)
+        ? MORE_MENU_KEY
+        : topKey;
+    }
+  }
+  return '';
+}
+
 /** 先关弹层、亮标签，下一帧再走路由，避免页面重渲染把顶栏一起卡住 */
 let navGoingTo = '';
 function paintNavThenGo(item: any) {
   const rawPath = String(item?.path || item?.route || '');
   if (navGoingTo && navGoingTo === rawPath) return;
   navGoingTo = rawPath;
+  // 先锁再关弹层，避免 leave/关闭回调把滑块吸回旧一级
+  navPaintLock.value = true;
+  pendingNavTopKey.value = findTopMenuKeyForItem(item);
   openedSubmenuKey.value = '';
   hoverMenuKey.value = '';
-  navPaintLock.value = true;
   if (navPaintUnlockTimer) {
     window.clearTimeout(navPaintUnlockTimer);
   }
@@ -1077,8 +1136,17 @@ function paintNavThenGo(item: any) {
       goto(item);
       navPaintUnlockTimer = window.setTimeout(() => {
         navPaintLock.value = false;
+        // 路由已切到目标时清掉 pending；否则留到 belongTopMenu 对齐再清
+        if (
+          !pendingNavTopKey.value ||
+          pendingNavTopKey.value === belongTopMenu.value ||
+          (pendingNavTopKey.value === MORE_MENU_KEY && isOverflowActive.value)
+        ) {
+          pendingNavTopKey.value = '';
+        }
         navPaintUnlockTimer = 0;
         navGoingTo = '';
+        updateActiveIndicator();
       }, 280);
     });
   });
@@ -1179,6 +1247,13 @@ function handleCustomerBalanceChanged() {
 watch(
   () => [belongTopMenu.value, menuDataReady.value, visibleTopMenus.value.length] as const,
   async () => {
+    if (
+      pendingNavTopKey.value &&
+      (pendingNavTopKey.value === belongTopMenu.value ||
+        (pendingNavTopKey.value === MORE_MENU_KEY && isOverflowActive.value))
+    ) {
+      pendingNavTopKey.value = '';
+    }
     await nextTick();
     await recalcMenuOverflow();
   },
@@ -1241,7 +1316,10 @@ onUnmounted(() => {
       gap: 10px;
       padding: 0 16px;
       flex-shrink: 0;
-      
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+
       img {
         height: 36px;
         width: 36px;
diff --git a/src/config/settings.json b/src/config/settings.json
index 4c4cb20..26ea3df 100644
--- a/src/config/settings.json
+++ b/src/config/settings.json
@@ -8,7 +8,7 @@
   "menuCollapse": false,
   "footer": false,
   "themeColor": "#054f74",
-  "pageBackgroundColor": "#f5f4f1",
+  "pageBackgroundColor": "#f0f3f4",
   "menuWidth": 220,
   "globalSettings": false,
   "device": "desktop",
diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts
index 3125856..f5a7c7d 100644
--- a/src/locale/en-US.ts
+++ b/src/locale/en-US.ts
@@ -4995,6 +4995,8 @@ export default {
   'channel.salesProducts.empty.selectProduct': 'Select a product from the left',
   'channel.salesProducts.context.product': 'Product',
   'channel.salesProducts.context.group': 'Group',
+  'channel.salesProducts.context.updateTime': 'Updated',
+  'channel.salesProducts.context.updateBy': 'Updated by',
   'channel.salesProducts.context.unsaved': 'Unsaved',
   'channel.salesProducts.context.publishPending': 'Config pending',
   'channel.salesProducts.context.rulesPublishPending': 'Rules pending',
@@ -5092,6 +5094,13 @@ export default {
   'channel.salesProducts.publish.tabs.rules': 'Rules',
   'channel.salesProducts.publish.versionRemark': 'Version note',
   'channel.salesProducts.publish.noRemark': 'No notes',
+  'channel.salesProducts.publish.recordsHint': 'Select a version to view its snapshot; rollback is available',
+  'channel.salesProducts.publish.versionLabel': 'Version: {version}',
+  'channel.salesProducts.publish.status.publish': 'Published',
+  'channel.salesProducts.publish.status.rollback': 'Rolled back',
+  'channel.salesProducts.publish.emptyList': 'No publish records',
+  'channel.salesProducts.publish.emptyDetail': 'Select a version on the left to view details',
+  'channel.salesProducts.publish.emptyContent': 'No snapshot content',
 
   'channel.salesProducts.ai.open': 'AI analysis',
   'channel.salesProducts.ai.openRequired': 'Required: AI analysis',
@@ -5377,6 +5386,11 @@ export default {
   'channel.serviceChannels.record.versionRemark': 'Version note',
   'channel.serviceChannels.record.noRemark': 'No notes',
   'channel.serviceChannels.record.versionNumber': 'Version: {version}',
+  'channel.serviceChannels.record.recordsHint': 'Select a version to view its snapshot; rollback is available',
+  'channel.serviceChannels.record.status.rollback': 'Rolled back',
+  'channel.serviceChannels.record.emptyList': 'No publish records',
+  'channel.serviceChannels.record.emptyDetail': 'Select a version on the left to view details',
+  'channel.serviceChannels.record.emptyContent': 'No snapshot content',
   'channel.serviceChannels.modal.publishDateTitle': 'Select publish date',
   'channel.serviceChannels.modal.publishDate.placeholder': 'Please select date',
   'channel.serviceChannels.modal.actions.cancel': 'Cancel',
@@ -5411,11 +5425,14 @@ export default {
   'channel.serviceChannels.drawer.priceList.batchFillSelected': '{count} rows selected',
   'channel.serviceChannels.drawer.priceList.batchFillValue': 'Unit price',
   'channel.serviceChannels.createTime': 'Created: {time}',
+  'channel.serviceChannels.updateTime': 'Updated: {time}',
   'channel.serviceChannels.empty.selectChannel': 'Select a channel from the left',
   'channel.serviceChannels.context.channel': 'Channel',
   'channel.serviceChannels.context.group': 'Provider group',
   'channel.serviceChannels.context.app': 'Application',
   'channel.serviceChannels.context.apiProvider': 'API provider',
+  'channel.serviceChannels.context.updateTime': 'Updated',
+  'channel.serviceChannels.context.updateBy': 'Updated by',
   'channel.serviceChannels.context.unsaved': 'Unsaved',
   'channel.serviceChannels.context.rulesPublishPending': 'Config pending',
   'channel.serviceChannels.publishConfirm.title': 'Publish confirmation',
diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
index 7dd033c..47127a1 100644
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@@ -5031,6 +5031,8 @@ export default {
   'channel.salesProducts.empty.selectProduct': '请从左侧选择销售产品',
   'channel.salesProducts.context.product': '当前产品',
   'channel.salesProducts.context.group': '产品分组',
+  'channel.salesProducts.context.updateTime': '修改时间',
+  'channel.salesProducts.context.updateBy': '修改人',
   'channel.salesProducts.context.unsaved': '未保存',
   'channel.salesProducts.context.publishPending': '待发布配置',
   'channel.salesProducts.context.rulesPublishPending': '待发布规则',
@@ -5127,6 +5129,13 @@ export default {
   'channel.salesProducts.publish.tabs.rules': '规则',
   'channel.salesProducts.publish.versionRemark': '版本备注',
   'channel.salesProducts.publish.noRemark': '暂无备注',
+  'channel.salesProducts.publish.recordsHint': '选择版本查看快照，可回滚到历史发布',
+  'channel.salesProducts.publish.versionLabel': '版本号：{version}',
+  'channel.salesProducts.publish.status.publish': '发布',
+  'channel.salesProducts.publish.status.rollback': '回滚',
+  'channel.salesProducts.publish.emptyList': '暂无发布记录',
+  'channel.salesProducts.publish.emptyDetail': '请选择左侧版本查看详情',
+  'channel.salesProducts.publish.emptyContent': '暂无快照内容',
 
   'channel.salesProducts.ai.open': 'AI 分析',
   'channel.salesProducts.ai.openRequired': '必做：AI 分析',
@@ -5320,7 +5329,7 @@ export default {
   'channel.salesProducts.drawer.footer.generatePriceList': '生成价格表',
   'channel.salesProducts.drawer.footer.syncPriceList': '同步价格表',
   'channel.salesProducts.drawer.footer.save': '保存',
-  'channel.salesProducts.drawer.priceList.hint': '已有组合会保留价格；勾选行可批量填价',
+  'channel.salesProducts.drawer.priceList.hint': '已有组合会保留价格；选中行可批量填价',
   'channel.salesProducts.drawer.priceList.batchFill': '批量填价',
   'channel.salesProducts.drawer.priceList.batchFillEmpty': '只填空白/0',
   'channel.salesProducts.drawer.priceList.copyPrev': '复制上一行',
@@ -5412,6 +5421,11 @@ export default {
   'channel.serviceChannels.record.versionRemark': '版本备注',
   'channel.serviceChannels.record.noRemark': '暂无备注',
   'channel.serviceChannels.record.versionNumber': '版本号：{version}',
+  'channel.serviceChannels.record.recordsHint': '选择版本查看快照，可回滚到历史发布',
+  'channel.serviceChannels.record.status.rollback': '回滚',
+  'channel.serviceChannels.record.emptyList': '暂无发布记录',
+  'channel.serviceChannels.record.emptyDetail': '请选择左侧版本查看详情',
+  'channel.serviceChannels.record.emptyContent': '暂无快照内容',
   'channel.serviceChannels.modal.publishDateTitle': '选择发布日期',
   'channel.serviceChannels.modal.publishDate.placeholder': '请选择日期',
   'channel.serviceChannels.modal.actions.cancel': '取消',
@@ -5440,18 +5454,21 @@ export default {
   'channel.serviceChannels.drawer.footer.generatePriceList': '生成价格表',
   'channel.serviceChannels.drawer.footer.syncPriceList': '同步价格表',
   'channel.serviceChannels.drawer.footer.save': '保存',
-  'channel.serviceChannels.drawer.priceList.hint': '已有组合会保留单价；勾选行可批量填价',
+  'channel.serviceChannels.drawer.priceList.hint': '已有组合会保留单价；选中行可批量填价',
   'channel.serviceChannels.drawer.priceList.batchFill': '批量填价',
   'channel.serviceChannels.drawer.priceList.batchFillEmpty': '只填空白/0',
   'channel.serviceChannels.drawer.priceList.copyPrev': '复制上一行',
   'channel.serviceChannels.drawer.priceList.batchFillSelected': '已选 {count} 行',
   'channel.serviceChannels.drawer.priceList.batchFillValue': '统一单价',
   'channel.serviceChannels.createTime': '创建: {time}',
+  'channel.serviceChannels.updateTime': '修改: {time}',
   'channel.serviceChannels.empty.selectChannel': '请从左侧选择渠道',
   'channel.serviceChannels.context.channel': '当前渠道',
   'channel.serviceChannels.context.group': '服务商分组',
   'channel.serviceChannels.context.app': '应用',
   'channel.serviceChannels.context.apiProvider': 'API 服务商',
+  'channel.serviceChannels.context.updateTime': '修改时间',
+  'channel.serviceChannels.context.updateBy': '修改人',
   'channel.serviceChannels.context.unsaved': '未保存',
   'channel.serviceChannels.context.rulesPublishPending': '待发布配置',
   'channel.serviceChannels.publishConfirm.title': '发布确认',
diff --git a/src/styles/dark-mode.less b/src/styles/dark-mode.less
index 4fd6af5..f9d3671 100644
--- a/src/styles/dark-mode.less
+++ b/src/styles/dark-mode.less
@@ -4,7 +4,7 @@
  */
 
 :root {
-  --app-page-bg: #f5f4f1;
+  --app-page-bg: #f0f3f4;
   --app-card-bg: #ffffff;
   --app-card-border: #e5e6eb;
   --app-elevated-bg: #ffffff;
diff --git a/src/utils/auditFields.ts b/src/utils/auditFields.ts
new file mode 100644
index 0000000..ac677de
--- /dev/null
+++ b/src/utils/auditFields.ts
@@ -0,0 +1,50 @@
+/** 后端未写入修改字段时的占位时间（首次新增常见） */
+export function isPlaceholderAuditTime(val: unknown): boolean {
+  if (val == null || val === '') return true;
+  const s = String(val).trim();
+  if (!s || s === '--' || s === '-') return true;
+  return (
+    s.startsWith('1900-01-01') ||
+    s.startsWith('0001-01-01') ||
+    s.startsWith('0000-00-00')
+  );
+}
+
+function normalizeTimeText(val: unknown): string {
+  if (val == null) return '';
+  const s = String(val).trim();
+  if (!s) return '';
+  return s.replace('T', ' ').slice(0, 19);
+}
+
+/** 修改时间为空/占位时回退创建时间 */
+export function resolveAuditTime(updateTime?: unknown, createTime?: unknown): string {
+  const updated = normalizeTimeText(updateTime);
+  if (!isPlaceholderAuditTime(updated)) return updated;
+  const created = normalizeTimeText(createTime);
+  if (!isPlaceholderAuditTime(created)) return created;
+  return '';
+}
+
+/** 修改人为空时回退创建人 */
+export function resolveAuditBy(updateBy?: unknown, createBy?: unknown): string {
+  const u = updateBy != null ? String(updateBy).trim() : '';
+  if (u) return u;
+  const c = createBy != null ? String(createBy).trim() : '';
+  return c;
+}
+
+/** 从接口行统一取出创建/修改字段，并处理好首次新增占位 */
+export function pickResolvedAudit(row: Record<string, any> | null | undefined) {
+  const createTime = row?.createTime ?? row?.CreateTime;
+  const updateTime =
+    row?.updateTime ?? row?.UpdateTime ?? row?.modifyTime ?? row?.ModifyTime;
+  const createBy = row?.createBy ?? row?.CreateBy;
+  const updateBy = row?.updateBy ?? row?.UpdateBy ?? row?.modifier;
+  return {
+    createTime: resolveAuditTime(createTime, createTime),
+    updateTime: resolveAuditTime(updateTime, createTime),
+    createBy: resolveAuditBy(createBy, createBy),
+    updateBy: resolveAuditBy(updateBy, createBy),
+  };
+}
diff --git a/src/utils/pageBackground.ts b/src/utils/pageBackground.ts
index 9fdad9a..1fec97f 100644
--- a/src/utils/pageBackground.ts
+++ b/src/utils/pageBackground.ts
@@ -4,7 +4,7 @@
 
 export const PAGE_BACKGROUND_STORAGE_KEY = 'app-page-background-color';
 
-export const DEFAULT_PAGE_BACKGROUND = '#f5f4f1';
+export const DEFAULT_PAGE_BACKGROUND = '#f0f3f4';
 
 export const PAGE_BACKGROUND_PRESETS = [
   { color: '#f0f3f4', labelKey: 'settings.pageBg.default' },
diff --git a/src/utils/publishSnapshotDiff.ts b/src/utils/publishSnapshotDiff.ts
index 4219ff8..5b41775 100644
--- a/src/utils/publishSnapshotDiff.ts
+++ b/src/utils/publishSnapshotDiff.ts
@@ -231,6 +231,9 @@ function flattenDiffParts(diff: ReturnType<typeof diffJson>) {
   return merged
 }
 
+/** 超过该字符量时跳过 diffJson 逐行展开，避免卖价大快照卡死主线程 */
+const MAX_INLINE_DIFF_CHARS = 400_000
+
 export function computeSnapshotDiff(
   originalRaw: unknown,
   modifiedRaw: unknown
@@ -246,6 +249,20 @@ export function computeSnapshotDiff(
     if (originalText === modifiedText) {
       return { length: 0, rows: [], equal: true }
     }
+    // 大快照（如上千行卖价明细）做逐行 diff 会分配海量行对象，直接卡死页面
+    if (originalText.length + modifiedText.length > MAX_INLINE_DIFF_CHARS) {
+      return {
+        length: 1,
+        rows: [
+          {
+            type: 'change',
+            oldText: '（快照较大，已跳过逐行对比以免页面卡死）',
+            newText: '请展开下方原始 JSON 查看完整差异',
+          },
+        ],
+        equal: false,
+      }
+    }
     const diff = diffJson(original, modified)
     const rows = flattenDiffParts(diff)
     const length = rows.filter((row) => row.type !== 'same').length
diff --git a/src/views/api/downstreamInterface/index.vue b/src/views/api/downstreamInterface/index.vue
index 5e2a18f..a8e7cca 100644
--- a/src/views/api/downstreamInterface/index.vue
+++ b/src/views/api/downstreamInterface/index.vue
@@ -1,5 +1,15 @@
 <script lang="ts" setup>
-  import { ref, reactive, computed, nextTick, onMounted, onActivated, unref, watch } from 'vue';
+  import {
+    ref,
+    reactive,
+    computed,
+    nextTick,
+    onMounted,
+    onActivated,
+    unref,
+    watch,
+    defineAsyncComponent,
+  } from 'vue';
   import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
   import useModal from '@/components/ModalPro/useModal';
   import ModalPro from '@/components/ModalPro/index.vue';
@@ -17,8 +27,6 @@
     postServiceProviderExport,
     postServiceProviderImport,
   } from '@/api/interface-serviceProvider/serviceProviderImportExport';
-  import ParameterConfig from '@/views/api/downstreamInterface/comps/ParameterConfig.vue';
-  import FixedParameterConfig from '@/views/api/downstreamInterface/comps/FixedParameterConfig.vue';
   import FormPro from '@/components/FormPro/index.vue';
   import TableButtons from '@/components/TableButtons/index.vue';
   import {
@@ -34,11 +42,25 @@
   import { getDictionaryGetList } from '@/api/ApplicationServices/dictionary';
   import { getAppGetDropDownList } from '@/api/ApplicationServices/apps';
   import { getFixedParameterGetFixedParameterList } from '@/api/ParameterServices/fixedParameter';
-  import ServiceProviderInterfaceModal from './components/ServiceProviderInterfaceModal.vue';
-  import AccountList from './comps/AccountList.vue';
-  import ProviderMapPublishModal from './comps/ProviderMapPublishModal.vue';
-  import ApiDebugger from '@/views/api/upstreamInterface/components/ApiDebugger.vue';
   import CustomLeftMenu from '@/components/CustomLeftMenu/index.vue';
+
+  /** 弹层/调试器按需加载，避免首屏拖入 CodeMirror / 请求日志 / Handsontable */
+  const ParameterConfig = defineAsyncComponent(
+    () => import('@/views/api/downstreamInterface/comps/ParameterConfig.vue'),
+  );
+  const FixedParameterConfig = defineAsyncComponent(
+    () => import('@/views/api/downstreamInterface/comps/FixedParameterConfig.vue'),
+  );
+  const ServiceProviderInterfaceModal = defineAsyncComponent(
+    () => import('./components/ServiceProviderInterfaceModal.vue'),
+  );
+  const AccountList = defineAsyncComponent(() => import('./comps/AccountList.vue'));
+  const ProviderMapPublishModal = defineAsyncComponent(
+    () => import('./comps/ProviderMapPublishModal.vue'),
+  );
+  const ApiDebugger = defineAsyncComponent(
+    () => import('@/views/api/upstreamInterface/components/ApiDebugger.vue'),
+  );
   import {
     IconEdit,
     IconSettings,
@@ -1842,7 +1864,7 @@
             </div>
 
             <!-- API调试组件 -->
-            <div v-show="interfaceDetailTab === 'debug'" class="debug-content">
+            <div v-if="interfaceDetailTab === 'debug'" class="debug-content">
               <ApiDebugger
                 :key="`api-debugger-${selectedProvider?.id || ''}-${selectedInterface?.id || ''}-${apiDebuggerRefreshKey}`"
                 :selected-interface="selectedInterface"
diff --git a/src/views/api/requestLog/index.vue b/src/views/api/requestLog/index.vue
index fbf1668..b10c2e3 100644
--- a/src/views/api/requestLog/index.vue
+++ b/src/views/api/requestLog/index.vue
@@ -1,20 +1,29 @@
 <script lang="ts" setup>
   import { renderWarehouseActionBtn, wrapWarehouseActions } from '@/utils/warehouseActionRenderer'
-  import { ref, reactive, computed, onMounted, nextTick, watch } from 'vue';
+  import {
+    ref,
+    reactive,
+    computed,
+    onMounted,
+    nextTick,
+    watch,
+    defineAsyncComponent,
+  } from 'vue';
   import { useRoute } from 'vue-router';
   import { useI18n } from 'vue-i18n';
-  import xmlFormat from 'xml-formatter';
   import { $baseMessage } from '@/utils';
   import useModal from '@/components/ModalPro/useModal';
   import { getLogGetById, getLogGetList } from '@/api/ApplicationServices/log';
   import { IconCopy } from '@arco-design/web-vue/es/icon';
-  import CodeMirror from '@/components/CodeMirror/index.vue';
   import PaginationPro from '@/components/PaginationPro/index.vue';
   import HandsontablePro from '@/components/HandsontablePro/index.vue';
   import { useTableContainerHeight } from '@/composables/useTableContainerHeight';
   import { parseFilterValue, toServerSearchValue } from '@/components/HandsontablePro/filterValue';
   import type { ColumnDef } from '@/components/HandsontablePro/types';
 
+  /** 详情报文编辑器按需加载，避免进页就拉 CodeMirror */
+  const CodeMirror = defineAsyncComponent(() => import('@/components/CodeMirror/index.vue'));
+
   const { t } = useI18n();
   const route = useRoute();
 
@@ -328,6 +337,7 @@
       headers.value = '';
       content.value = '';
       exceptionType.value = '';
+      activeName.value = 'first';
 
       openModal();
       dialogVisible.value = true;
@@ -335,10 +345,16 @@
 
       const data: any = await getLogGetById({ id: row.id });
 
-      response.value = formatContent(data.response || '');
-      response2.value = formatContent(data.response2 || '');
-      headers.value = formatContent(data.headers || '');
-      content.value = formatContent(data.content || '');
+      const [body, hdr, resp, resp2] = await Promise.all([
+        formatContent(data.content || ''),
+        formatContent(data.headers || ''),
+        formatContent(data.response || ''),
+        formatContent(data.response2 || ''),
+      ]);
+      content.value = body;
+      headers.value = hdr;
+      response.value = resp;
+      response2.value = resp2;
       exceptionType.value = String(data.exception || '');
     } catch (error) {
       $baseMessage(t('system.log.message.loadDetailFailed'), 'error');
@@ -398,7 +414,7 @@
     return str.trim().startsWith('<?xml') || str.trim().startsWith('<');
   }
 
-  function formatContent(str: string): string {
+  async function formatContent(str: string): Promise<string> {
     if (!str) return '';
     const strValue = String(str);
     if (isJSON(strValue)) {
@@ -410,6 +426,7 @@
     }
     if (isXML(strValue)) {
       try {
+        const { default: xmlFormat } = await import('xml-formatter');
         return xmlFormat(strValue);
       } catch {
         return strValue;
@@ -521,11 +538,12 @@
       @register="register"
       @cancel="dialogVisible = false"
     >
-      <div class="tabs-container">
+      <div v-if="dialogVisible" class="tabs-container">
         <a-tabs v-model="activeName" class="mb-20px" @change="handleTabChange">
           <a-tab-pane key="first" :title="$t('system.log.modal.tabs.requestBody')">
             <div class="json-content">
               <CodeMirror
+                v-if="activeName === 'first'"
                 v-model="content"
                 :language="getContentLanguage(content)"
                 theme="vs"
@@ -545,6 +563,7 @@
           <a-tab-pane key="second" :title="$t('system.log.modal.tabs.requestHeaders')">
             <div class="json-content">
               <CodeMirror
+                v-if="activeName === 'second'"
                 v-model="headers"
                 :language="getContentLanguage(headers)"
                 theme="vs"
@@ -564,6 +583,7 @@
           <a-tab-pane key="third" :title="$t('system.log.modal.tabs.response')">
             <div class="json-content">
               <CodeMirror
+                v-if="activeName === 'third'"
                 v-model="response"
                 :language="getContentLanguage(response)"
                 theme="vs"
@@ -583,6 +603,7 @@
           <a-tab-pane key="fourth" :title="$t('system.log.modal.tabs.exception')">
             <div class="json-content">
               <CodeMirror
+                v-if="activeName === 'fourth'"
                 v-model="exceptionType"
                 language="text"
                 theme="vs"
@@ -602,6 +623,7 @@
           <a-tab-pane key="fifth" :title="$t('system.log.modal.tabs.queueResult')">
             <div class="json-content">
               <CodeMirror
+                v-if="activeName === 'fifth'"
                 v-model="response2"
                 :language="getContentLanguage(response2)"
                 theme="vs"
diff --git a/src/views/api/upstreamInterface/index.vue b/src/views/api/upstreamInterface/index.vue
index 987f58f..ba9ba78 100644
--- a/src/views/api/upstreamInterface/index.vue
+++ b/src/views/api/upstreamInterface/index.vue
@@ -2,17 +2,26 @@
   import { useTabBarStore } from '@/store';
   import { Modal, Message as $message } from '@arco-design/web-vue';
   import { useI18n } from 'vue-i18n';
-  import { nextTick, onMounted, onActivated, ref, watch, computed, unref } from 'vue';
+  import {
+    nextTick,
+    onMounted,
+    onActivated,
+    ref,
+    watch,
+    computed,
+    unref,
+    reactive,
+    defineAsyncComponent,
+  } from 'vue';
 
   import {
     postInterfaceInterfacePaginatedList,
     postInterfaceBatchDeleteInterfaceByIds,
   } from '@/api/InterfaceServices/interface';
 
-  import CascaderPro from '@/components/CascaderPro/Cascader.vue';
   import { getServiceProviderGetServiceProviderInterfaceCascadedList } from '@/api/interface-serviceProvider/serviceProvider';
   import { getDictionaryGetList } from '@/api/ApplicationServices/dictionary';
-import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRefresh } from '@arco-design/web-vue/es/icon';
+  import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRefresh } from '@arco-design/web-vue/es/icon';
   
   import dayjs from 'dayjs';
   import { useRouter, useRoute } from 'vue-router';
@@ -22,13 +31,20 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
   } from '@/api/InterfaceMappingServices/interfaceMap';
   import useModal from '@/components/ModalPro/useModal';
   import { $baseMessage, $baseConfirm } from '@/utils';
-  import EnteredMap from './components/EnteredMap.vue';
-  import MapServiceProvider from './components/map-service-provider.vue';
-  import ApiDebugger from './components/ApiDebugger.vue';
 
   import { systemInterfaceColumns } from './models/tableColumns';
-  import UpstreamInterfaceModal from './components/UpstreamInterfaceModal.vue';
   import CustomLeftMenu from '@/components/CustomLeftMenu/index.vue';
+  import SlidingTabs from '@/components/SlidingTabs/index.vue';
+
+  /** 明细含 InterfaceDetail(~200KB)、调试含 CodeMirror：按需分包，避免进页就解析 */
+  const EnteredMap = defineAsyncComponent(() => import('./components/EnteredMap.vue'));
+  const MapServiceProvider = defineAsyncComponent(
+    () => import('./components/map-service-provider.vue'),
+  );
+  const ApiDebugger = defineAsyncComponent(() => import('./components/ApiDebugger.vue'));
+  const UpstreamInterfaceModal = defineAsyncComponent(
+    () => import('./components/UpstreamInterfaceModal.vue'),
+  );
 
   const { t } = useI18n();
   defineOptions({
@@ -70,6 +86,8 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
   const drawerFormRef = ref<any>();
   const upStreamIdRef = ref<number>();
   const enteredMapRef = ref<any>();
+  /** 弹窗内 EnteredMap，与右侧 Tab 实例分开，避免 ref 互相覆盖 */
+  const enterMapModalRef = ref<any>();
   const drawerConfig = reactive({
     itemList: [
       {
@@ -179,9 +197,47 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
 
   const [register, registerMethods] = useModal() as any;
   const [registerEnter, registerEnterMethods] = useModal() as any;
+  /** 入参映射弹窗打开后再挂 EnteredMap，避免进页就拉映射分包 */
+  const enterMapModalOpen = ref(false);
   const mapId = ref();
   // 映射服务商
   const mapName = ref();
+
+  function activeEnteredMap() {
+    return (enterMapModalOpen.value ? unref(enterMapModalRef) : unref(enteredMapRef)) as any;
+  }
+
+  async function waitForEnteredMap() {
+    for (let i = 0; i < 40; i++) {
+      await nextTick();
+      const map = activeEnteredMap();
+      if (map?.initData) return map;
+      await new Promise((r) => setTimeout(r, 40));
+    }
+    return activeEnteredMap();
+  }
+
+  async function openEnterMapModal(opts?: {
+    title?: string;
+    init?: { serviceProviderId: number; interfaceId?: number };
+  }) {
+    enterMapModalOpen.value = true;
+    registerEnterMethods.setModalProps({
+      title: opts?.title || t('system.interface.modal.edit'),
+      width: 1600,
+      height: 1600,
+    });
+    registerEnterMethods.openModal();
+    if (opts?.init) {
+      const map = await waitForEnteredMap();
+      await map?.initData?.(opts.init);
+    }
+  }
+
+  function closeEnterMapModal() {
+    enterMapModalOpen.value = false;
+    registerEnterMethods.closeModal?.();
+  }
   async function mapClick(row: any) {
     newmapClickROW.value = row;
     mapName.value = row.name;
@@ -797,18 +853,12 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
       intId: id,
     };
 
-    registerEnterMethods.openModal();
-
-    await nextTick();
-    registerEnterMethods.setModalProps({
+    await openEnterMapModal({
       title: t('system.interface.modal.add'),
-      width: 1600,
-      height: 1600,
-    });
-
-    (unref(enteredMapRef) as any)?.initData?.({
-      serviceProviderId: serviceProviderId.value,
-      interfaceId: upStreamIdRef.value,
+      init: {
+        serviceProviderId: serviceProviderId.value,
+        interfaceId: upStreamIdRef.value,
+      },
     });
     active.value = 1;
 
@@ -831,28 +881,19 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
   const fullScreen = ref(false);
   const serviceProviderName = ref('');
 
- async function handlerEditMap(data: any) {
+  async function handlerEditMap(data: any) {
     editMapIds.value = data;
     serviceProviderId.value = data.serviceProviderId;
     serviceProviderName.value = data.serviceProviderName;
     upStreamIdRef.value = data.addId;
     InputParameterMappingList.value = data.inputParameterMappingList;
-    registerEnterMethods.setModalProps({
+    await openEnterMapModal({
       title: t('system.interface.modal.edit'),
-      width: 1600,
-      height: 1600,
-    });
-    
-   
-    registerEnterMethods.openModal();
-
-    await nextTick();
-
-    await (unref(enteredMapRef) as any)?.initData?.({
+      init: {
         serviceProviderId: data.serviceProviderId,
         interfaceId: data.addId,
-      }
-    );
+      },
+    });
   }
   const MapServiceProviderROW = ref<any>();
   const MapServiceProviderRef = ref<any>();
@@ -885,7 +926,7 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
   }
 
   async function saveModelEnter() {
-    const mapComp = unref(enteredMapRef) as any;
+    const mapComp = activeEnteredMap();
     const guard = mapComp?.guardBeforeSave?.() as 'ok' | 'goto-output' | 'required' | undefined;
     if (guard === 'goto-output') {
       $baseMessage(t('system.interface.mapping.outputMappingGuide'), 'warning');
@@ -927,7 +968,7 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
     try {
       await postSaveParameterMaps(data);
       loadingSubmit.value = false;
-      (unref(enteredMapRef) as any)?.initData?.(
+      activeEnteredMap()?.initData?.(
         {
           serviceProviderId: serviceProviderId.value,
           interfaceId: upStreamIdRef.value,
@@ -939,7 +980,7 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
         title: t('system.interface.modal.warningTitle'),
         content: t('system.interface.modal.publishConfirm'),
         onOk: async () => {
-          await registerEnterMethods.closeModal?.();
+          closeEnterMapModal();
           const currentRow = MapServiceProviderROW.value;
           if (currentRow) {
             (unref(MapServiceProviderRef) as any)?.onRelease?.(currentRow);
@@ -1398,7 +1439,6 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
         title: category,
         isLeaf: false,
         depth: 1,
-        subtitle: `${items.length} 个接口`,
         children: items
       };
       treeData.push(categoryNode);
@@ -1679,22 +1719,19 @@ import { IconClose, IconEdit, IconPlus, IconSearch, IconMore, IconMinus, IconRef
       class="mapping-modal"
       @register="registerEnter"
       @ok="saveModelEnter"
+      @cancel="enterMapModalOpen = false"
       @reset="() => {}"
     >
-
-    <div >
-
-      <EnteredMap
-        ref="enteredMapRef"
-   
-        class="h-full w-full"
-        :service-provider-id="serviceProviderId"
+      <div v-if="enterMapModalOpen">
+        <EnteredMap
+          ref="enterMapModalRef"
+          class="h-full w-full"
+          :service-provider-id="serviceProviderId"
           :interface-id="upStreamIdRef"
-        :service-provider-name="serviceProviderName"
-        @save-model-enter="saveModelEnter"
-      />
-    </div>
-     
+          :service-provider-name="serviceProviderName"
+          @save-model-enter="saveModelEnter"
+        />
+      </div>
     </ModalPro>
   </div>
 </template>
diff --git a/src/views/channel/salesProducts/components/BillingConditionEditor.vue b/src/views/channel/salesProducts/components/BillingConditionEditor.vue
index 8178a44..7299769 100644
--- a/src/views/channel/salesProducts/components/BillingConditionEditor.vue
+++ b/src/views/channel/salesProducts/components/BillingConditionEditor.vue
@@ -3,9 +3,11 @@
  * 卖价/买价「计费条件」紧凑编辑：
  * 默认只占输入区，不铺开字段芯片；
  * AI 写公式走侧栏抽屉；手动插字段走 Popover。
+ * 传入 label 时：标签与工具栏同一行，工具栏在右侧。
  */
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { IconQuestionCircle } from '@arco-design/web-vue/es/icon'
 import FormulaAiAssistDrawer from '@/views/channel/autoTrigger/components/FormulaAiAssistDrawer.vue'
 import {
   FORMULA_MAX_LENGTH,
@@ -23,9 +25,18 @@ import {
   buildBillingConditionAiSystemPrompt,
 } from '../billingConditionAiSkill'
 
-const props = defineProps<{
-  modelValue: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    /** 有值时：标签与工具栏同一行，工具栏在右侧 */
+    label?: string
+    labelTip?: string
+  }>(),
+  {
+    label: '',
+    labelTip: '',
+  },
+)
 
 const emit = defineEmits<{
   'update:modelValue': [string]
@@ -47,6 +58,7 @@ const displayValue = computed(() => {
   const v = props.modelValue ?? ''
   return v === '无' ? '' : v
 })
+const toolbarInline = computed(() => !!props.label)
 
 function updateValue(next: string) {
   emit('update:modelValue', next.slice(0, FORMULA_MAX_LENGTH))
@@ -88,7 +100,14 @@ watch(
 </script>
 
 <template>
-  <div class="billing-condition-editor">
+  <div class="billing-condition-editor" :class="{ 'has-inline-toolbar': toolbarInline }">
+    <div v-if="toolbarInline" class="editor-label">
+      {{ label }}
+      <a-tooltip v-if="labelTip" :content="labelTip">
+        <icon-question-circle class="tip-icon" />
+      </a-tooltip>
+    </div>
+
     <div class="formula-text-wrap">
       <textarea
         ref="textareaRef"
@@ -102,9 +121,13 @@ watch(
       <div class="char-count">{{ charCount }}/{{ FORMULA_MAX_LENGTH }}</div>
     </div>
 
-    <div class="editor-footer">
+    <div class="editor-footer" :class="{ 'editor-footer--inline': toolbarInline }">
       <div class="editor-actions">
-        <a-button type="secondary" size="small" @click="aiVisible = true">
+        <a-button
+          type="secondary"
+          :size="toolbarInline ? 'mini' : 'small'"
+          @click="aiVisible = true"
+        >
           {{ t('channel.salesProducts.billingCondition.aiWrite') }}
         </a-button>
         <a-popover
@@ -113,7 +136,7 @@ watch(
           position="bl"
           :content-style="{ padding: '16px', width: '520px', maxWidth: '92vw' }"
         >
-          <a-button type="secondary" size="small">
+          <a-button type="secondary" :size="toolbarInline ? 'mini' : 'small'">
             {{ t('channel.salesProducts.billingCondition.insertField') }}
           </a-button>
           <template #content>
@@ -181,6 +204,48 @@ watch(
 <style lang="less" scoped>
 .billing-condition-editor {
   width: 100%;
+
+  &.has-inline-toolbar {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas:
+      'label footer'
+      'text text';
+    column-gap: 12px;
+    row-gap: 6px;
+    align-items: center;
+
+    .editor-label {
+      grid-area: label;
+    }
+
+    .editor-footer {
+      grid-area: footer;
+      margin-top: 0;
+      justify-content: flex-end;
+      min-width: 0;
+    }
+
+    .formula-text-wrap {
+      grid-area: text;
+    }
+  }
+}
+
+.editor-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: var(--color-text-2);
+  white-space: nowrap;
+  line-height: 22px;
+}
+
+.tip-icon {
+  color: var(--color-text-3);
+  cursor: help;
+  font-size: 14px;
 }
 
 .formula-text-wrap {
@@ -228,6 +293,11 @@ watch(
   align-items: center;
   gap: 8px 12px;
   margin-top: 6px;
+
+  &--inline {
+    flex-wrap: nowrap;
+    margin-top: 0;
+  }
 }
 
 .editor-actions {
@@ -239,8 +309,12 @@ watch(
 
 .editor-hint {
   font-size: 12px;
-  color: var(--color-border-3);
+  color: var(--color-text-3);
   line-height: 1.4;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .field-popover {
diff --git a/src/views/channel/salesProducts/components/BillingSimulateDrawer.vue b/src/views/channel/salesProducts/components/BillingSimulateDrawer.vue
index 35d7d0f..4e39e29 100644
--- a/src/views/channel/salesProducts/components/BillingSimulateDrawer.vue
+++ b/src/views/channel/salesProducts/components/BillingSimulateDrawer.vue
@@ -15,7 +15,7 @@
       <a-form :model="form" layout="vertical" class="sim-form">
         <a-row :gutter="12">
           <a-col :span="12">
-            <a-form-item :label="t('channel.salesProducts.billingSimulate.country')" required>
+            <a-form-item :label="t('channel.salesProducts.billingSimulate.destCountry')" required>
               <a-select
                 v-model="form.countryCode"
                 allow-search
diff --git a/src/views/channel/salesProducts/components/PriceListHotTable.vue b/src/views/channel/salesProducts/components/PriceListHotTable.vue
new file mode 100644
index 0000000..b745e56
--- /dev/null
+++ b/src/views/channel/salesProducts/components/PriceListHotTable.vue
@@ -0,0 +1,590 @@
+<template>
+  <div ref="wrapRef" class="price-list-hot-wrap" :style="{ height: `${height}px` }">
+    <div
+      ref="hostRef"
+      class="price-list-hot"
+      :class="{ 'is-ready': ready }"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import Handsontable from 'handsontable';
+  import { registerAllModules } from 'handsontable/registry';
+  import { registerLanguageDictionary, zhCN } from 'handsontable/i18n';
+  import 'handsontable/styles/handsontable.min.css';
+  import 'handsontable/styles/ht-theme-classic.min.css';
+
+  registerAllModules();
+  registerLanguageDictionary(zhCN);
+
+  export type PriceListHotColumn = {
+    key: string;
+    label: string;
+    width?: number;
+    readOnly?: boolean;
+    type?: 'text' | 'numeric' | 'dropdown';
+    source?: string[];
+    formatter?: (row: any, value: any) => string;
+  };
+
+  const props = withDefaults(
+    defineProps<{
+      columns: PriceListHotColumn[];
+      data: any[];
+      height?: number;
+      /** 计费因素列：同一上级分组内、连续相同的展示值纵向合并 */
+      mergeSameValues?: boolean;
+    }>(),
+    {
+      height: 500,
+      mergeSameValues: false,
+    },
+  );
+
+  const emit = defineEmits<{
+    'selection-change': [ids: Array<number | string>];
+  }>();
+
+  const wrapRef = ref<HTMLElement | null>(null);
+  const hostRef = ref<HTMLElement | null>(null);
+  const ready = ref(false);
+  let hot: Handsontable | null = null;
+  let ignoreChange = false;
+  /** 合并插件会把被盖住的单元格写成空，这里留一份因素列原值，关闭合并时写回 */
+  let factorSnapshot: Array<Record<string, any>> | null = null;
+  let selectedRowIndexes: number[] = [];
+  let selectedRowSet = new Set<number>();
+  let selectionLock = 0;
+  let resizeObserver: ResizeObserver | null = null;
+  let lastWidth = 0;
+  let resizeRaf = 0;
+  let mountTimer: ReturnType<typeof setTimeout> | null = null;
+
+  /** 量外层容器宽度（不要量 HOT 根节点，否则会被写死的 px 宽度锁死） */
+  function readWrapWidth() {
+    const el = wrapRef.value;
+    if (!el) return 0;
+    const w = Math.floor(el.clientWidth || el.getBoundingClientRect().width);
+    return w > 0 ? w : 0;
+  }
+
+  function buildColumns(): any[] {
+    const cols: any[] = [
+      {
+        data: '_serial',
+        readOnly: true,
+        width: 56,
+        className: 'htCenter',
+      },
+    ];
+    for (const col of props.columns) {
+      const conf: any = {
+        data: col.key,
+        readOnly: !!col.readOnly,
+        width: col.width || 120,
+        className: col.readOnly ? 'htLeft price-factor-cell' : 'htRight',
+      };
+      if (col.type === 'numeric') {
+        conf.type = 'numeric';
+        conf.numericFormat = { pattern: '0.00' };
+        conf.className = 'htRight';
+      } else if (col.type === 'dropdown') {
+        conf.type = 'dropdown';
+        conf.source = col.source || [];
+        conf.strict = true;
+        conf.allowInvalid = false;
+        conf.className = 'htLeft';
+      } else {
+        conf.type = 'text';
+      }
+      if (col.formatter) {
+        const fmt = col.formatter;
+        conf.renderer = (
+          instance: Handsontable,
+          td: HTMLTableCellElement,
+          row: number,
+          _col: number,
+          _prop: any,
+          value: any,
+        ) => {
+          const rowData = instance.getSourceDataAtRow(row) as any;
+          td.className = conf.className || '';
+          td.textContent = fmt(rowData, value);
+        };
+      }
+      cols.push(conf);
+    }
+    return cols;
+  }
+
+  function buildColHeaders(): string[] {
+    return ['序号', ...props.columns.map((c) => c.label)];
+  }
+
+  function factorCellText(row: any, col: PriceListHotColumn): string {
+    const raw = row?.[col.key];
+    if (col.formatter) return String(col.formatter(row, raw) ?? '').trim();
+    return String(raw ?? '').trim();
+  }
+
+  /** 只合并计费因素列，且必须和左侧因素同属一组，避免跨仓库把相同货物类型并到一起 */
+  function buildMergeCells() {
+    if (!props.mergeSameValues) return [];
+    const rows = props.data || [];
+    const count = rows.length;
+    if (count < 2) return [];
+    const factors = props.columns
+      .map((col, index) => ({ col, hotCol: index + 1 }))
+      .filter(({ col }) => col.key.startsWith('factor_'));
+    const merges: { row: number; col: number; rowspan: number; colspan: number }[] = [];
+    for (let factorIndex = 0; factorIndex < factors.length; factorIndex += 1) {
+      const keys = factors.slice(0, factorIndex + 1);
+      let start = 0;
+      while (start < count) {
+        let end = start;
+        while (end + 1 < count && sameFactorGroup(rows, start, end + 1, keys)) {
+          end += 1;
+        }
+        const text = factorCellText(rows[start], factors[factorIndex].col);
+        if (text && end > start) {
+          merges.push({
+            row: start,
+            col: factors[factorIndex].hotCol,
+            rowspan: end - start + 1,
+            colspan: 1,
+          });
+        }
+        start = end + 1;
+      }
+    }
+    return merges;
+  }
+
+  function sameFactorGroup(
+    rows: any[],
+    left: number,
+    right: number,
+    keys: { col: PriceListHotColumn }[],
+  ) {
+    return keys.every(
+      ({ col }) => factorCellText(rows[left], col) === factorCellText(rows[right], col),
+    );
+  }
+
+  function mergeCellsOption() {
+    const cells = buildMergeCells();
+    if (!cells.length) return false;
+    return { virtualized: true, cells };
+  }
+
+  function factorColumnKeys() {
+    return props.columns.filter((col) => col.key.startsWith('factor_')).map((col) => col.key);
+  }
+
+  function rememberFactorValues() {
+    const keys = factorColumnKeys();
+    const rows = props.data || [];
+    if (!factorSnapshot || factorSnapshot.length !== rows.length) {
+      factorSnapshot = rows.map(() => ({}));
+    }
+    rows.forEach((row, index) => {
+      const snap = factorSnapshot![index];
+      for (const key of keys) {
+        const value = row?.[key];
+        if (value != null && String(value).trim() !== '') snap[key] = value;
+      }
+    });
+  }
+
+  function restoreFactorValues() {
+    if (!factorSnapshot) return;
+    const keys = factorColumnKeys();
+    (props.data || []).forEach((row, index) => {
+      const snap = factorSnapshot![index];
+      if (!row || !snap) return;
+      for (const key of keys) {
+        if (key in snap && row[key] !== snap[key]) row[key] = snap[key];
+      }
+    });
+  }
+
+  function applyMergeCells() {
+    if (!hot) return;
+    rememberFactorValues();
+    const option = mergeCellsOption();
+    if (!option) {
+      const plugin = hot.getPlugin('mergeCells') as { clearCollections?: () => void } | undefined;
+      plugin?.clearCollections?.();
+    }
+    hot.updateSettings({ mergeCells: option }, false);
+    restoreFactorValues();
+    hot.render();
+  }
+
+  function decorateRows(rows: any[]): any[] {
+    return (rows || []).map((row, idx) => {
+      if (row && typeof row === 'object') {
+        row._serial = idx + 1;
+      }
+      return row;
+    });
+  }
+
+  /** 序号列不参与拉伸，只拉宽数据列 */
+  function beforeStretchingColumnWidth(stretchedWidth: number, column: number) {
+    if (column === 0) return 56;
+    return stretchedWidth;
+  }
+
+  function collectSelectedRowIndexes() {
+    if (!hot) return [] as number[];
+    const selected = hot.getSelected();
+    if (!selected?.length) return [] as number[];
+    const max = Math.max((props.data?.length || 1) - 1, 0);
+    const set = new Set<number>();
+    for (const [r1, , r2] of selected) {
+      if (r1 == null || r2 == null || (r1 < 0 && r2 < 0)) continue;
+      const from = Math.max(0, Math.min(r1, r2));
+      const to = Math.min(max, Math.max(r1, r2));
+      for (let row = from; row <= to; row += 1) set.add(row);
+    }
+    return [...set].sort((a, b) => a - b);
+  }
+
+  function publishSelection(indexes = collectSelectedRowIndexes()) {
+    selectedRowIndexes = indexes;
+    selectedRowSet = new Set(indexes);
+    const ids = indexes
+      .map((index) => props.data?.[index]?.id)
+      .filter((id) => id != null);
+    emit('selection-change', ids);
+  }
+
+  function groupConsecutive(indexes: number[]) {
+    const ranges: Array<[number, number]> = [];
+    for (const index of indexes) {
+      const last = ranges[ranges.length - 1];
+      if (last && last[1] === index - 1) last[1] = index;
+      else ranges.push([index, index]);
+    }
+    return ranges;
+  }
+
+  function applyRowSelection(indexes: number[]) {
+    if (!hot) return;
+    selectionLock += 1;
+    try {
+      if (!indexes.length) {
+        hot.deselectCell();
+      } else {
+        const lastCol = Math.max(hot.countCols() - 1, 0);
+        const specs = groupConsecutive(indexes).map(
+          ([from, to]) => [from, 0, to, lastCol] as [number, number, number, number],
+        );
+        hot.selectCells(specs, false, false);
+      }
+    } finally {
+      selectionLock -= 1;
+    }
+    publishSelection(indexes);
+    hot.render();
+  }
+
+  function selectAll() {
+    const count = props.data?.length || 0;
+    if (!count) return;
+    applyRowSelection(Array.from({ length: count }, (_, index) => index));
+  }
+
+  function clearSelection() {
+    applyRowSelection([]);
+  }
+
+  function destroyHot() {
+    if (mountTimer) {
+      clearTimeout(mountTimer);
+      mountTimer = null;
+    }
+    if (hot) {
+      hot.destroy();
+      hot = null;
+    }
+    ready.value = false;
+  }
+
+  function mountHot() {
+    if (!hostRef.value || !wrapRef.value) return;
+    destroyHot();
+
+    let width = readWrapWidth();
+    // 弹窗动画未完成时宽度可能为 0，先用父级估算，稍后校正
+    if (width < 200) {
+      const parent = wrapRef.value.parentElement;
+      width = Math.max(Math.floor(parent?.clientWidth || 0), 800);
+    }
+    lastWidth = width;
+    rememberFactorValues();
+
+    hot = new Handsontable(hostRef.value, {
+      data: decorateRows(props.data),
+      columns: buildColumns(),
+      colHeaders: buildColHeaders(),
+      rowHeaders: false,
+      width,
+      height: props.height,
+      licenseKey: 'non-commercial-and-evaluation',
+      themeName: 'ht-theme-classic',
+      language: 'zh-CN',
+      stretchH: 'all',
+      beforeStretchingColumnWidth,
+      autoRowSize: false,
+      autoColumnSize: false,
+      rowHeights: 32,
+      columnHeaderHeight: 36,
+      renderAllRows: false,
+      viewportRowRenderingOffset: 20,
+      viewportColumnRenderingOffset: 4,
+      enterBeginsEditing: true,
+      fragmentSelection: false,
+      selectionMode: 'multiple',
+      outsideClickDeselects(event: MouseEvent) {
+        const target = event.target as HTMLElement | null;
+        return !target?.closest('.sales-price-config-modal, .arco-modal, .arco-trigger-popup');
+      },
+      allowInsertRow: false,
+      allowInsertColumn: false,
+      allowRemoveRow: false,
+      allowRemoveColumn: false,
+      contextMenu: false,
+      manualColumnResize: true,
+      mergeCells: mergeCellsOption(),
+      afterGetColHeader(col, th) {
+        // 价格列靠右，其余居中；垂直居中（不依赖 instance，避免挂载期 this 问题）
+        th.style.verticalAlign = 'middle';
+        if (col < 1) {
+          th.style.textAlign = 'center';
+          return;
+        }
+        const meta = props.columns[col - 1];
+        const isPriceCol = !!meta && !meta.readOnly && meta.type !== 'dropdown';
+        th.style.textAlign = isPriceCol ? 'right' : 'center';
+      },
+      afterChange(changes, source) {
+        if (!changes || source === 'loadData' || source === 'MergeCells' || ignoreChange) return;
+        for (const [rowIndex, prop, _oldVal, newVal] of changes) {
+          const row = hot?.getSourceDataAtRow(rowIndex) as any;
+          if (!row || typeof prop !== 'string') continue;
+          if (prop === '_serial') continue;
+          row[prop] = newVal;
+        }
+      },
+      afterSelectionEnd() {
+        if (selectionLock) return;
+        publishSelection();
+        hot?.render();
+      },
+      afterDeselect() {
+        if (selectionLock) return;
+        selectedRowIndexes = [];
+        selectedRowSet = new Set();
+        emit('selection-change', []);
+        hot?.render();
+      },
+      afterRenderer(td, row) {
+        td.parentElement?.classList.toggle('price-row-selected', selectedRowSet.has(row));
+      },
+    });
+    restoreFactorValues();
+    hot.render();
+    ready.value = true;
+
+    // 首次挂载后再按真实宽度拉一次（不重挂）
+    requestAnimationFrame(() => syncWidth(true));
+  }
+
+  function reloadData() {
+    if (!hot) {
+      mountHot();
+      return;
+    }
+    ignoreChange = true;
+    const keepSelection = selectedRowIndexes.slice();
+    selectionLock += 1;
+    try {
+      rememberFactorValues();
+      hot.loadData(decorateRows(props.data));
+      applyMergeCells();
+      const max = (props.data?.length || 0) - 1;
+      applyRowSelection(keepSelection.filter((index) => index <= max));
+    } finally {
+      selectionLock -= 1;
+      requestAnimationFrame(() => {
+        ignoreChange = false;
+      });
+    }
+  }
+
+  function syncWidth(force = false) {
+    if (!hot) return;
+    const width = readWrapWidth();
+    if (width < 200) return;
+    if (!force && Math.abs(width - lastWidth) < 2) return;
+    lastWidth = width;
+    hot.updateSettings(
+      {
+        width,
+        height: props.height,
+        stretchH: 'all',
+      },
+      false,
+    );
+    hot.refreshDimensions();
+  }
+
+  function setupResizeObserver() {
+    if (!wrapRef.value) return;
+    resizeObserver?.disconnect();
+    resizeObserver = new ResizeObserver(() => {
+      if (resizeRaf) cancelAnimationFrame(resizeRaf);
+      resizeRaf = requestAnimationFrame(() => {
+        resizeRaf = 0;
+        syncWidth();
+      });
+    });
+    resizeObserver.observe(wrapRef.value);
+  }
+
+  onMounted(() => {
+    // 等弹窗/Tab 布局完成再挂载，效果等同「切走再切回」后的正确首屏
+    void nextTick(async () => {
+      await new Promise<void>((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      });
+      // 再让出一帧给弹窗动画/flex 定高
+      await new Promise<void>((resolve) => {
+        mountTimer = setTimeout(() => {
+          mountTimer = null;
+          resolve();
+        }, 50);
+      });
+      if (!wrapRef.value || !hostRef.value) return;
+      mountHot();
+      setupResizeObserver();
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (resizeRaf) cancelAnimationFrame(resizeRaf);
+    if (mountTimer) {
+      clearTimeout(mountTimer);
+      mountTimer = null;
+    }
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    destroyHot();
+  });
+
+  watch(
+    () => props.height,
+    (h) => {
+      if (!hot || !h) return;
+      hot.updateSettings({ height: h }, false);
+      hot.refreshDimensions();
+    },
+  );
+
+  watch(
+    () =>
+      props.columns
+        .map((c) => `${c.key}:${c.label}:${c.type}:${(c.source || []).join(',')}`)
+        .join('|'),
+    () => {
+      void nextTick(() => mountHot());
+    },
+  );
+
+  watch(
+    () => [props.data, props.data?.length] as const,
+    () => {
+      reloadData();
+    },
+  );
+
+  watch(
+    () => props.mergeSameValues,
+    () => {
+      applyMergeCells();
+    },
+  );
+
+  defineExpose({ selectAll, clearSelection });
+</script>
+
+<style scoped lang="less">
+  .price-list-hot-wrap {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .price-list-hot {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: none;
+    border-radius: 6px;
+    opacity: 0;
+    transition: opacity 0.12s ease;
+
+    &.is-ready {
+      opacity: 1;
+    }
+
+    :deep(tr.price-row-selected td) {
+      box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--app-primary-color) 12%, transparent);
+    }
+
+    :deep(.price-factor-cell) {
+      color: var(--color-text-2);
+      background: color-mix(in srgb, var(--app-primary-color) 4%, #fff);
+      vertical-align: middle;
+    }
+
+    :deep(.handsontable) {
+      font-size: 13px;
+      color: var(--color-text-1);
+    }
+
+    :deep(.htCore th) {
+      background: var(--color-fill-1) !important;
+      color: var(--color-text-2) !important;
+      font-weight: 600;
+      border-color: var(--color-border-2) !important;
+      vertical-align: middle !important;
+    }
+
+    :deep(.htCore td) {
+      border-color: var(--color-border-2) !important;
+    }
+
+    :deep(.htCore tr:hover td) {
+      background: color-mix(in srgb, var(--app-primary-color) 5%, #fff) !important;
+    }
+
+    /* 防止 HOT 写死宽度后外层出现空白 */
+    :deep(.ht-wrapper),
+    :deep(.handsontable) {
+      width: 100% !important;
+      max-width: 100%;
+    }
+  }
+</style>
+
+<style lang="less">
+  .handsontable.listbox,
+  .autocompleteEditor.handsontable.listbox {
+    z-index: 11000 !important;
+  }
+</style>
diff --git a/src/views/channel/salesProducts/index.vue b/src/views/channel/salesProducts/index.vue
index 910b81a..2575b40 100644
--- a/src/views/channel/salesProducts/index.vue
+++ b/src/views/channel/salesProducts/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { ref, reactive, computed, nextTick, onMounted, watch, onBeforeUnmount, h } from 'vue';
+  import { ref, shallowRef, reactive, computed, nextTick, onMounted, watch, onBeforeUnmount, h, markRaw } from 'vue';
   import {
     createSalesProduct,
     createSalesProductPrice,
@@ -8,8 +8,10 @@
     getSalesProductDetail,
     getSalesProductList,
     getSalesProductAllocation,
+    getSalesProductPrice,
     getSalesProductPriceList,
     getSalesProductPublishPriceList,
+    getSalesProductPublishRecord,
     getSalesProductPublishRulesList,
     getSalesProductPublishPreview,
     publishSalesProduct,
@@ -27,14 +29,14 @@
   import { postWeightRuleList } from '@/api/channel/weightRule';
   import { postWeightRoundingList } from '@/api/channel/weightRounding';
   import { getDictListAll, getDictListByTypes } from '@/api/system/dict';
-  import { getServiceChannelList } from '@/api/channel/serviceChannel';
+  import { getServiceChannelOptions } from '@/api/channel/serviceChannel';
   import {
     canonicalWeightFactorCellForApi,
     isWeightPricingFactor,
     sortFactorValuesBySize,
     weightValueToIntervalCell,
   } from '@/utils/priceWeightInterval';
-  import { IconPlus, IconDelete, IconSearch, IconEdit, IconDragArrow, IconQuestionCircleFill, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
+  import { IconPlus, IconDelete, IconSearch, IconEdit, IconDragArrow, IconQuestionCircleFill, IconQuestionCircle, IconSync } from '@arco-design/web-vue/es/icon';
   import FormLabelWithPreview from './components/FormLabelWithPreview.vue';
   import BillingConditionEditor from './components/BillingConditionEditor.vue';
   import ChannelReferencePreviewModal, {
@@ -44,6 +46,7 @@
   import type { PricePublishAiAdoptPayload } from './components/PricePublishAiAssistDrawer.vue';
   import BillingSimulateDrawer from './components/BillingSimulateDrawer.vue';
   import { buildPricePublishAiSkipReport, type PricePublishRiskLevel } from './pricePublishAiSkill';
+  import { pickResolvedAudit } from '@/utils/auditFields';
   import { useUserStore } from '@/store';
   import { useRbacUserStore } from '@/store/modules/rbac-user';
   import { Message, Modal, Input } from '@arco-design/web-vue';
@@ -56,12 +59,16 @@
   import {
     computeSnapshotDiff,
     formatSnapshotJson,
+    snapshotsSemanticallyEqual,
     type SnapshotDiffRow,
   } from '@/utils/publishSnapshotDiff';
   import dayjs from 'dayjs';
   import * as XLSX from 'xlsx';
   import Sortable from 'sortablejs';
   import MarkdownDocPanel from '@/components/MarkdownDocPanel/index.vue';
+  import PriceListHotTable, {
+    type PriceListHotColumn,
+  } from './components/PriceListHotTable.vue';
   import customerGuideTemplate from './customerGuideTemplate.md?raw';
   import { isEnableStatusEnabled, toEnableStatus, ENABLE_STATUS } from '@/utils/enableStatus';
 
@@ -90,6 +97,17 @@
 
   // 当前激活的标签页
   const activeTab = ref('price');
+  /** 进过的页签保持挂载，切回来不用重新渲染 */
+  const mountedTabs = reactive({
+    price: true,
+    config: false,
+    rules: false,
+    records: false,
+    customerGuide: false,
+  });
+  watch(activeTab, (tab) => {
+    if (tab in mountedTabs) mountedTabs[tab as keyof typeof mountedTabs] = true;
+  });
 
   const productList = ref<any[]>([]);
 
@@ -100,14 +118,20 @@
         pageSize: 500,
         keyword: searchKeyword.value?.trim() || undefined,
       });
-      productList.value = (items || []).map((it: any) => ({
-        id: it.id ?? it.Id,
-        name: it.productName ?? it.ProductName ?? it.name,
-        isActive: isEnableStatusEnabled(it.isActive ?? it.IsActive),
-        createTime: it.createTime ?? it.CreateTime,
-        creator: it.createBy || it.updateBy || it.CreateBy || it.UpdateBy || '',
-        raw: it,
-      }));
+      productList.value = (items || []).map((it: any) => {
+        const audit = pickResolvedAudit(it);
+        return {
+          id: it.id ?? it.Id,
+          name: it.productName ?? it.ProductName ?? it.name,
+          isActive: isEnableStatusEnabled(it.isActive ?? it.IsActive),
+          createTime: audit.createTime,
+          updateTime: audit.updateTime,
+          createBy: audit.createBy,
+          updateBy: audit.updateBy,
+          creator: audit.updateBy || audit.createBy || '',
+          raw: it,
+        };
+      });
       // 有数据但未选中时自动选中首条，以便「产品配置」等 Tab 能展示详情（表单来自 detail 接口，非 list）
       if (productList.value.length > 0 && selectedProduct.value == null) {
         await handleSelectProduct(productList.value[0]);
@@ -296,12 +320,15 @@
     const pid = selectedProduct.value;
     if (pid == null) return null;
     const product = productList.value.find((p: any) => p.id === pid);
+    const audit = pickResolvedAudit(product?.raw || product);
     const groupLabel =
       groupOptions.value.find((o) => o.value === formData.group)?.label ?? formData.group;
     return {
       productName: formData.productName || product?.name || '-',
       productCode: formData.productCode || '-',
       groupName: groupLabel || '-',
+      updateTime: audit.updateTime || '--',
+      updateBy: audit.updateBy || '--',
     };
   });
 
@@ -419,6 +446,8 @@
   const remoteAreaDivisionOptions = ref<IdSelectOption[]>([]);
   const priceAreaFactorOptions = ref<IdSelectOption[]>([]);
   const warehouseFactorOptions = ref<IdSelectOption[]>([]);
+  let billingFactorSelectOptionsPromise: Promise<void> | null = null;
+  const billingFactorSelectOptionsLoaded = ref(false);
 
   async function loadKpiAreaSelectOptions() {
     try {
@@ -503,36 +532,48 @@
     }
   }
 
-  async function loadBillingFactorSelectOptions() {
-    try {
-      const [areaRes, warehouseRes] = await Promise.all([
-        postForewarningServiceKpiAreaGetKpiAreas({
-          page: 1,
-          pageSize: 500,
-          areaType: 'price',
-        }),
-        getWarehouseList({
-          page: 1,
-          pageSize: 500,
-        }),
-      ]);
-      const areaItems = areaRes?.items ?? (areaRes as any)?.data?.items ?? [];
-      const warehouseItems = warehouseRes?.items ?? [];
-      priceAreaFactorOptions.value = filterKpiAreasByType(areaItems, 'price').map((it: any) => {
-        const id = it?.id ?? it?.Id;
-        const name = String(it?.name ?? it?.Name ?? id ?? '');
-        return { label: name, value: String(id ?? '') };
-      });
-      warehouseFactorOptions.value = warehouseItems.map((it: any) => {
-        const id = it?.id ?? it?.Id;
-        const name = String(it?.warehouseName ?? it?.WarehouseName ?? id ?? '');
-        return { label: name, value: String(id ?? '') };
-      });
-    } catch (e: any) {
-      Message.error(e?.message || '加载计费因素下拉失败');
-      priceAreaFactorOptions.value = [];
-      warehouseFactorOptions.value = [];
+  async function loadBillingFactorSelectOptions(force = false) {
+    if (!force && billingFactorSelectOptionsLoaded.value) return;
+    if (!force && billingFactorSelectOptionsPromise) {
+      await billingFactorSelectOptionsPromise;
+      return;
     }
+    billingFactorSelectOptionsPromise = (async () => {
+      try {
+        const [areaRes, warehouseRes] = await Promise.all([
+          postForewarningServiceKpiAreaGetKpiAreas({
+            page: 1,
+            pageSize: 500,
+            areaType: 'price',
+          }),
+          getWarehouseList({
+            page: 1,
+            pageSize: 500,
+          }),
+        ]);
+        const areaItems = areaRes?.items ?? (areaRes as any)?.data?.items ?? [];
+        const warehouseItems = warehouseRes?.items ?? [];
+        priceAreaFactorOptions.value = filterKpiAreasByType(areaItems, 'price').map((it: any) => {
+          const id = it?.id ?? it?.Id;
+          const name = String(it?.name ?? it?.Name ?? id ?? '');
+          return { label: name, value: String(id ?? '') };
+        });
+        warehouseFactorOptions.value = warehouseItems.map((it: any) => {
+          const id = it?.id ?? it?.Id;
+          const name = String(it?.warehouseName ?? it?.WarehouseName ?? id ?? '');
+          return { label: name, value: String(id ?? '') };
+        });
+        billingFactorSelectOptionsLoaded.value = true;
+      } catch (e: any) {
+        Message.error(e?.message || '加载计费因素下拉失败');
+        priceAreaFactorOptions.value = [];
+        warehouseFactorOptions.value = [];
+        billingFactorSelectOptionsLoaded.value = false;
+      } finally {
+        billingFactorSelectOptionsPromise = null;
+      }
+    })();
+    await billingFactorSelectOptionsPromise;
   }
 
   type NormalizedDictRow = {
@@ -898,6 +939,27 @@
     return hit?.dictCode || rows[0]?.dictCode || '总价';
   }
 
+  function formulaCodeToLabel(code: string): string {
+    const c = String(code ?? '').trim();
+    if (!c) return '';
+    return dictLabelByType('calculation_formula', c) || c;
+  }
+
+  function formulaLabelToCode(labelOrCode: string): string {
+    const s = String(labelOrCode ?? '').trim();
+    if (!s) return defaultCalculationFormulaCode();
+    const rows = dictRowsOfType('calculation_formula');
+    const byName = rows.find((r) => r.dictName === s);
+    if (byName?.dictCode) return byName.dictCode;
+    const byCode = rows.find((r) => r.dictCode === s);
+    if (byCode?.dictCode) return byCode.dictCode;
+    return s;
+  }
+
+  function defaultCalculationFormulaDisplay(): string {
+    return formulaCodeToLabel(defaultCalculationFormulaCode());
+  }
+
   const factorValuesOptionsByFactor = computed<Record<string, IdSelectOption[]>>(() => {
     const cargoOpts = cargoAttributeValueOptions.value;
     const cgOpts = customerGroupValueOptions.value;
@@ -1098,8 +1160,9 @@
 
   async function refreshSalesProductPriceEffectiveInfo(productId: number) {
     try {
-      const res = await getSalesProductPublishPriceList({ salesProductId: productId, page: 1, pageSize: 50 });
-      const items = res.items || [];
+      // 只要版本号和生效时间，不拉快照正文。50 条完整价格矩阵会让切回卖价空等数秒。
+      const items = await loadPublishHeaders(productId, 'price');
+      if (selectedProduct.value !== productId) return;
       const effectiveRow = items.find((r: any) => isPublishRecordEffectiveRow(r));
       const pick = effectiveRow || items[0];
       if (pick) {
@@ -1115,32 +1178,78 @@
     }
   }
 
+  let priceTabLoadSeq = 0;
+  /** 当前 priceTableData 所属产品；切走再回来时直接复用，不再空表重拉 */
+  let priceTabLoadedProductId: number | null = null;
+  /** 已做过发布态对比的列表签名，避免每次切 tab 都解析整份卖价快照 */
+  let pricePublishCheckedSig = '';
+  const priceListLoading = ref(false);
+
   async function loadPriceTabData(productId: number) {
+    const seq = ++priceTabLoadSeq;
+    const showSpinner = priceTabLoadedProductId !== productId || priceTableData.value.length === 0;
+    if (showSpinner) priceListLoading.value = true;
     try {
-      const [prices] = await Promise.all([
-        getSalesProductPriceList(productId),
-        refreshSalesProductPriceEffectiveInfo(productId),
-      ]);
-      priceTableData.value = (prices || []).map((it: any) => ({
-        id: it.id,
-        serialNumber: it.serialNumber,
-        status: isEnableStatusEnabled(it.status ?? it.Status),
-        priceName: it.priceName,
-        costItem: it.costItem,
-        costUnit: it.costUnit,
-        currency: it.currency,
-        chargingCondition: it.chargingCondition || '',
-        billingFactors: (it.factors || []).map((f: any) => f.factor).join('+'),
-        factors: it.factors || [],
-        details: it.details || [],
-        modifyTime: it.updateTime || it.createTime,
-        modifier: it.updateBy ?? it.UpdateBy ?? it.createBy ?? it.CreateBy ?? '',
-      }));
-      void refreshPricePublishSyncStatus(productId);
+      // 列表不拉 details，也不等发布记录。生效版本在列表渲染后单独补。
+      const prices = await getSalesProductPriceList(productId, { includeDetails: false });
+      // 快速切换产品时丢弃过期响应
+      if (seq !== priceTabLoadSeq || selectedProduct.value !== productId) return;
+      // 映射前确保字典就绪，计费因素列显示中文名而非 code
+      if (!salesPriceDictFetched.value) {
+        await ensureSalesPriceDictLoaded();
+        if (seq !== priceTabLoadSeq || selectedProduct.value !== productId) return;
+      }
+      // factors 仍可能较多：markRaw 禁止 Vue 深度代理
+      const rows = (prices || []).map((it: any) => {
+        const factors = Array.isArray(it.factors) ? it.factors : [];
+        const audit = pickResolvedAudit(it);
+        return {
+          id: it.id,
+          serialNumber: it.serialNumber,
+          status: isEnableStatusEnabled(it.status ?? it.Status),
+          priceName: it.priceName,
+          costItem: it.costItem,
+          costUnit: it.costUnit,
+          currency: it.currency,
+          chargingCondition: it.chargingCondition || '',
+          billingFactors: factors
+            .map((f: any) => pricingFactorColumnLabel(String(f?.factor ?? f?.name ?? '')))
+            .filter(Boolean)
+            .join('+'),
+          factors: markRaw(factors),
+          details: null as any[] | null,
+          modifyTime: audit.updateTime,
+          modifier: audit.updateBy,
+        };
+      });
+      priceTableData.value = rows;
+      priceTabLoadedProductId = productId;
+      void refreshSalesProductPriceEffectiveInfo(productId);
+      const sig = `${productId}|${rows
+        .map((r) => `${r.id}:${r.modifyTime}:${r.status ? 1 : 0}`)
+        .join(',')}`;
+      if (sig === pricePublishCheckedSig) return;
+      // 发布态检测放到空闲时段，避免与表格首屏抢主线程
+      const runPublishCheck = () => {
+        if (seq !== priceTabLoadSeq || selectedProduct.value !== productId) return;
+        void refreshPricePublishSyncStatus(productId).then(() => {
+          if (seq === priceTabLoadSeq && selectedProduct.value === productId) {
+            pricePublishCheckedSig = sig;
+          }
+        });
+      };
+      if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
+        (window as any).requestIdleCallback(runPublishCheck, { timeout: 1200 });
+      } else {
+        window.setTimeout(runPublishCheck, 300);
+      }
     } catch (e) {
+      if (seq !== priceTabLoadSeq) return;
       console.error(e);
       effectiveVersion.value = '--';
       effectiveTime.value = '--';
+    } finally {
+      if (seq === priceTabLoadSeq) priceListLoading.value = false;
     }
   }
 
@@ -1193,15 +1302,24 @@
     return Array.from(byVal.values());
   });
 
+  let serviceChannelOptionsLoaded = false;
+  let serviceChannelOptionsPromise: Promise<void> | null = null;
+
   async function loadServiceChannelOptionsForRules() {
-    try {
-      // 不限制 isActive：已配置的渠道可能已停用，仍需在下拉中可展示/回显
-      const { items } = await getServiceChannelList({ page: 1, pageSize: 5000 });
-      serviceChannelListRaw.value = items ?? [];
-    } catch (e: any) {
-      Message.warning(e?.message || '加载服务渠道列表失败');
-      serviceChannelListRaw.value = [];
-    }
+    if (serviceChannelOptionsLoaded) return;
+    if (serviceChannelOptionsPromise) return serviceChannelOptionsPromise;
+    serviceChannelOptionsPromise = (async () => {
+      try {
+        serviceChannelListRaw.value = (await getServiceChannelOptions()) ?? [];
+        serviceChannelOptionsLoaded = true;
+      } catch (e: any) {
+        Message.warning(e?.message || '加载服务渠道列表失败');
+        serviceChannelListRaw.value = [];
+      } finally {
+        serviceChannelOptionsPromise = null;
+      }
+    })();
+    await serviceChannelOptionsPromise;
   }
 
   function syncShippingRowProviderNameFromChannel(row: any) {
@@ -1219,10 +1337,20 @@
     }
   }
 
+  let rulesTabLoadedProductId: number | null = null;
+  let rulesLoadSeq = 0;
+  const rulesLoading = ref(false);
+
   async function loadRulesTabData(productId: number) {
+    if (rulesTabLoadedProductId === productId) return;
+    const seq = ++rulesLoadSeq;
+    rulesLoading.value = true;
     try {
-      await loadServiceChannelOptionsForRules();
-      const allocRaw = await getSalesProductAllocation(productId);
+      const [, allocRaw] = await Promise.all([
+        loadServiceChannelOptionsForRules(),
+        getSalesProductAllocation(productId),
+      ]);
+      if (seq !== rulesLoadSeq || selectedProduct.value !== productId) return;
       const alloc = normalizeSalesProductAllocationPayload(allocRaw);
       shippingScheme.value = alloc.scheme || 'costLowest';
       shippingProviderData.value = (alloc.providers || []).map((p: any) => ({
@@ -1239,11 +1367,54 @@
         customers: p.customerIds ?? p.CustomerIds ?? p.customers ?? p.Customers ?? [],
       }));
       resetRulesFormBaseline();
+      rulesTabLoadedProductId = productId;
     } catch (e) {
       console.error(e);
+    } finally {
+      if (seq === rulesLoadSeq) rulesLoading.value = false;
     }
   }
 
+  function publishContentToText(content: unknown) {
+    if (content == null || content === '') return '';
+    return typeof content === 'string' ? content : JSON.stringify(content);
+  }
+
+  let pricePublishHeaders: { productId: number; items: any[] } | null = null;
+  let rulesPublishHeaders: { productId: number; items: any[] } | null = null;
+
+  function clearPublishHeaderCache(productId?: number) {
+    if (productId == null || pricePublishHeaders?.productId === productId) pricePublishHeaders = null;
+    if (productId == null || rulesPublishHeaders?.productId === productId) rulesPublishHeaders = null;
+  }
+
+  /** 版本头只请求一次。页面没有分页，也不带快照正文。 */
+  async function loadPublishHeaders(productId: number, operatorType: 'price' | 'rules') {
+    const hit = operatorType === 'price' ? pricePublishHeaders : rulesPublishHeaders;
+    if (hit?.productId === productId) return hit.items;
+    const res = operatorType === 'price'
+      ? await getSalesProductPublishPriceList({ salesProductId: productId, includeContent: false })
+      : await getSalesProductPublishRulesList({ salesProductId: productId, includeContent: false });
+    const items = res.items || [];
+    const next = { productId, items };
+    if (operatorType === 'price') pricePublishHeaders = next;
+    else rulesPublishHeaders = next;
+    return items;
+  }
+
+  /** 取最新一条发布快照。正文按 id 另取。 */
+  async function loadLatestPublishSnapshot(productId: number, operatorType: 'price' | 'rules') {
+    const items = await loadPublishHeaders(productId, operatorType);
+    const latest = items[0] as Record<string, any> | undefined;
+    const id = latest?.id ?? latest?.Id;
+    if (id == null) return null;
+    const cached = (operatorType === 'price' ? priceData.value : rulesData.value)
+      .find((row) => row.id === id);
+    if (cached?.contentLoaded) return cached.content || null;
+    const detail = await getSalesProductPublishRecord(id);
+    return detail?.content ?? detail?.Content ?? null;
+  }
+
   async function refreshPricePublishSyncStatus(productId?: number) {
     const pid = productId ?? selectedProduct.value;
     if (pid == null || !priceTableData.value.length) {
@@ -1255,57 +1426,90 @@
         salesProductId: pid,
         operatorType: 'price',
       });
-      const pub = await getSalesProductPublishPriceList({ salesProductId: pid, page: 1, pageSize: 1 });
-      const latest = pub.items?.[0] as Record<string, any> | undefined;
-      const online = latest?.content ?? latest?.Content;
+      const online = await loadLatestPublishSnapshot(pid, 'price');
       if (online == null) {
         pricePublishPending.value = true;
         return;
       }
-      const { length } = computeSnapshotDiff(online, preview);
-      pricePublishPending.value = length < 0 ? null : length > 0;
+      // 仅判断「有没有差异」：禁止走 computeSnapshotDiff/diffJson。
+      // 大卖价快照会生成海量 diff 行，主线程直接卡死（与表格组件无关）。
+      pricePublishPending.value = !snapshotsSemanticallyEqual(online, preview);
     } catch {
       pricePublishPending.value = null;
     }
   }
 
-  async function loadRecordsTabData(productId: number) {
+  let recordsTabLoadedProductId: number | null = null;
+  let recordsLoadSeq = 0;
+  let publishContentSeq = 0;
+  const recordsLoading = ref(false);
+  const publishRecordContentLoading = ref(false);
+
+  function mapPublishRecordHeader(r: any) {
+    return {
+      id: r.id ?? r.Id,
+      version: r.version ?? r.Version,
+      operatorType: r.operatorType ?? r.OperatorType,
+      status: r.status ?? r.Status,
+      publishUser: r.publishUser ?? r.PublishUser,
+      publishTime: r.publishTime ?? r.PublishTime,
+      description: r.description ?? r.Description,
+      aiAnalysisReport: '',
+      content: '',
+      contentLoaded: false,
+    };
+  }
+
+  async function ensureActivePublishRecordContent() {
+    const rec = currentPublishRecord.value as Record<string, any>;
+    if (!rec?.id || rec.contentLoaded) return;
+    const id = rec.id;
+    const seq = ++publishContentSeq;
+    publishRecordContentLoading.value = true;
     try {
-      const [pubPrice, pubRules] = await Promise.all([
-        getSalesProductPublishPriceList({ salesProductId: productId, page: 1, pageSize: 50 }),
-        getSalesProductPublishRulesList({ salesProductId: productId, page: 1, pageSize: 50 }),
-      ]);
-      priceData.value = (pubPrice.items || []).map((r: any) => ({
-        id: r.id ?? r.Id,
-        version: r.version ?? r.Version,
-        operatorType: r.operatorType ?? r.OperatorType,
-        status: r.status ?? r.Status,
-        publishUser: r.publishUser ?? r.PublishUser,
-        publishTime: r.publishTime ?? r.PublishTime,
-        description: r.description ?? r.Description,
-        aiAnalysisReport: r.aiAnalysisReport ?? r.AiAnalysisReport ?? '',
-        content: typeof r.content === 'string' ? r.content : JSON.stringify(r.content || {}),
-      }));
-      rulesData.value = (pubRules.items || []).map((r: any) => ({
-        id: r.id ?? r.Id,
-        version: r.version ?? r.Version,
-        operatorType: r.operatorType ?? r.OperatorType,
-        status: r.status ?? r.Status,
-        publishUser: r.publishUser ?? r.PublishUser,
-        publishTime: r.publishTime ?? r.PublishTime,
-        description: r.description ?? r.Description,
-        aiAnalysisReport: r.aiAnalysisReport ?? r.AiAnalysisReport ?? '',
-        content: typeof r.content === 'string' ? r.content : JSON.stringify(r.content || {}),
-      }));
+      const detail = await getSalesProductPublishRecord(id);
+      if (seq !== publishContentSeq) return;
+      const target = [...priceData.value, ...rulesData.value].find((row) => row.id === id);
+      if (!target) return;
+      target.content = publishContentToText(detail?.content ?? detail?.Content);
+      target.aiAnalysisReport = detail?.aiAnalysisReport ?? detail?.AiAnalysisReport ?? '';
+      target.contentLoaded = true;
     } catch (e) {
       console.error(e);
+    } finally {
+      if (seq === publishContentSeq) publishRecordContentLoading.value = false;
+    }
+  }
+
+  async function loadRecordsTabData(productId: number, force = false) {
+    if (!force && recordsTabLoadedProductId === productId) {
+      void ensureActivePublishRecordContent();
+      return;
+    }
+    const seq = ++recordsLoadSeq;
+    recordsLoading.value = true;
+    if (force) clearPublishHeaderCache(productId);
+    try {
+      const [priceItems, rulesItems] = await Promise.all([
+        loadPublishHeaders(productId, 'price'),
+        loadPublishHeaders(productId, 'rules'),
+      ]);
+      if (seq !== recordsLoadSeq || selectedProduct.value !== productId) return;
+      priceData.value = priceItems.map(mapPublishRecordHeader);
+      rulesData.value = rulesItems.map(mapPublishRecordHeader);
+      recordsTabLoadedProductId = productId;
+      void ensureActivePublishRecordContent();
+    } catch (e) {
+      console.error(e);
+    } finally {
+      if (seq === recordsLoadSeq) recordsLoading.value = false;
     }
   }
 
   async function loadSalesProductRelatedByTab(productId: number, tabKey: string) {
     if (tabKey === 'price') {
-      await ensureSalesPriceDictLoaded();
-      await loadPriceTabData(productId);
+      // 字典与卖价列表并行，避免串行拖慢首屏
+      await Promise.all([ensureSalesPriceDictLoaded(), loadPriceTabData(productId)]);
       return;
     }
     if (tabKey === 'rules') {
@@ -1318,53 +1522,108 @@
     }
   }
 
+  function applyProductDetailToForm(product: any, d: Record<string, any>) {
+    const p = d;
+    const numStr = (v: unknown) => (v != null && v !== '' ? String(v) : '');
+    Object.assign(formData, {
+      productCode: p.productCode ?? p.ProductCode ?? '',
+      productName: p.productName ?? p.ProductName ?? '',
+      group: resolveProductGroupValue(p.productGroup ?? p.ProductGroup),
+      minTimeliness: numStr(p.minTimeliness ?? p.MinTimeliness),
+      maxTimeliness: numStr(p.maxTimeliness ?? p.MaxTimeliness),
+      tradeTerms: (() => {
+        const raw = String(p.tradeTerms ?? p.TradeTerms ?? '')
+          .trim()
+          .toUpperCase();
+        return raw === 'DDP' || raw === 'DDU' ? raw : '';
+      })(),
+      routeSort: (() => {
+        const n = Number(p.routeSort ?? p.RouteSort ?? 0);
+        return Number.isFinite(n) && n >= 0 ? n : 0;
+      })(),
+      customerWaybill: p.customerWaybill ?? p.CustomerWaybill ?? '系统面单',
+      labelTemplateId: (() => {
+        const raw = p.labelTemplateId ?? p.LabelTemplateId;
+        const n = Number(raw);
+        return Number.isFinite(n) && n > 0 ? n : undefined;
+      })(),
+      blacklistArea: numStr(p.blacklistAreaId ?? p.BlacklistAreaId),
+      remoteAreaDivision: numStr(p.remoteAreaId ?? p.RemoteAreaId),
+      additionalServices: parseAdditionalServiceCodes(
+        p.additionalServices ?? p.AdditionalServices,
+      ),
+      weightCalculationRule: numStr(p.weightRuleId ?? p.WeightRuleId),
+      weightRounding: numStr(p.weightRoundingId ?? p.WeightRoundingId),
+      productDescription: p.productDescription ?? p.ProductDescription ?? '',
+      preStorageScript: p.preStorageScript ?? p.PreStorageScript ?? '',
+    });
+    customerGuideMarkdown.value = p.customerGuideMarkdown ?? p.CustomerGuideMarkdown ?? '';
+    const audit = pickResolvedAudit(p);
+    const hit = productList.value.find((item: any) => item.id === product.id);
+    if (hit) {
+      hit.createTime = audit.createTime || hit.createTime;
+      hit.updateTime = audit.updateTime || hit.updateTime;
+      hit.createBy = audit.createBy || hit.createBy;
+      hit.updateBy = audit.updateBy || hit.updateBy;
+      hit.creator = hit.updateBy || hit.createBy || hit.creator || '';
+      hit.raw = { ...(hit.raw || {}), ...p };
+    }
+    resetConfigFormBaseline();
+  }
+
   const handleSelectProduct = async (product: any) => {
+    const productChanged = selectedProduct.value !== product.id;
     selectedProduct.value = product.id;
     configPublishPending.value = false;
     rulesPublishPending.value = false;
     if (!product?.id) return;
+    // 卖价页切产品不先清空表格，避免空表→填表双次重绘；离开卖价后再换产品则丢掉缓存，避免切回来看到上一个产品
+    if (productChanged && activeTab.value !== 'price') {
+      priceTableData.value = [];
+      priceTabLoadedProductId = null;
+      pricePublishCheckedSig = '';
+      pricePublishPending.value = null;
+      effectiveVersion.value = '--';
+      effectiveTime.value = '--';
+    } else if (activeTab.value === 'price') {
+      pricePublishPending.value = null;
+    }
+    if (productChanged && activeTab.value !== 'rules') {
+      rulesTabLoadedProductId = null;
+      shippingProviderData.value = [];
+      shippingScheme.value = 'costLowest';
+    }
+    if (productChanged && activeTab.value !== 'records') {
+      recordsTabLoadedProductId = null;
+      priceData.value = [];
+      rulesData.value = [];
+      clearPublishHeaderCache();
+    } else if (productChanged) {
+      clearPublishHeaderCache();
+    }
     try {
+      // 卖价 tab：详情与列表并行，显著缩短等待
+      if (activeTab.value === 'price') {
+        const [d] = await Promise.all([
+          getSalesProductDetail(product.id),
+          loadSalesProductRelatedByTab(product.id, 'price'),
+        ]);
+        if (selectedProduct.value !== product.id) return;
+        if (d == null || typeof d !== 'object') {
+          Message.error('产品详情为空，请检查接口返回');
+          return;
+        }
+        applyProductDetailToForm(product, d as Record<string, any>);
+        return;
+      }
+
       const d = await getSalesProductDetail(product.id);
+      if (selectedProduct.value !== product.id) return;
       if (d == null || typeof d !== 'object') {
         Message.error('产品详情为空，请检查接口返回');
         return;
       }
-      const p = d as Record<string, any>;
-      const numStr = (v: unknown) => (v != null && v !== '' ? String(v) : '');
-      Object.assign(formData, {
-        productCode: p.productCode ?? p.ProductCode ?? '',
-        productName: p.productName ?? p.ProductName ?? '',
-        group: resolveProductGroupValue(p.productGroup ?? p.ProductGroup),
-        minTimeliness: numStr(p.minTimeliness ?? p.MinTimeliness),
-        maxTimeliness: numStr(p.maxTimeliness ?? p.MaxTimeliness),
-        tradeTerms: (() => {
-          const raw = String(p.tradeTerms ?? p.TradeTerms ?? '')
-            .trim()
-            .toUpperCase();
-          return raw === 'DDP' || raw === 'DDU' ? raw : '';
-        })(),
-        routeSort: (() => {
-          const n = Number(p.routeSort ?? p.RouteSort ?? 0);
-          return Number.isFinite(n) && n >= 0 ? n : 0;
-        })(),
-        customerWaybill: p.customerWaybill ?? p.CustomerWaybill ?? '系统面单',
-        labelTemplateId: (() => {
-          const raw = p.labelTemplateId ?? p.LabelTemplateId;
-          const n = Number(raw);
-          return Number.isFinite(n) && n > 0 ? n : undefined;
-        })(),
-        blacklistArea: numStr(p.blacklistAreaId ?? p.BlacklistAreaId),
-        remoteAreaDivision: numStr(p.remoteAreaId ?? p.RemoteAreaId),
-        additionalServices: parseAdditionalServiceCodes(
-          p.additionalServices ?? p.AdditionalServices
-        ),
-        weightCalculationRule: numStr(p.weightRuleId ?? p.WeightRuleId),
-        weightRounding: numStr(p.weightRoundingId ?? p.WeightRoundingId),
-        productDescription: p.productDescription ?? p.ProductDescription ?? '',
-        preStorageScript: p.preStorageScript ?? p.PreStorageScript ?? '',
-      });
-      customerGuideMarkdown.value = p.customerGuideMarkdown ?? p.CustomerGuideMarkdown ?? '';
-      resetConfigFormBaseline();
+      applyProductDetailToForm(product, d as Record<string, any>);
       await loadSalesProductRelatedByTab(product.id, activeTab.value);
     } catch (e: any) {
       console.error(e);
@@ -1378,6 +1637,7 @@
     void loadWeightSelectOptions();
     void loadBillingFactorSelectOptions();
     void loadLabelTemplateOptions();
+    void ensureSalesPriceDictLoaded();
     loadProductList();
   });
 
@@ -1471,7 +1731,16 @@
     const ok = await confirmDiscardUnsavedChanges();
     if (!ok) return;
     activeTab.value = key;
-    if (['price', 'rules', 'records'].includes(key) && selectedProduct.value != null) {
+    if (selectedProduct.value == null) return;
+    if (key === 'price' && priceTabLoadedProductId === selectedProduct.value) return;
+    if (key === 'rules' && rulesTabLoadedProductId === selectedProduct.value) return;
+    if (key === 'records' && recordsTabLoadedProductId === selectedProduct.value) {
+      void ensureActivePublishRecordContent();
+      return;
+    }
+    // 产品配置、对客说明的数据在选中产品时已经随详情写入，切页不再请求
+    if (key === 'config' || key === 'customerGuide') return;
+    if (['price', 'rules', 'records'].includes(key)) {
       await loadSalesProductRelatedByTab(selectedProduct.value, key);
     }
   };
@@ -1611,12 +1880,7 @@
       operatorType,
     });
     modifiedModel.value = formatSnapshotJson(preview);
-    const pub =
-      operatorType === 'price'
-        ? await getSalesProductPublishPriceList({ salesProductId: pid, page: 1, pageSize: 1 })
-        : await getSalesProductPublishRulesList({ salesProductId: pid, page: 1, pageSize: 1 });
-    const latest = pub.items?.[0] as Record<string, any> | undefined;
-    const online = latest?.content ?? latest?.Content;
+    const online = await loadLatestPublishSnapshot(Number(pid), operatorType);
     const hasOnline = online != null;
     originalValue.value = hasOnline ? formatSnapshotJson(online) : formatSnapshotJson({});
     applyPublishDiffState(online ?? {}, preview, hasOnline);
@@ -1931,7 +2195,7 @@
       publishConfirmDate.value = dayjs();
       clearPricePublishAiReport();
       publishModalMethods.closeModal();
-      await loadSalesProductRelatedByTab(pid, 'records');
+      await loadRecordsTabData(pid, true);
       if (operatorType === 'price') {
         await loadPriceTabData(pid);
       }
@@ -2126,8 +2390,16 @@
   const publishRecordTab = ref('price'); // price 或 rules
 
   const publishRecordTabItems = computed(() => [
-    { key: 'price', label: t('channel.salesProducts.publish.tabs.price') },
-    { key: 'rules', label: t('channel.salesProducts.publish.tabs.rules') },
+    {
+      key: 'price',
+      label: t('channel.salesProducts.publish.tabs.price'),
+      badge: priceData.value.length || undefined,
+    },
+    {
+      key: 'rules',
+      label: t('channel.salesProducts.publish.tabs.rules'),
+      badge: rulesData.value.length || undefined,
+    },
   ]);
   const publishDateVisible = ref(false);
   const publishDate = ref();
@@ -2147,15 +2419,45 @@
     return list[publishRecordActiveIndex.value] || {};
   });
 
+  const hasCurrentPublishRecord = computed(() => {
+    const rec = currentPublishRecord.value as Record<string, any>;
+    return rec != null && rec.id != null;
+  });
+
+  /** 选中行若已是当前生效版本，则不可再回滚到该版本 */
+  const canRollbackPublishRecord = computed(() => {
+    const rec = currentPublishRecord.value as Record<string, any>;
+    if (!rec || rec.id == null) return false;
+    const list = currentListData.value as Record<string, any>[];
+    const effectiveRow = list.find((item) => isPublishRecordEffectiveRow(item));
+    if (effectiveRow != null && Number(effectiveRow.id) === Number(rec.id)) return false;
+    return true;
+  });
+
+  function publishRecordStatusMeta(status: unknown) {
+    if (status === '生效') {
+      return { label: t('channel.salesProducts.publish.status.publish'), className: 'type-effective' };
+    }
+    if (status === '回滚') {
+      return { label: t('channel.salesProducts.publish.status.rollback'), className: 'type-rollback' };
+    }
+    return {
+      label: status == null || status === '' ? '--' : String(status),
+      className: 'type-invalid',
+    };
+  }
+
   // 切换发布记录
   const handleChangePublishRecordIndex = (index: number) => {
     publishRecordActiveIndex.value = index;
+    void ensureActivePublishRecordContent();
   };
 
   // 切换标签页
   const handleChangePublishRecordTab = (tab: string) => {
     publishRecordTab.value = tab;
     publishRecordActiveIndex.value = 0;
+    void ensureActivePublishRecordContent();
   };
 
   // 发布操作 - 弹出日期选择器
@@ -2215,8 +2517,8 @@
             operatorType,
           });
           Message.success('回滚成功');
-          await loadRecordsTabData(Number(pid));
           publishRecordActiveIndex.value = 0;
+          await loadRecordsTabData(Number(pid), true);
         } catch (e: any) {
           Message.error(e?.message || '回滚失败');
         }
@@ -2245,10 +2547,13 @@
   // 价格配置弹窗相关
   const priceModalVisible = ref(false);
   const priceDrawerActiveTab = ref('basic');
+  const priceListMergeSame = ref(false);
   const priceDrawerTabList = [
     { key: 'basic', labelKey: 'channel.salesProducts.drawer.tabs.basic' },
     { key: 'priceList', labelKey: 'channel.salesProducts.drawer.tabs.priceList' },
   ];
+  /** 两个 tab 共用固定内容区高度，仅价格表内部滚动 */
+  const PRICE_LIST_HOT_HEIGHT = 550;
   // 编辑模式
   const isEditMode = ref(false);
   const editingPriceRecord = ref<any>(null);
@@ -2356,8 +2661,10 @@
 
   // 新增价格配置
   const handleAddPrice = async () => {
-    await ensureSalesPriceDictLoaded(true);
-    await loadBillingFactorSelectOptions();
+    await Promise.all([
+      ensureSalesPriceDictLoaded(),
+      loadBillingFactorSelectOptions(),
+    ]);
     // 重置编辑模式
     isEditMode.value = false;
     editingPriceRecord.value = null;
@@ -2371,9 +2678,9 @@
     // 重置计费因素数据为默认值
     billingFactorsData.value = getDefaultBillingFactorsData().map(item => ({ ...item }));
     // 重置价格表数据
-    priceListData.value = [];
+    replacePriceListData([]);
     priceListCustomerCodesSnapshot.value = [];
-    priceListSelectedIds.value = [];
+    clearPriceListChecked();
     priceDrawerActiveTab.value = 'basic';
     priceModalVisible.value = true;
     
@@ -2383,6 +2690,161 @@
     });
   };
 
+  /** 计费因素去重键：同义词（如 zone/价格分区）视为同一因素 */
+  function billingFactorDedupKey(factor: string): string {
+    const s = String(factor ?? '').trim();
+    if (!s) return '';
+    if (isPartitionValueFactor(s)) return 'zone';
+    if (isRemotePartitionValueFactor(s)) return 'remoteZone';
+    if (isWarehouseValueFactor(s)) return 'warehouse';
+    if (isWeightValueFactor(s)) return 'weight';
+    if (isCustomerGroupValueFactor(s) || isCustomerFactor(s)) return 'customer';
+    if (isCargoTypeValueFactor(s)) return 'cargo';
+    return s;
+  }
+
+  function isBillingFactorAlreadyUsed(factor: string, currentRowId?: number): boolean {
+    const key = billingFactorDedupKey(factor);
+    if (!key) return false;
+    return billingFactorsData.value.some(
+      (r) =>
+        r.id !== currentRowId
+        && billingFactorDedupKey(String(r.factor ?? '')) === key,
+    );
+  }
+
+  function isBillingFactorOptionDisabled(optionValue: string, currentRow: { id: number; factor?: string }) {
+    const key = billingFactorDedupKey(optionValue);
+    if (!key) return false;
+    // 当前行已选中的项保持可选，便于回显
+    if (billingFactorDedupKey(String(currentRow?.factor ?? '')) === key) return false;
+    return isBillingFactorAlreadyUsed(optionValue, currentRow?.id);
+  }
+
+  function handleBillingFactorChange(row: { id: number; factor?: string; factorValues?: string[] }, value: string) {
+    if (!value) return;
+    if (isBillingFactorAlreadyUsed(value, row.id)) {
+      Message.warning('该因素已存在，不能重复添加');
+      row.factor = '';
+      row.factorValues = [];
+    }
+  }
+
+  const billingFactorsTableRef = ref<any>(null);
+
+  const billingFactorColumns = computed(() => [
+    {
+      field: 'sort',
+      title: t('channel.salesProducts.drawer.table.billingFactors.serialNo'),
+      className: 'sort',
+      width: 52,
+      align: 'center',
+      slots: { default: 'sort' },
+    },
+    {
+      field: 'factor',
+      title: t('channel.salesProducts.drawer.table.billingFactors.factor'),
+      width: 140,
+      slots: { default: 'factor' },
+    },
+    {
+      field: 'factorValues',
+      title: t('channel.salesProducts.drawer.table.billingFactors.factorValues'),
+      minWidth: 420,
+      showOverflow: false,
+      slots: { default: 'factorValues' },
+    },
+    {
+      field: 'action',
+      title: t('channel.salesProducts.drawer.table.billingFactors.actions'),
+      width: 64,
+      align: 'center',
+      showOverflow: false,
+      slots: { default: 'action' },
+    },
+  ]);
+
+  /** 容器贴底后，把实测高度写进 TablePro，避免只拉高外壳留白 */
+  const billingFactorsTableWrapRef = ref<HTMLElement | null>(null);
+  const billingFactorsTableHeight = ref(220);
+  let billingFactorsResizeObserver: ResizeObserver | null = null;
+  let billingFactorsHeightRaf = 0;
+
+  function applyBillingFactorsTableHeight(h: number) {
+    if (h < 120) return;
+    billingFactorsTableHeight.value = h;
+    const table = billingFactorsTableRef.value;
+    table?.setHeight?.(h);
+    nextTick(() => {
+      const grid = table?.xGrid;
+      if (grid && typeof grid.recalculate === 'function') {
+        grid.recalculate(true);
+      }
+    });
+  }
+
+  function syncBillingFactorsTableHeight(force = false) {
+    const el = billingFactorsTableWrapRef.value;
+    if (!el) return;
+    const h = Math.floor(el.clientHeight || el.getBoundingClientRect().height);
+    if (h < 120) return;
+    if (!force && Math.abs(h - billingFactorsTableHeight.value) < 2) return;
+    applyBillingFactorsTableHeight(h);
+  }
+
+  function setupBillingFactorsResizeObserver() {
+    billingFactorsResizeObserver?.disconnect();
+    billingFactorsResizeObserver = null;
+    if (billingFactorsHeightRaf) {
+      cancelAnimationFrame(billingFactorsHeightRaf);
+      billingFactorsHeightRaf = 0;
+    }
+    const el = billingFactorsTableWrapRef.value;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    billingFactorsResizeObserver = new ResizeObserver(() => {
+      if (billingFactorsHeightRaf) cancelAnimationFrame(billingFactorsHeightRaf);
+      billingFactorsHeightRaf = requestAnimationFrame(() => {
+        billingFactorsHeightRaf = 0;
+        syncBillingFactorsTableHeight();
+      });
+    });
+    billingFactorsResizeObserver.observe(el);
+    nextTick(() => {
+      syncBillingFactorsTableHeight(true);
+      setTimeout(() => syncBillingFactorsTableHeight(true), 80);
+    });
+  }
+
+  const billingFactorsTableProps = computed(() => ({
+    columns: billingFactorColumns.value,
+    isCellSort: false,
+    showToolbar: false,
+    isColumnsDrag: false,
+    showPager: false,
+    showIndex: false,
+    data: billingFactorsData.value,
+    minHeight: 120,
+    keepSource: true,
+    size: 'small',
+    useForm: false,
+    autoHeight: false,
+    height: billingFactorsTableHeight.value,
+    tableConfig: {
+      height: billingFactorsTableHeight.value,
+    },
+    toolbarConfig: { setting: false, enabled: false },
+    rowConfig: { isHover: true, keyField: 'id', height: 52 },
+    scrollY: { enabled: true, gt: 0 },
+  }));
+
+  function refreshBillingFactorsTable() {
+    nextTick(() => {
+      syncBillingFactorsTableHeight();
+      billingFactorsTableRef.value?.reloadData?.(billingFactorsData.value);
+      initSortable();
+    });
+  }
+
   // 新增计费因素行
   const handleAddBillingFactor = () => {
     const newId = Math.max(...billingFactorsData.value.map((item) => item.id), 0) + 1;
@@ -2393,23 +2855,23 @@
       factorValues: [],
     });
     if (priceModalVisible.value && priceDrawerActiveTab.value === 'basic') {
-      nextTick(() => {
-        initSortable();
-      });
+      refreshBillingFactorsTable();
     }
   };
 
   // 删除计费因素行
-  const handleDeleteBillingFactor = (index: number) => {
+  const handleDeleteBillingFactor = (row: { id: number } | number) => {
+    const index =
+      typeof row === 'number'
+        ? row
+        : billingFactorsData.value.findIndex((item) => item.id === row.id);
+    if (index < 0) return;
     billingFactorsData.value.splice(index, 1);
-    // 重新编号
     billingFactorsData.value.forEach((item, idx) => {
       item.serialNumber = idx + 1;
     });
     if (priceModalVisible.value && priceDrawerActiveTab.value === 'basic') {
-      nextTick(() => {
-        initSortable();
-      });
+      refreshBillingFactorsTable();
     }
   };
 
@@ -2574,34 +3036,33 @@
   // 拖拽排序相关
   let sortableInstance: any = null;
 
-  // 初始化拖拽排序
+  // 初始化拖拽排序（TablePro / vxe-table tbody）
   const initSortable = () => {
-    // 销毁旧的实例
     if (sortableInstance) {
       sortableInstance.destroy();
       sortableInstance = null;
     }
-    
+
     nextTick(() => {
-      const tbody = document.querySelector('.billing-factors-table .billing-factors-tbody');
+      const root = billingFactorsTableRef.value?.$el as HTMLElement | undefined;
+      const tbody = root?.querySelector(
+        '.body--wrapper>.vxe-table--body tbody',
+      ) as HTMLElement | null;
       if (!tbody) return;
-      
-      sortableInstance = Sortable.create(tbody as HTMLElement, {
-        handle: '.drag-icon',
+
+      sortableInstance = Sortable.create(tbody, {
+        handle: '.sort',
         animation: 150,
         onEnd: (evt: any) => {
           const { oldIndex, newIndex } = evt;
           if (oldIndex === newIndex || oldIndex === undefined || newIndex === undefined) return;
-          
-          // 更新数据顺序
           const movedItem = billingFactorsData.value.splice(oldIndex, 1)[0];
           billingFactorsData.value.splice(newIndex, 0, movedItem);
-          
-          // 重新编号
           billingFactorsData.value.forEach((item, idx) => {
             item.serialNumber = idx + 1;
           });
-        }
+          billingFactorsTableRef.value?.reloadData?.(billingFactorsData.value);
+        },
       });
     });
   };
@@ -2611,11 +3072,37 @@
     row.factorValues.splice(valueIndex, 1);
   };
 
-  // 价格表数据
-  const priceListData = ref<any[]>([]);
+  /** 因素值预览：行内最多展示条数，超出用 +N 弹层 */
+  const FACTOR_VALUE_PREVIEW_LIMIT = 10;
+
+  function getFactorValuePreview(row: any) {
+    const values = Array.isArray(row?.factorValues) ? row.factorValues : [];
+    const limit = FACTOR_VALUE_PREVIEW_LIMIT;
+    return {
+      values,
+      visible: values.slice(0, limit),
+      extraCount: Math.max(0, values.length - limit),
+    };
+  }
+
+  // 价格表数据：shallowRef + 普通对象，避免上千行 deep 响应式拖垮 Handsontable
+  const priceListData = shallowRef<any[]>([]);
+
+  function replacePriceListData(rows: any[]) {
+    priceListData.value = (rows || []).map((row) => ({
+      ...row,
+      checked: !!(row as any)?.checked,
+    }));
+  }
+
+  /** 换新数组引用，触发 Handsontable 浅监听刷新（行对象可复用） */
+  function touchPriceListData() {
+    priceListData.value = priceListData.value.slice();
+  }
   /** 当前价格表行对应的客户组编码顺序（用于同步时按编码保留价格） */
   const priceListCustomerCodesSnapshot = ref<string[]>([]);
   const priceListSelectedIds = ref<number[]>([]);
+  const priceListHotRef = ref<{ selectAll: () => void; clearSelection: () => void } | null>(null);
   const batchFillModalVisible = ref(false);
   const batchFillValue = ref<number | undefined>(undefined);
   const batchFillOnlyEmpty = ref(false);
@@ -2668,10 +3155,12 @@
       if (!factor.factor || isCustomerFactor(factor.factor)) continue;
       const colKey = `factor_${i}`;
       const hasMappedValues = factor.factorValues.length > 0;
-      const hasRowValues = rows.some((row) => {
-        const v = (row as any)?.[colKey];
-        return v != null && String(v).trim() !== '';
-      });
+      const hasRowValues =
+        !hasMappedValues
+        && rows.some((row) => {
+          const v = (row as any)?.[colKey];
+          return v != null && String(v).trim() !== '';
+        });
       if (hasMappedValues || hasRowValues) {
         factorHeaders.push({
           key: colKey,
@@ -2772,7 +3261,7 @@
     combinations.forEach((combination, index) => {
       const row: any = {
         id: index + 1,
-        calculationFormula: defaultCalculationFormulaCode(),
+        calculationFormula: defaultCalculationFormulaDisplay(),
         ...buildEmptyCustomerPrices(newCodes),
       };
 
@@ -2817,9 +3306,9 @@
     added: number;
     removed: number;
   }) => {
-    priceListData.value = result.newData;
+    replacePriceListData(result.newData.map((row) => ({ ...row, checked: false })));
     capturePriceListCustomerCodesSnapshot();
-    priceListSelectedIds.value = [];
+    clearPriceListChecked();
     priceDrawerActiveTab.value = 'priceList';
     const parts = [`保留 ${result.kept} 行`, `新增 ${result.added} 行`];
     if (result.removed > 0) parts.push(`移除 ${result.removed} 行`);
@@ -2892,7 +3381,9 @@
       return {
         id: row.id ?? index + 1,
         factorValuesJson,
-        calculationFormula: row.calculationFormula || defaultCalculationFormulaCode(),
+        calculationFormula: formulaLabelToCode(
+          row.calculationFormula || defaultCalculationFormulaDisplay(),
+        ),
         calculatedValue: Number(row.calculatedValue ?? 0) || 0,
         customerGroupValues,
       };
@@ -2906,8 +3397,11 @@
       if (item?.factorValuesJson && typeof item.factorValuesJson === 'object') {
         const row: any = {
           id: item.id ?? index + 1,
-          calculationFormula: item.calculationFormula || defaultCalculationFormulaCode(),
+          calculationFormula: formulaCodeToLabel(
+            item.calculationFormula || defaultCalculationFormulaCode(),
+          ),
           calculatedValue: item.calculatedValue,
+          checked: false,
         };
         const fj = item.factorValuesJson as Record<string, string>;
         for (let i = 0; i < billingFactorsData.value.length; i++) {
@@ -2929,7 +3423,14 @@
         }
         return row;
       }
-      return { id: item?.id ?? index + 1, ...item };
+      return {
+        id: item?.id ?? index + 1,
+        ...item,
+        calculationFormula: formulaCodeToLabel(
+          item?.calculationFormula || defaultCalculationFormulaCode(),
+        ),
+        checked: false,
+      };
     });
   }
 
@@ -3021,6 +3522,7 @@
       // 准备表格数据（所有行都导出，合并的单元格只在第一行显示值）
       const tableData: any[] = [];
       const merges: Array<{ s: { r: number; c: number }; e: { r: number; c: number } }> = [];
+      const rowSpanLookup = buildFactorRowSpanLookup();
       
       priceListData.value.forEach((row: any, rowIndex: number) => {
         const rowData: any = {};
@@ -3028,7 +3530,7 @@
         priceTableHeaders.value.forEach((header, colIndex) => {
           if (header.key.startsWith('factor_')) {
             // 因素列：只在需要合并的第一行显示值（与表格展示一致：名称而非编码/id）
-            const rowSpan = getFactorRowSpan(header.key, rowIndex);
+            const rowSpan = getFactorRowSpan(header.key, rowIndex, rowSpanLookup);
             if (rowSpan > 0) {
               // 这是合并的第一行，显示值
               rowData[header.label] = formatPriceTableFactorCell(
@@ -3110,16 +3612,20 @@
           
           // 转换数据格式
           const importedData = jsonData.map((row: any, index) => {
+            const formulaRaw =
+              row[priceTableHeaders.value.find((h) => h.key === 'calculationFormula')?.label || '']
+              || defaultCalculationFormulaDisplay();
             const newRow: any = {
               id: index + 1,
-              calculationFormula: row[priceTableHeaders.value.find((h) => h.key === 'calculationFormula')?.label || ''] || defaultCalculationFormulaCode(),
+              calculationFormula: formulaCodeToLabel(formulaLabelToCode(String(formulaRaw))),
+              checked: false,
             };
             
             // 设置因素值和客户组
             priceTableHeaders.value.forEach((header) => {
               if (header.key !== 'calculationFormula') {
                 if (header.isCustomer) {
-                  newRow[header.key] = row[header.label] || 0;
+                  newRow[header.key] = Number(row[header.label]) || 0;
                 } else {
                   newRow[header.key] = row[header.label] || '';
                 }
@@ -3129,10 +3635,11 @@
             return newRow;
           });
           
-          priceListData.value = importedData;
+          replacePriceListData(importedData);
           coercePriceListRowsFactorCells();
           capturePriceListCustomerCodesSnapshot();
-          priceListSelectedIds.value = [];
+          clearPriceListChecked();
+          touchPriceListData();
           Message.success('导入成功');
         } catch (error) {
           Message.error('导入失败，请检查文件格式');
@@ -3143,27 +3650,75 @@
     input.click();
   };
 
-  const priceListAllSelected = computed(() => {
-    const ids = priceListData.value.map((r) => r.id);
-    return ids.length > 0 && ids.every((id) => priceListSelectedIds.value.includes(id));
+  const priceListHotColumns = computed<PriceListHotColumn[]>(() => {
+    // 下拉只展示字典中文名；单元格统一存展示名，保存时再 formulaLabelToCode
+    const formulaSource = Array.from(
+      new Set(
+        calculationFormulaOptions.value
+          .map((o) => String(o.label || o.value || '').trim())
+          .filter(Boolean),
+      ),
+    );
+    if (!formulaSource.length) {
+      const fallback = defaultCalculationFormulaDisplay();
+      if (fallback) formulaSource.push(fallback);
+    }
+    return priceTableHeaders.value.map((header) => {
+      if (header.key.startsWith('factor_')) {
+        const factorIndex = header.factorIndex;
+        return {
+          key: header.key,
+          label: header.label,
+          width: 120,
+          readOnly: true,
+          type: 'text' as const,
+          formatter: (row: any) =>
+            formatPriceTableFactorCell(factorIndex, String(row?.[header.key] ?? '')),
+        };
+      }
+      if (header.key === 'calculationFormula') {
+        return {
+          key: header.key,
+          label: header.label,
+          width: 140,
+          type: 'dropdown' as const,
+          source: formulaSource,
+        };
+      }
+      return {
+        key: header.key,
+        label: header.label,
+        width: 110,
+        type: 'numeric' as const,
+      };
+    });
   });
 
-  const toggleSelectAllPriceRows = (checked: boolean | Event) => {
-    const on = typeof checked === 'boolean' ? checked : !!(checked as any)?.target?.checked;
-    priceListSelectedIds.value = on ? priceListData.value.map((r) => r.id) : [];
-  };
+  /** 仅列结构变化时重挂载 */
+  const priceListHotTableKey = computed(
+    () => `price-hot-${priceListHotColumns.value.map((c) => c.key).join('|')}`,
+  );
 
-  const toggleSelectPriceRow = (id: number, checked: boolean | Event) => {
-    const on = typeof checked === 'boolean' ? checked : !!(checked as any)?.target?.checked;
-    const set = new Set(priceListSelectedIds.value);
-    if (on) set.add(id);
-    else set.delete(id);
-    priceListSelectedIds.value = [...set];
-  };
+  function onPriceListSelectionChange(ids: Array<number | string>) {
+    priceListSelectedIds.value = ids.map((id) => Number(id)).filter((id) => Number.isFinite(id));
+  }
+
+  function clearPriceListChecked() {
+    priceListSelectedIds.value = [];
+    priceListHotRef.value?.clearSelection();
+  }
+
+  function selectAllPriceListRows() {
+    priceListHotRef.value?.selectAll();
+  }
+
+  function clearAllPriceListRowsSelection() {
+    priceListHotRef.value?.clearSelection();
+  }
 
   const openBatchFillModal = (onlyEmpty = false) => {
     if (!priceListSelectedIds.value.length) {
-      Message.warning('请先勾选要填价的行');
+      Message.warning('请先选中要填价的行');
       return;
     }
     batchFillOnlyEmpty.value = onlyEmpty;
@@ -3195,13 +3750,15 @@
       }
     }
     batchFillModalVisible.value = false;
+    // 触发 Handsontable 刷新可视区（数值已写回源对象）
+    touchPriceListData();
     Message.success(touched ? `已填充 ${touched} 个价格格` : '没有需要填充的格子');
   };
 
-  /** 将上一行客户组价格复制到勾选行（或下一空行） */
+  /** 将上一行客户组价格复制到选中行 */
   const handleCopyPrevRowPrices = () => {
     if (!priceListSelectedIds.value.length) {
-      Message.warning('请先勾选目标行');
+      Message.warning('请先选中目标行');
       return;
     }
     const selected = new Set(priceListSelectedIds.value);
@@ -3216,6 +3773,7 @@
       }
       copied += 1;
     }
+    if (copied) touchPriceListData();
     Message.success(copied ? `已将上一行价格复制到 ${copied} 行` : '没有可复制的行');
   };
 
@@ -3225,7 +3783,7 @@
     // 重置编辑模式
     isEditMode.value = false;
     editingPriceRecord.value = null;
-    priceListSelectedIds.value = [];
+    clearPriceListChecked();
     // 清理拖拽实例
     if (sortableInstance) {
       sortableInstance.destroy();
@@ -3249,6 +3807,7 @@
     }
     if (tabKey === 'priceList') {
       await ensureSalesPriceDictLoaded();
+      normalizePriceListFormulaDisplays();
     }
     priceDrawerActiveTab.value = tabKey;
     if (tabKey === 'basic' && priceModalVisible.value) {
@@ -3263,10 +3822,13 @@
     ([visible, tab]) => {
       if (visible && tab === 'basic') {
         nextTick(() => {
+          setupBillingFactorsResizeObserver();
           initSortable();
         });
         return;
       }
+      billingFactorsResizeObserver?.disconnect();
+      billingFactorsResizeObserver = null;
       if (sortableInstance) {
         sortableInstance.destroy();
         sortableInstance = null;
@@ -3275,89 +3837,71 @@
   );
 
   onBeforeUnmount(() => {
+    if (billingFactorsHeightRaf) {
+      cancelAnimationFrame(billingFactorsHeightRaf);
+      billingFactorsHeightRaf = 0;
+    }
+    billingFactorsResizeObserver?.disconnect();
+    billingFactorsResizeObserver = null;
+    if (priceListHeightRaf) {
+      cancelAnimationFrame(priceListHeightRaf);
+      priceListHeightRaf = 0;
+    }
+    priceListResizeObserver?.disconnect();
+    priceListResizeObserver = null;
     if (sortableInstance) {
       sortableInstance.destroy();
       sortableInstance = null;
     }
   });
 
-  // 计算因素列的合并行数（rowspan）- 根据前置因素值是否相同来决定合并
-  const getFactorRowSpan = (headerKey: string, rowIndex: number) => {
-    if (!headerKey.startsWith('factor_')) {
-      return 0; // 非因素列不合并
-    }
-    
-    const currentRow = priceListData.value[rowIndex];
-    const currentValue = (currentRow as any)[headerKey];
-    
-    if (currentValue === undefined || currentValue === '') {
-      return 0;
-    }
-    
-    // 找到该因素在表头中的位置
-    const headerIndex = priceTableHeaders.value.findIndex((h) => h.key === headerKey);
-    if (headerIndex < 0) return 0;
-    
-    // 找到该因素在billingFactorsData中的原始索引
-    const factorIndex = parseInt(headerKey.replace('factor_', ''));
-    
-    // 检查前面的因素是否相同
-    let startIndex = rowIndex;
-    for (let i = rowIndex - 1; i >= 0; i--) {
-      const prevRow = priceListData.value[i];
-      // 检查所有前面的因素是否都相同
-      let allFactorsMatch = true;
-      for (let j = 0; j < headerIndex; j++) {
-        const prevHeader = priceTableHeaders.value[j];
-        if (prevHeader.key.startsWith('factor_')) {
-          if ((prevRow as any)[prevHeader.key] !== (currentRow as any)[prevHeader.key]) {
-            allFactorsMatch = false;
-            break;
-          }
+  /** 导出 Excel 用：按需计算 rowspan，不做成 computed，避免大表持续重算 */
+  function buildFactorRowSpanLookup(): Map<string, number> {
+    const lookup = new Map<string, number>();
+    const rows = priceListData.value;
+    const factorHeaders = priceTableHeaders.value.filter((h) => h.key.startsWith('factor_'));
+    if (!rows.length || !factorHeaders.length) return lookup;
+
+    for (let col = 0; col < factorHeaders.length; col++) {
+      const headerKey = factorHeaders[col].key;
+      let i = 0;
+      while (i < rows.length) {
+        const currentRow = rows[i] as any;
+        const currentValue = currentRow?.[headerKey];
+        if (currentValue === undefined || currentValue === '') {
+          lookup.set(`${headerKey}:${i}`, 0);
+          i += 1;
+          continue;
         }
-      }
-      if (!allFactorsMatch) break;
-      
-      // 检查当前因素值是否相同
-      if ((prevRow as any)[headerKey] === currentValue) {
-        startIndex = i;
-      } else {
-        break;
-      }
-    }
-    
-    // 找到结束位置
-    let endIndex = rowIndex;
-    for (let i = rowIndex + 1; i < priceListData.value.length; i++) {
-      const nextRow = priceListData.value[i];
-      // 检查所有前面的因素是否都相同
-      let allFactorsMatch = true;
-      for (let j = 0; j < headerIndex; j++) {
-        const prevHeader = priceTableHeaders.value[j];
-        if (prevHeader.key.startsWith('factor_')) {
-          if ((nextRow as any)[prevHeader.key] !== (currentRow as any)[prevHeader.key]) {
-            allFactorsMatch = false;
-            break;
+        let end = i + 1;
+        while (end < rows.length) {
+          const nextRow = rows[end] as any;
+          if (nextRow?.[headerKey] !== currentValue) break;
+          let prefixMatch = true;
+          for (let p = 0; p < col; p++) {
+            const pk = factorHeaders[p].key;
+            if (nextRow?.[pk] !== (rows[i] as any)?.[pk]) {
+              prefixMatch = false;
+              break;
+            }
           }
+          if (!prefixMatch) break;
+          end += 1;
         }
-      }
-      if (!allFactorsMatch) break;
-      
-      // 检查当前因素值是否相同
-      if ((nextRow as any)[headerKey] === currentValue) {
-        endIndex = i;
-      } else {
-        break;
+        lookup.set(`${headerKey}:${i}`, end - i);
+        for (let k = i + 1; k < end; k++) {
+          lookup.set(`${headerKey}:${k}`, 0);
+        }
+        i = end;
       }
     }
-    
-    // 如果是第一个出现的行，返回合并行数
-    if (startIndex === rowIndex) {
-      return endIndex - startIndex + 1;
-    }
-    
-    return 0;
-  };
+    return lookup;
+  }
+
+  function getFactorRowSpan(headerKey: string, rowIndex: number, lookup?: Map<string, number>) {
+    const map = lookup ?? buildFactorRowSpanLookup();
+    return map.get(`${headerKey}:${rowIndex}`) ?? 0;
+  }
 
   /** 明细行里 factor_i 与计费因素对齐，将名称/旧值统一为 id 或字典编码 */
   function coercePriceListRowsFactorCells() {
@@ -3380,47 +3924,94 @@
     }
   }
 
-  // 编辑价格配置
-  const handleEditPrice = async (record: any) => {
-    await ensureSalesPriceDictLoaded(true);
-    await loadBillingFactorSelectOptions();
-    // 设置编辑模式
-    isEditMode.value = true;
-    editingPriceRecord.value = record;
-    
-    // 加载基础信息
-    Object.assign(basicInfoForm, {
-      costItem: record.costItem || '',
-      costUnit: record.costUnit || '',
-      currency: record.currency || '',
-      chargingCondition: record.chargingCondition || '无',
-    });
-    
-    const pid = selectedProduct.value;
-    let sourceRecord = record;
-    if (pid != null) {
-      try {
-        const list = await getSalesProductPriceList(pid);
-        const matched = (list || []).find((item: any) => String(item?.id ?? item?.Id) === String(record?.id ?? record?.Id));
-        if (matched) sourceRecord = matched;
-      } catch (e: any) {
-        Message.warning(e?.message || '加载最新价格配置失败，已使用列表数据回填');
-      }
-    }
+  const priceEditPreparing = ref(false);
 
-    // 编辑时回填 /channel/sales-product/price/list 返回的 factors/details（因素值统一为编码/id）
+  /** 价格表内计算公式统一成字典名，保证 dropdown source 能匹配、不会点开被滤空/清空 */
+  function normalizePriceListFormulaDisplays() {
+    for (const row of priceListData.value) {
+      if (!row || typeof row !== 'object') continue;
+      row.calculationFormula = formulaCodeToLabel(
+        formulaLabelToCode(String(row.calculationFormula ?? '')),
+      );
+    }
+  }
+
+  function applyPriceEditSourceRecord(sourceRecord: any) {
     billingFactorsData.value = normalizeBillingFactorsFromApi(sourceRecord?.factors);
     for (const row of billingFactorsData.value) {
       row.factorValues = toCanonicalFactorValues(row.factor, row.factorValues);
     }
-    priceListData.value = mapSalesProductDetailsToPriceListRows(sourceRecord?.details || []);
+    replacePriceListData(mapSalesProductDetailsToPriceListRows(sourceRecord?.details || []));
     coercePriceListRowsFactorCells();
+    normalizePriceListFormulaDisplays();
     capturePriceListCustomerCodesSnapshot();
-    priceListSelectedIds.value = [];
+    clearPriceListChecked();
+    if (priceModalVisible.value && priceDrawerActiveTab.value === 'basic') {
+      refreshBillingFactorsTable();
+    }
+  }
 
-    // 编辑有明细时直接进入价格表，避免误点「生成」清价
-    priceDrawerActiveTab.value = priceListData.value.length > 0 ? 'priceList' : 'basic';
-    priceModalVisible.value = true;
+  async function activateEditPriceListTab() {
+    await nextTick();
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve());
+    });
+    if (!priceModalVisible.value || !isEditMode.value) return;
+    // 编辑场景默认进入价格表（详情异步回填后也要切过去）
+    priceDrawerActiveTab.value = 'priceList';
+  }
+
+  // 编辑价格配置（先开弹窗再填数据，避免串行接口 + 大表同步挂载卡死）
+  const handleEditPrice = async (record: any) => {
+    if (priceEditPreparing.value) return;
+    priceEditPreparing.value = true;
+    try {
+      isEditMode.value = true;
+      editingPriceRecord.value = record;
+
+      Object.assign(basicInfoForm, {
+        costItem: record.costItem || '',
+        costUnit: record.costUnit || '',
+        currency: record.currency || '',
+        chargingCondition: record.chargingCondition || '无',
+      });
+
+      // 列表行已带 factors/details，先本地回填并立刻打开弹窗
+      billingFactorsData.value = normalizeBillingFactorsFromApi(record?.factors);
+      replacePriceListData(mapSalesProductDetailsToPriceListRows(record?.details || []));
+      coercePriceListRowsFactorCells();
+      capturePriceListCustomerCodesSnapshot();
+      clearPriceListChecked();
+
+      // 列表行常无 details：先开基础信息保证即时反馈，数据就绪后再切价格表
+      priceDrawerActiveTab.value = 'basic';
+      priceModalVisible.value = true;
+
+      await Promise.all([
+        ensureSalesPriceDictLoaded(),
+        loadBillingFactorSelectOptions(),
+      ]);
+
+      applyPriceEditSourceRecord(record);
+      normalizePriceListFormulaDisplays();
+      await activateEditPriceListTab();
+
+      // 列表默认不含 details：按需拉单条完整配置
+      const hasLocalDetails = Array.isArray(record?.details) && record.details.length > 0;
+      if (hasLocalDetails || record?.id == null) return;
+      try {
+        const matched = await getSalesProductPrice(record.id);
+        if (!priceModalVisible.value || editingPriceRecord.value?.id !== record?.id) return;
+        if (matched) {
+          applyPriceEditSourceRecord(matched);
+          await activateEditPriceListTab();
+        }
+      } catch (e: any) {
+        Message.warning(e?.message || '加载最新价格配置失败，已使用列表数据回填');
+      }
+    } finally {
+      priceEditPreparing.value = false;
+    }
   };
 
   // 删除价格配置确认弹窗
@@ -3491,54 +4082,158 @@
     }
   }
 
-  // 产品卖价表格列配置（接口字段多为字典编码，展示用 dictLabelByType / 因素用 pricingFactorColumnLabel）
-  const priceColumns = ref([
-    { title: t('channel.salesProducts.table.providers.serialNo'), dataIndex: 'serialNumber', width: 80, align: 'center' },
-    { 
-      title: t('channel.salesProducts.table.price.status'), 
-      dataIndex: 'status', 
-      width: 100, 
+  // 产品卖价列表（TablePro）：字典编码展示用 slot
+  const priceListTableRef = ref<any>(null);
+  const priceTableContainerRef = ref<HTMLElement | null>(null);
+  const priceListTableHeight = ref(400);
+  let priceListResizeObserver: ResizeObserver | null = null;
+  let priceListHeightRaf = 0;
+
+  function applyPriceListTableHeight(h: number, force = false) {
+    if (h < 160) return;
+    if (!force && Math.abs(h - priceListTableHeight.value) < 2) return;
+    priceListTableHeight.value = h;
+    // 只改高度，避免强制 recalculate 造成切产品卡顿
+    priceListTableRef.value?.setHeight?.(h);
+  }
+
+  function syncPriceListTableHeight(force = false) {
+    const el = priceTableContainerRef.value;
+    if (!el) return;
+    const h = Math.floor(el.clientHeight || el.getBoundingClientRect().height);
+    applyPriceListTableHeight(h, force);
+  }
+
+  function setupPriceListResizeObserver() {
+    if (priceListResizeObserver) return;
+    if (priceListHeightRaf) {
+      cancelAnimationFrame(priceListHeightRaf);
+      priceListHeightRaf = 0;
+    }
+    const el = priceTableContainerRef.value;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    priceListResizeObserver = new ResizeObserver(() => {
+      if (priceListHeightRaf) cancelAnimationFrame(priceListHeightRaf);
+      priceListHeightRaf = requestAnimationFrame(() => {
+        priceListHeightRaf = 0;
+        syncPriceListTableHeight();
+      });
+    });
+    priceListResizeObserver.observe(el);
+    nextTick(() => syncPriceListTableHeight(true));
+  }
+
+  const priceColumns = computed(() => [
+    {
+      field: 'serialNumber',
+      title: t('channel.salesProducts.table.providers.serialNo'),
+      width: 72,
       align: 'center',
-      slotName: 'status'
     },
     {
+      field: 'status',
+      title: t('channel.salesProducts.table.price.status'),
+      width: 100,
+      align: 'center',
+      slots: { default: 'status' },
+    },
+    {
+      field: 'costItem',
       title: t('channel.salesProducts.drawer.form.costItem'),
-      dataIndex: 'costItem',
-      width: 140,
-      slotName: 'costItemCell',
+      minWidth: 120,
+      slots: { default: 'costItemCell' },
     },
     {
+      field: 'costUnit',
       title: t('channel.salesProducts.drawer.form.costUnit'),
-      dataIndex: 'costUnit',
       width: 100,
       align: 'center',
-      slotName: 'costUnitCell',
+      slots: { default: 'costUnitCell' },
     },
     {
+      field: 'currency',
       title: t('channel.salesProducts.drawer.form.currency'),
-      dataIndex: 'currency',
       width: 100,
       align: 'center',
-      slotName: 'currencyCell',
+      slots: { default: 'currencyCell' },
     },
     {
+      field: 'billingFactors',
       title: t('channel.salesProducts.drawer.section.billingFactors'),
-      dataIndex: 'billingFactors',
-      width: 200,
-      ellipsis: true,
-      tooltip: true,
-      slotName: 'billingFactorsCell',
+      minWidth: 200,
+      showOverflow: true,
+      slots: { default: 'billingFactorsCell' },
     },
-    { title: '修改时间', dataIndex: 'modifyTime', width: 180 },
-    { title: '修改人', dataIndex: 'modifier', width: 100 },
-    { 
-      title: t('channel.salesProducts.table.providers.actions'), 
-      width: 150, 
-      align: 'center', 
+    {
+      field: 'modifyTime',
+      title: '修改时间',
+      width: 180,
+    },
+    {
+      field: 'modifier',
+      title: '修改人',
+      width: 100,
+    },
+    {
+      field: 'action',
+      title: t('channel.salesProducts.table.providers.actions'),
+      width: 120,
+      align: 'center',
       fixed: 'right',
-      slotName: 'operations'
+      slots: { default: 'operations' },
     },
   ]);
+
+  // 高度走 setHeight，数据走 reloadData，避免 computed 随 height/data 重建触发 TablePro 重绑
+  const priceListTableProps = computed(() => ({
+    columns: priceColumns.value,
+    showPager: false,
+    showToolbar: false,
+    showIndex: false,
+    isCellSort: false,
+    isColumnsDrag: false,
+    useForm: false,
+    autoHeight: false,
+    keepSource: true,
+    size: 'small',
+    tableConfig: { height: 400 },
+    toolbarConfig: { setting: false, enabled: false },
+    rowConfig: { isHover: true, keyField: 'id' },
+  }));
+
+  watch(
+    priceTableData,
+    (rows) => {
+      nextTick(() => {
+        priceListTableRef.value?.reloadData?.(rows || []);
+      });
+    },
+    { deep: false },
+  );
+
+  // 仅在卖价 tab 可见时监听高度。切走用 display:none 保留表格实例，回来重算布局即可
+  watch(
+    () => [activeTab.value, selectedProduct.value] as const,
+    ([tab, productId]) => {
+      if (tab !== 'price' || productId == null) {
+        priceListResizeObserver?.disconnect();
+        priceListResizeObserver = null;
+        return;
+      }
+      nextTick(() => {
+        setupPriceListResizeObserver();
+        syncPriceListTableHeight(true);
+        const grid = priceListTableRef.value?.xGrid;
+        const visible = grid?.getTableData?.()?.fullData;
+        // display:none 期间表格可能丢行，有缓存就补回去，避免切回看到空表
+        if (priceTableData.value.length > 0 && (!Array.isArray(visible) || visible.length === 0)) {
+          priceListTableRef.value?.reloadData?.(priceTableData.value);
+        }
+        grid?.recalculate?.(true);
+      });
+    },
+    { immediate: true },
+  );
 </script>
 
 <template>
@@ -3569,33 +4264,27 @@
         }"
       >
         <template #node-second-row-extra="{ nodeData }">
-          <table class="product-second-row-table">
-            <tr>
-              <td class="product-row-left">
-                <span class="create-time">创建: {{ nodeData?.createTime }}</span>
-              </td>
-              <td class="product-row-right">
-                <span
-                  class="switch-swipe-wrapper"
-                  @click.capture.stop="() => {
-                    const product = productList.find((p: any) => p.id === nodeData?.id);
-                    if (product) { product.isActive = !product.isActive; handleToggleProduct(product); }
-                  }"
-                  @touchstart.passive="onStatusSwipeStart"
-                  @touchend="(e) => onProductSwitchSwipeEnd(nodeData, e)"
-                >
-                  <a-switch
-                    :model-value="nodeData?.isActive"
-                    size="small"
-                    type="circle"
-                    class="product-active-switch"
-                    checked-color="#00b42a"
-                    unchecked-color="#f53f3f"
-                  />
-                </span>
-              </td>
-            </tr>
-          </table>
+          <div class="product-second-row">
+            <span class="modify-time">修改: {{ nodeData?.updateTime || '--' }}</span>
+            <span
+              class="switch-swipe-wrapper"
+              @click.capture.stop="() => {
+                const product = productList.find((p: any) => p.id === nodeData?.id);
+                if (product) { product.isActive = !product.isActive; handleToggleProduct(product); }
+              }"
+              @touchstart.passive="onStatusSwipeStart"
+              @touchend="(e) => onProductSwitchSwipeEnd(nodeData, e)"
+            >
+              <a-switch
+                :model-value="nodeData?.isActive"
+                size="small"
+                type="circle"
+                class="product-active-switch"
+                checked-color="#00b42a"
+                unchecked-color="#f53f3f"
+              />
+            </span>
+          </div>
         </template>
       </CustomLeftMenu>
     </div>
@@ -3675,6 +4364,16 @@
           <span class="context-label">{{ t('channel.salesProducts.context.group') }}：</span>
           <span class="context-value">{{ selectedProductContext.groupName }}</span>
         </span>
+        <span class="context-divider">|</span>
+        <span class="context-item">
+          <span class="context-label">{{ t('channel.salesProducts.context.updateTime') }}：</span>
+          <span class="context-value">{{ selectedProductContext.updateTime }}</span>
+        </span>
+        <span class="context-divider">|</span>
+        <span class="context-item">
+          <span class="context-label">{{ t('channel.salesProducts.context.updateBy') }}：</span>
+          <span class="context-value">{{ selectedProductContext.updateBy }}</span>
+        </span>
         <a-tag
           v-if="(activeTab === 'config' && configFormDirty) || (activeTab === 'rules' && rulesFormDirty)"
           color="orangered"
@@ -3707,8 +4406,9 @@
         </div>
       </div>
 
-      <!-- 产品卖价tab内容 -->
-      <div v-else-if="activeTab === 'price'" class="price-section">
+      <template v-else>
+      <!-- 产品卖价：切走不卸载，避免回来空表再等接口 -->
+      <div v-show="activeTab === 'price'" class="price-section">
         <div class="price-header">
           <div class="version-info">
             {{ t('channel.salesProducts.price.effectiveVersion', { version: effectiveVersion }) }}
@@ -3750,71 +4450,71 @@
             </a-button>
           </div>
         </div>
-        <div class="price-table-container">
-          <a-table
-            :data="priceTableData"
-            :columns="priceColumns"
-            :pagination="false"
-            :bordered="false"
-            class="price-table"
+        <div ref="priceTableContainerRef" class="price-table-container">
+          <a-spin :loading="priceListLoading" class="price-list-spin">
+          <TablePro
+            ref="priceListTableRef"
+            v-bind="priceListTableProps"
+            class="price-list-table-pro"
           >
-            <template #status="{ record }">
+            <template #status="{ row }">
               <div
                 class="switch-swipe-wrapper"
                 @touchstart.passive="onStatusSwipeStart"
-                @touchend="(e) => onStatusSwipeEnd(record, e)"
+                @touchend="(e) => onStatusSwipeEnd(row, e)"
               >
                 <a-switch
-                  v-model="record.status"
+                  v-model="row.status"
                   type="circle"
                   size="small"
                   class="product-active-switch"
                   checked-color="#00b42a"
                   unchecked-color="#f53f3f"
-                  @change="() => handleTogglePriceStatus(record)"
+                  @change="() => handleTogglePriceStatus(row)"
                 />
               </div>
             </template>
-            <template #costItemCell="{ record }">
-              {{ dictLabelByType('fee_item', record.costItem) }}
+            <template #costItemCell="{ row }">
+              {{ dictLabelByType('fee_item', row.costItem) }}
             </template>
-            <template #costUnitCell="{ record }">
-              {{ dictLabelByType('cost_unit', record.costUnit) }}
+            <template #costUnitCell="{ row }">
+              {{ dictLabelByType('cost_unit', row.costUnit) }}
             </template>
-            <template #currencyCell="{ record }">
-              {{ dictLabelByType('currency', record.currency) }}
+            <template #currencyCell="{ row }">
+              {{ dictLabelByType('currency', row.currency) }}
             </template>
-            <template #billingFactorsCell="{ record }">
-              {{ formatPriceTableBillingFactors(record) }}
+            <template #billingFactorsCell="{ row }">
+              {{ formatPriceTableBillingFactors(row) }}
             </template>
-            <template #operations="{ record }">
+            <template #operations="{ row }">
               <a-space>
-                  <a-button
-                    type="text"
-                    size="small"
-                    class="action-btn"
-                    @click="handleEditPrice(record)"
-                    :title="t('channel.salesProducts.actions.edit')"
-                  >
+                <a-button
+                  type="text"
+                  size="small"
+                  class="action-btn"
+                  :title="t('channel.salesProducts.actions.edit')"
+                  @click="handleEditPrice(row)"
+                >
                   <icon-edit />
                 </a-button>
-                  <a-button
-                    type="text"
-                    size="small"
-                    class="action-btn delete-btn"
-                    @click="handleDeletePrice(record)"
-                    :title="t('channel.salesProducts.actions.delete')"
-                  >
+                <a-button
+                  type="text"
+                  size="small"
+                  class="action-btn delete-btn"
+                  :title="t('channel.salesProducts.actions.delete')"
+                  @click="handleDeletePrice(row)"
+                >
                   <icon-delete />
                 </a-button>
               </a-space>
             </template>
-          </a-table>
+          </TablePro>
+          </a-spin>
         </div>
       </div>
 
       <!-- 排货规则tab内容 -->
-      <div v-else-if="activeTab === 'rules'" class="shipping-rules-section">
+      <div v-if="mountedTabs.rules" v-show="activeTab === 'rules'" class="shipping-rules-section">
         <div class="shipping-rules-header">
           <div class="scheme-selection">
             <div class="scheme-title">{{ t('channel.salesProducts.rules.schemeTitle') }}</div>
@@ -3842,6 +4542,7 @@
             </a-button>
           </div>
         </div>
+        <a-spin :loading="rulesLoading" class="tab-pane-spin">
         <div class="shipping-rules-content">
           <div class="shipping-provider-table-container">
             <table class="shipping-provider-table">
@@ -3929,10 +4630,11 @@
             </table>
           </div>
         </div>
+        </a-spin>
       </div>
 
       <!-- 对客说明 tab -->
-      <div v-else-if="activeTab === 'customerGuide'" class="customer-guide-section">
+      <div v-if="mountedTabs.customerGuide" v-show="activeTab === 'customerGuide'" class="customer-guide-section">
         <MarkdownDocPanel
           v-if="selectedProduct != null"
           ref="customerGuidePanelRef"
@@ -3946,102 +4648,104 @@
       </div>
 
       <!-- 发布记录tab内容 -->
-      <div v-else-if="activeTab === 'records'" class="publish-records-section">
+      <div v-if="mountedTabs.records" v-show="activeTab === 'records'" class="publish-records-section">
+        <div class="publish-records-toolbar">
+          <SlidingTabs
+            :model-value="publishRecordTab"
+            :items="publishRecordTabItems"
+            @change="handleChangePublishRecordTab"
+          />
+          <span class="publish-records-hint">
+            {{ t('channel.salesProducts.publish.recordsHint') }}
+          </span>
+        </div>
+
+        <a-spin :loading="recordsLoading" class="tab-pane-spin">
         <div class="publish-records-container">
-          <!-- 左侧面板 -->
           <div class="publish-records-left">
-            <div class="publish-tabs-container">
-              <SlidingTabs
-                :model-value="publishRecordTab"
-                :items="publishRecordTabItems"
-                @change="handleChangePublishRecordTab"
-              />
-            </div>
-            <div class="user-info">
-            </div>
-            <div class="version-list">
-              <div
+            <div v-if="currentListData.length" class="version-list">
+              <button
                 v-for="(item, index) in currentListData"
                 :key="item.id"
+                type="button"
                 :class="['version-item', { active: publishRecordActiveIndex === index }]"
                 @click="handleChangePublishRecordIndex(index)"
               >
                 <div class="version-item-header">
-                  <span class="version-item-number">版本号：{{ item.version }}</span>
+                  <span class="version-item-number">
+                    {{ t('channel.salesProducts.publish.versionLabel', { version: item.version }) }}
+                  </span>
                   <span
-                    :class="[
-                      'version-item-type',
-                      item.status === '生效' ? 'type-effective' : item.status === '回滚' ? 'type-rollback' : 'type-invalid'
-                    ]"
+                    :class="['version-item-badge', publishRecordStatusMeta(item.status).className]"
                   >
-                    {{ item.status === '生效' ? '发布' : item.status === '回滚' ? '回滚' : item.status }}
+                    {{ publishRecordStatusMeta(item.status).label }}
                   </span>
                 </div>
                 <div class="version-item-footer">
-                  <span>{{ item.publishUser }}</span>
-                  <span>生效：{{ item.publishTime }}</span>
+                  <span class="version-item-user">{{ item.publishUser || '--' }}</span>
+                  <span class="version-item-time">{{ item.publishTime || '--' }}</span>
                 </div>
-              </div>
+              </button>
             </div>
+            <a-empty
+              v-else
+              class="publish-records-empty"
+              :description="t('channel.salesProducts.publish.emptyList')"
+            />
           </div>
 
-          <!-- 右侧面板 -->
           <div class="publish-records-right">
-            <div class="right-header">
-              <a-button
-                type="text"
-                @click="handleRollbackToVersion"
-                class="rollback-btn"
-              >
-                {{ t('channel.salesProducts.actions.rollback') }}
-              </a-button>
-              <div class="version-notes">
-                <span>{{ t('channel.salesProducts.publish.versionRemark') }}</span>
-                <a-popover
-                  :content="currentPublishRecord.description || t('channel.salesProducts.publish.noRemark')"
-                  placement="top-start"
-                >
-                  <template #content>
-                    {{ currentPublishRecord.description || t('channel.salesProducts.publish.noRemark') }}
-                  </template>
-                  <template #default>
-                    <icon-question-circle-fill
-                      class="notes-icon"
-                      style="color: #faad14; font-size: 18px"
-                    />
-                  </template>
-                </a-popover>
-                <template v-if="publishRecordTab === 'price' && currentPublishRecord.aiAnalysisReport">
-                  <span class="ai-report-notes-label">{{ t('channel.salesProducts.ai.historyReport') }}</span>
+            <template v-if="hasCurrentPublishRecord">
+              <div class="right-header">
+                <div class="version-notes">
+                  <span>{{ t('channel.salesProducts.publish.versionRemark') }}</span>
                   <a-popover placement="top-start">
                     <template #content>
-                      <pre class="ai-history-pre">{{ currentPublishRecord.aiAnalysisReport }}</pre>
+                      {{ currentPublishRecord.description || t('channel.salesProducts.publish.noRemark') }}
                     </template>
                     <template #default>
-                      <icon-question-circle-fill
-                        class="notes-icon"
-                        style="color: var(--app-primary-color, #2d8c8c); font-size: 18px"
-                      />
+                      <icon-question-circle-fill class="notes-icon notes-icon--remark" />
                     </template>
                   </a-popover>
-                </template>
+                  <template v-if="publishRecordTab === 'price' && currentPublishRecord.aiAnalysisReport">
+                    <span class="ai-report-notes-label">{{ t('channel.salesProducts.ai.historyReport') }}</span>
+                    <a-popover placement="top-start">
+                      <template #content>
+                        <pre class="ai-history-pre">{{ currentPublishRecord.aiAnalysisReport }}</pre>
+                      </template>
+                      <template #default>
+                        <icon-question-circle-fill class="notes-icon notes-icon--ai" />
+                      </template>
+                    </a-popover>
+                  </template>
+                </div>
+                <a-button
+                  size="small"
+                  class="rollback-btn"
+                  :disabled="!canRollbackPublishRecord"
+                  @click="handleRollbackToVersion"
+                >
+                  {{ t('channel.salesProducts.actions.rollback') }}
+                </a-button>
               </div>
-            </div>
-            <div class="code-content">
-              <a-textarea
-                :model-value="formattedJsonContent"
-                :readonly="true"
-                :auto-size="{ minRows: 20, maxRows: 30 }"
-                class="w-100%"
-                style="font-family: Menlo, Consolas, monospace; font-size: 12px;"
-              />
-            </div>
+              <div class="code-content">
+                <a-spin :loading="publishRecordContentLoading" class="publish-record-content-spin">
+                  <pre class="code-pre">{{ publishRecordContentLoading ? '' : (formattedJsonContent || t('channel.salesProducts.publish.emptyContent')) }}</pre>
+                </a-spin>
+              </div>
+            </template>
+            <a-empty
+              v-else
+              class="publish-records-empty"
+              :description="t('channel.salesProducts.publish.emptyDetail')"
+            />
           </div>
         </div>
+        </a-spin>
       </div>
 
       <!-- 表单内容 -->
-      <div v-else-if="activeTab === 'config'" class="form-section">
+      <div v-if="mountedTabs.config" v-show="activeTab === 'config'" class="form-section">
         <div class="form-container">
           <!-- 第一行 -->
           <div class="form-row">
@@ -4301,6 +5005,7 @@
 
         </div>
       </div>
+      </template>
     </div>
 
     <!-- 排货判断条件编辑 -->
@@ -4350,6 +5055,8 @@
       :title="isEditMode ? t('channel.salesProducts.actions.edit') : t('channel.salesProducts.actions.add')"
       width="1400px"
       :footer="false"
+      modal-class="sales-price-config-modal"
+      :body-style="{ overflow: 'visible' }"
       @cancel="handleCancelPriceDrawer"
     >
       <div class="price-modal-content">
@@ -4367,11 +5074,14 @@
           </div>
         </div>
 
+        <div class="price-modal-pane">
         <!-- 基础信息tab -->
-        <div v-if="priceDrawerActiveTab === 'basic'" class="basic-info-content">
+        <div
+          v-show="priceDrawerActiveTab === 'basic'"
+          class="basic-info-content"
+        >
         <!-- 表单部分 -->
         <div class="form-section-drawer">
-          <div class="form-section-title">{{ t('channel.salesProducts.drawer.section.feeBasic') }}</div>
           <a-form :model="basicInfoForm" layout="vertical" class="price-form">
             <a-row :gutter="24">
               <a-col :span="8">
@@ -4456,16 +5166,12 @@
             </a-row>
             <a-row :gutter="24">
               <a-col :span="24">
-                <a-form-item>
-                  <template #label>
-                    <span class="label-with-tip">
-                      {{ t('channel.salesProducts.drawer.form.chargingCondition') }}
-                      <a-tooltip :content="t('channel.salesProducts.drawer.tip.chargingCondition')">
-                        <icon-question-circle class="tip-icon" />
-                      </a-tooltip>
-                    </span>
-                  </template>
-                  <BillingConditionEditor v-model="basicInfoForm.chargingCondition" />
+                <a-form-item hide-label class="charging-condition-form-item">
+                  <BillingConditionEditor
+                    v-model="basicInfoForm.chargingCondition"
+                    :label="t('channel.salesProducts.drawer.form.chargingCondition')"
+                    :label-tip="t('channel.salesProducts.drawer.tip.chargingCondition')"
+                  />
                 </a-form-item>
               </a-col>
             </a-row>
@@ -4495,106 +5201,157 @@
                 size="small"
                 @click="handleGeneratePriceList"
               >
-                <icon-plus />
+                <icon-sync />
                 {{ t('channel.salesProducts.drawer.footer.syncPriceList') }}
               </a-button>
             </a-space>
           </div>
-          <div class="billing-factors-table">
-            <table class="factors-table">
-              <thead>
-                <tr>
-                  <th style="width: 80px">{{ t('channel.salesProducts.drawer.table.billingFactors.serialNo') }}</th>
-                  <th style="width: 200px">{{ t('channel.salesProducts.drawer.table.billingFactors.factor') }}</th>
-                  <th>{{ t('channel.salesProducts.drawer.table.billingFactors.factorValues') }}</th>
-                  <th style="width: 100px">{{ t('channel.salesProducts.drawer.table.billingFactors.actions') }}</th>
-                </tr>
-              </thead>
-              <tbody class="billing-factors-tbody">
-                <tr
-                  v-for="(row, index) in billingFactorsData"
-                  :key="row.id"
+          <div ref="billingFactorsTableWrapRef" class="billing-factors-table-wrap">
+            <TablePro
+              ref="billingFactorsTableRef"
+              v-bind="billingFactorsTableProps"
+              class="billing-factors-table-pro"
+            >
+              <template #sort>
+                <div class="billing-factor-sort-cell">
+                  <icon-drag-arrow />
+                </div>
+              </template>
+              <template #factor="{ row }">
+                <a-select
+                  v-model="row.factor"
+                  :placeholder="t('channel.salesProducts.form.placeholder.select')"
+                  :loading="salesPriceDictLoading"
+                  size="mini"
+                  style="width: 100%"
+                  :fallback-option="pricingFactorFallbackOption"
+                  @change="(val: string) => handleBillingFactorChange(row, val)"
                 >
-                  <td>
-                    <div class="serial-number-cell">
-                      <icon-drag-arrow class="drag-icon" />
-                      <span>{{ row.serialNumber }}</span>
-                    </div>
-                  </td>
-                  <td>
-                    <a-select
-                      v-model="row.factor"
-                      :placeholder="t('channel.salesProducts.form.placeholder.select')"
-                      :loading="salesPriceDictLoading"
+                  <a-option
+                    v-for="option in factorOptions"
+                    :key="option.value"
+                    :value="option.value"
+                    :label="option.label"
+                    :disabled="isBillingFactorOptionDisabled(option.value, row)"
+                  >
+                    {{ option.label }}
+                  </a-option>
+                </a-select>
+              </template>
+              <template #factorValues="{ row }">
+                <div
+                  v-for="preview in [getFactorValuePreview(row)]"
+                  :key="row.id"
+                  class="factor-values-cell"
+                >
+                  <template v-if="preview.values.length">
+                    <a-tag
+                      v-for="(value, valueIndex) in preview.visible"
+                      :key="`${row.id}-v-${valueIndex}`"
                       size="small"
-                      style="width: 100%"
-                      :fallback-option="pricingFactorFallbackOption"
+                      closable
+                      class="factor-value-tag"
+                      @close="handleDeleteFactorValue(row, valueIndex)"
                     >
-                      <a-option
-                        v-for="option in factorOptions"
-                        :key="option.value"
-                        :value="option.value"
-                        :label="option.label"
-                      >
-                        {{ option.label }}
-                      </a-option>
-                    </a-select>
-                  </td>
-                  <td>
-                    <div class="factor-values-cell">
-                      <a-tag
-                        v-for="(value, valueIndex) in row.factorValues"
-                        :key="valueIndex"
-                        closable
-                        @close="handleDeleteFactorValue(row, valueIndex)"
-                        style="margin-right: 8px; margin-bottom: 4px"
-                      >
-                        {{ formatFactorValueTagDisplay(row.factor, value) }}
+                      {{ formatFactorValueTagDisplay(row.factor, value) }}
+                    </a-tag>
+                    <a-popover
+                      v-if="preview.extraCount > 0"
+                      trigger="click"
+                      position="bl"
+                      :content-style="{ padding: '10px 12px', maxWidth: '420px' }"
+                    >
+                      <a-tag size="small" class="factor-value-more" tabindex="0">
+                        +{{ preview.extraCount }}
                       </a-tag>
-                      <a-button
-                        type="text"
-                        size="small"
-                        @click="handleAddFactorValue(row)"
-                        class="add-value-btn"
-                      >
-                        <icon-plus />
-                      </a-button>
-                    </div>
-                  </td>
-                  <td>
-                    <a-button
-                      type="text"
-                      size="small"
-                      status="danger"
-                      @click="handleDeleteBillingFactor(index)"
-                    >
-                      <icon-delete />
-                    </a-button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <template #content>
+                        <div class="factor-values-popover">
+                          <div class="factor-values-popover__title">
+                            已选 {{ preview.values.length }} 项
+                          </div>
+                          <div class="factor-values-popover__list">
+                            <a-tag
+                              v-for="(value, valueIndex) in preview.values"
+                              :key="`${row.id}-all-${valueIndex}`"
+                              size="small"
+                              closable
+                              @close="handleDeleteFactorValue(row, valueIndex)"
+                            >
+                              {{ formatFactorValueTagDisplay(row.factor, value) }}
+                            </a-tag>
+                          </div>
+                        </div>
+                      </template>
+                    </a-popover>
+                  </template>
+                  <span v-else class="factor-values-empty">未配置</span>
+                  <a-button
+                    type="text"
+                    size="mini"
+                    class="add-value-btn"
+                    @click="handleAddFactorValue(row)"
+                  >
+                    <icon-plus />
+                  </a-button>
+                </div>
+              </template>
+              <template #action="{ row }">
+                <a-button
+                  type="text"
+                  size="mini"
+                  status="danger"
+                  class="row-action-btn"
+                  @click="handleDeleteBillingFactor(row)"
+                >
+                  <icon-delete />
+                </a-button>
+              </template>
+            </TablePro>
           </div>
         </div>
       </div>
 
-        <!-- 价格表tab -->
+        <!-- 价格表tab：Handsontable 虚拟渲染，高度跟基础信息对齐 -->
         <div
           v-if="priceDrawerActiveTab === 'priceList'"
-          :key="`price-list-${priceListData.length}-${priceTableHeaders.length}`"
           class="price-list-content"
         >
         <div class="price-list-header">
-          <div class="price-list-title">
-            {{
-              dictLabelByType('fee_item', basicInfoForm.costItem) ||
-                t('channel.salesProducts.drawer.section.priceListTitle')
-            }}
+          <div class="price-list-header__meta">
+            <span class="price-list-badge">
+              {{
+                dictLabelByType('fee_item', basicInfoForm.costItem) ||
+                  t('channel.salesProducts.drawer.section.priceListTitle')
+              }}
+            </span>
             <span class="price-list-hint">{{ t('channel.salesProducts.drawer.priceList.hint') }}</span>
+            <span v-if="priceListData.length" class="price-list-count">
+              {{ priceListData.length }} 行
+              <template v-if="priceListSelectedIds.length"> · 已选 {{ priceListSelectedIds.length }}</template>
+            </span>
           </div>
           <div class="price-list-actions">
+            <label class="price-list-merge">
+              <span>合并相同值</span>
+              <a-switch v-model="priceListMergeSame" size="small" />
+            </label>
+            <span class="price-list-actions__sep" aria-hidden="true"></span>
+            <a-button
+              size="small"
+              :disabled="!priceListData.length"
+              @click="selectAllPriceListRows"
+            >
+              全选
+            </a-button>
+            <a-button
+              size="small"
+              :disabled="!priceListSelectedIds.length"
+              @click="clearAllPriceListRowsSelection"
+            >
+              取消全选
+            </a-button>
+            <span class="price-list-actions__sep" aria-hidden="true"></span>
             <a-button
-              type="secondary"
               size="small"
               :disabled="!priceListSelectedIds.length"
               @click="openBatchFillModal(false)"
@@ -4602,7 +5359,6 @@
               {{ t('channel.salesProducts.drawer.priceList.batchFill') }}
             </a-button>
             <a-button
-              type="secondary"
               size="small"
               :disabled="!priceListSelectedIds.length"
               @click="openBatchFillModal(true)"
@@ -4610,30 +5366,19 @@
               {{ t('channel.salesProducts.drawer.priceList.batchFillEmpty') }}
             </a-button>
             <a-button
-              type="secondary"
               size="small"
               :disabled="!priceListSelectedIds.length"
               @click="handleCopyPrevRowPrices"
             >
               {{ t('channel.salesProducts.drawer.priceList.copyPrev') }}
             </a-button>
-            <a-button
-              type="secondary"
-              size="small"
-              @click="handleExportPriceList"
-            >
-              导出价格
-            </a-button>
-            <a-button
-              type="secondary"
-              size="small"
-              @click="handleImportPriceList"
-            >
-              导入价格
-            </a-button>
+            <span class="price-list-actions__sep" aria-hidden="true"></span>
+            <a-button size="small" @click="handleExportPriceList">导出</a-button>
+            <a-button size="small" @click="handleImportPriceList">导入</a-button>
             <a-button
               type="primary"
               size="small"
+              class="app-btn-primary-soft"
               @click="handleSavePriceList"
             >
               {{ t('channel.salesProducts.actions.save') }}
@@ -4641,85 +5386,18 @@
           </div>
         </div>
         <div class="price-list-table-container">
-          <table class="price-list-table">
-            <thead>
-              <tr>
-                <th style="width: 44px">
-                  <a-checkbox
-                    :model-value="priceListAllSelected"
-                    @change="toggleSelectAllPriceRows"
-                  />
-                </th>
-                <th
-                  v-for="header in priceTableHeaders"
-                  :key="header.key"
-                  style="width: 120px"
-                >
-                  {{ header.label }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(row, index) in priceListData"
-                :key="row.id"
-              >
-                <td class="price-row-check">
-                  <a-checkbox
-                    :model-value="priceListSelectedIds.includes(row.id)"
-                    @change="(v: boolean | Event) => toggleSelectPriceRow(row.id, v)"
-                  />
-                </td>
-                <template v-for="header in priceTableHeaders" :key="header.key">
-                  <td
-                    v-if="header.key.startsWith('factor_')"
-                    :rowspan="getFactorRowSpan(header.key, index) > 0 ? getFactorRowSpan(header.key, index) : undefined"
-                    :style="getFactorRowSpan(header.key, index) > 0 ? {} : { display: 'none' }"
-                    class="factor-cell"
-                  >
-                    {{
-                      formatPriceTableFactorCell(
-                        header.factorIndex,
-                        String((row as any)[header.key] ?? '')
-                      )
-                    }}
-                  </td>
-                  <td
-                    v-else-if="header.key === 'calculationFormula'"
-                  >
-                    <a-select
-                      v-model="row.calculationFormula"
-                      placeholder="请选择计算公式"
-                      :loading="salesPriceDictLoading"
-                      size="small"
-                      style="width: 100%"
-                    >
-                      <a-option
-                        v-for="option in calculationFormulaOptions"
-                        :key="option.value"
-                        :value="option.value"
-                      >
-                        {{ option.label }}
-                      </a-option>
-                    </a-select>
-                  </td>
-                  <td
-                    v-else-if="header.isCustomer"
-                  >
-                    <a-input-number
-                      v-model="(row as any)[header.key]"
-                      size="small"
-                      style="width: 100%"
-                      :min="0"
-                      :precision="2"
-                    />
-                  </td>
-                </template>
-              </tr>
-            </tbody>
-          </table>
+          <PriceListHotTable
+            ref="priceListHotRef"
+            :key="priceListHotTableKey"
+            :columns="priceListHotColumns"
+            :data="priceListData"
+            :height="PRICE_LIST_HOT_HEIGHT"
+            :merge-same-values="priceListMergeSame"
+            @selection-change="onPriceListSelectionChange"
+          />
         </div>
       </div>
+      </div>
 
       </div>
 
@@ -4734,7 +5412,7 @@
             type="primary"
             @click="handleGeneratePriceList"
           >
-            <icon-plus />
+            <icon-sync />
             {{ t('channel.salesProducts.drawer.footer.syncPriceList') }}
           </a-button>
           <a-button
@@ -5577,35 +6255,27 @@
     flex-direction: column;
   }
 
-  /* 第二行表格：创建时间对齐 node-title，开关对齐 node-actions-cell */
-  .product-second-row-table {
+  /* 第二行：修改时间 + 开关（卡片高度由 CustomLeftMenu 固定，内容垂直居中） */
+  .product-second-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
     width: 100%;
-    border-collapse: collapse;
-    table-layout: fixed;
+    height: 16px;
+    padding-left: 24px;
+    box-sizing: border-box;
   }
 
-  .product-row-left {
-    text-align: left;
-    padding: 0;
-    padding-left: 24px; /* 与 node-title 左侧对齐：node-number(min-width 16px + margin-right 8px) */
-    vertical-align: middle;
-    width: auto;
-    font-size: 12px;
+  .modify-time {
+    flex: 1;
+    min-width: 0;
+    font-size: 10px;
+    line-height: 16px;
     color: var(--color-text-3);
-
-    .create-time {
-      font-size: 10px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .product-row-right {
-    text-align: right;
-    padding: 0;
-    width: 30px; /* 与 CustomLeftMenu 的 node-actions-cell 同宽 */
-    vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   /* 开关：启用-绿色，停用-红色（与应用列表一致） */
@@ -5625,7 +6295,7 @@
     text-align: left;
   }
 
-  :deep(.tree-node.selected .create-time) {
+  :deep(.tree-node.selected .modify-time) {
     color: #86909c !important;
   }
 
@@ -5856,24 +6526,43 @@
 
   .price-table-container {
     flex: 1;
-    overflow: auto;
-    
-    .price-table {
-      :deep(.arco-table-th) {
-        background-color: var(--color-fill-1);
-        font-weight: 500;
+    min-height: 0;
+    overflow: hidden;
+
+    .price-list-spin {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .price-list-table-pro {
+      width: 100%;
+      min-height: 0;
+
+      :deep(.table-pro),
+      :deep(.table-pro-surface) {
+        height: 100%;
       }
-      
-      :deep(.arco-table-td) {
-        padding: 12px 16px;
+
+      :deep(.vxe-toolbar) {
+        display: none !important;
+        height: 0 !important;
+        min-height: 0 !important;
+        padding: 0 !important;
+        overflow: hidden !important;
       }
-      
+
+      :deep(.vxe-grid) {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+
       .action-btn {
         color: var(--app-primary-color);
 
         &:hover {
-          color: #1a6b6b;
-          background-color: #f0f9f9;
+          color: var(--app-primary-color);
+          background: color-mix(in srgb, var(--app-primary-color) 8%, #fff);
         }
 
         &.delete-btn {
@@ -5895,30 +6584,44 @@
     }
   }
 
-  // 抽屉相关样式
+  // 抽屉相关样式：胶囊 Tab
   .drawer-title {
     width: 100%;
+    margin: 0 0 10px;
     
     .drawer-tabs {
       display: flex;
+      align-items: center;
       gap: 0;
-      border-bottom: 1px solid #e8e8e8;
+      width: 100%;
+      border-bottom: 1px solid var(--color-border-2);
       
       .drawer-tab-item {
-        padding: 8px 24px;
+        height: 40px;
+        padding: 0 20px;
+        margin-bottom: -1px;
+        border: none;
+        border-bottom: 2px solid transparent;
+        border-radius: 0;
+        background: transparent;
         cursor: pointer;
-        border-bottom: 3px solid transparent;
-        transition: all 0.3s;
-        color: var(--color-text-3);
+        color: var(--color-text-2);
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 40px;
+        white-space: nowrap;
+        transition: color 0.2s ease, border-color 0.2s ease;
         
         &:hover {
           color: var(--app-primary-color);
         }
         
         &.active {
-          border-bottom-color: var(--app-primary-color);
+          background: transparent;
           color: var(--app-primary-color);
           font-weight: 600;
+          border-bottom-color: var(--app-primary-color);
+          box-shadow: none;
         }
       }
     }
@@ -5927,8 +6630,14 @@
   .basic-info-content {
     display: flex;
     flex-direction: column;
-    gap: 20px;
-    padding: 16px 0;
+    gap: 12px;
+    height: 100%;
+    padding: 0;
+    overflow: hidden;
+
+    .form-section-drawer {
+      flex-shrink: 0;
+    }
 
     .form-section-title {
       margin: 0 0 12px;
@@ -5971,6 +6680,19 @@
       :deep(.arco-form-item-label) {
         font-weight: 500;
       }
+
+      :deep(.charging-condition-form-item) {
+        margin-bottom: 12px;
+
+        .arco-form-item-label-col {
+          display: none;
+        }
+
+        .arco-form-item-wrapper-col {
+          flex: 1 1 100%;
+          width: 100%;
+        }
+      }
     }
   }
 
@@ -6008,196 +6730,239 @@
   }
 
   .billing-factors-section {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1;
+
     .billing-factors-header {
-      margin-bottom: 0;
+      flex-shrink: 0;
+      margin-bottom: 8px;
     }
-    
-    .billing-factors-table {
-      border: 1px solid var(--color-border-2);
-      border-radius: 6px;
-      overflow-x: auto;
-      overflow-y: auto;
-      max-height: 360px;
-      
-      .factors-table {
-        width: 100%;
-        min-width: 800px;
-        border-collapse: collapse;
-        
-        thead {
-          background-color: var(--color-fill-1);
-          
-          th {
-            padding: 12px 16px;
-            text-align: left;
-            font-weight: 600;
-            color: var(--color-text-1);
-            border-bottom: 1px solid #e8e8e8;
-          }
+
+    .billing-factors-table-wrap {
+      flex: 1 1 auto;
+      min-height: 0;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .billing-factors-table-pro {
+      width: 100%;
+      min-height: 0;
+
+      :deep(.vxe-toolbar) {
+        display: none;
+      }
+    }
+
+    .billing-factor-sort-cell {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-3);
+      cursor: move;
+      font-size: 18px;
+
+      &:hover {
+        color: var(--app-primary-color);
+      }
+    }
+
+    .factor-values-cell {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 4px;
+      max-width: 100%;
+      max-height: 48px;
+      overflow: hidden;
+
+      .factor-value-tag {
+        flex-shrink: 0;
+        max-width: 88px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .factor-value-more {
+        flex-shrink: 0;
+        cursor: pointer;
+        color: var(--app-primary-color);
+        background: color-mix(in srgb, var(--app-primary-color) 10%, #fff);
+        border-color: color-mix(in srgb, var(--app-primary-color) 28%, #fff);
+
+        &:hover {
+          background: color-mix(in srgb, var(--app-primary-color) 16%, #fff);
         }
-        
-        tbody {
-          tr {
-            border-bottom: 1px solid var(--color-border-2);
-            
-            &:last-child {
-              border-bottom: none;
-            }
-            
-            &:hover {
-              background-color: var(--color-fill-1);
-            }
-            
-            td {
-              padding: 12px 16px;
-              vertical-align: middle;
-            }
-          }
-        }
-        
-        .serial-number-cell {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          
-          .drag-icon {
-            font-size: 18px;
-            color: var(--color-text-3);
-            cursor: move;
-            
-            &:hover {
-              color: var(--app-primary-color);
-            }
-          }
-        }
-        
-        .factor-values-cell {
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          gap: 4px;
-          
-          .add-value-btn {
-            color: var(--app-primary-color);
-            
-            &:hover {
-              color: #1a6b6b;
-              background-color: #f0f9f9;
-            }
-          }
+      }
+
+      .factor-values-empty {
+        flex-shrink: 0;
+        color: var(--color-text-4);
+        font-size: 12px;
+      }
+
+      .add-value-btn {
+        flex-shrink: 0;
+        margin-left: auto;
+        color: var(--app-primary-color);
+
+        &:hover {
+          color: var(--app-primary-color);
+          background: color-mix(in srgb, var(--app-primary-color) 8%, #fff);
         }
       }
     }
+
+    .row-action-btn {
+      color: var(--color-text-3);
+
+      &:hover {
+        color: rgb(var(--danger-6));
+      }
+    }
+  }
+
+  .factor-values-popover {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 400px;
+
+    &__title {
+      color: var(--color-text-3);
+      font-size: 12px;
+      line-height: 1.2;
+    }
+
+    &__list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      max-height: 220px;
+      overflow: auto;
+    }
+  }
+
+  .price-modal-pane {
+    box-sizing: border-box;
+    height: 598px; // 表头区 48 + 列表 550，两个 tab 同高
+    overflow: hidden;
   }
 
   .price-list-content {
-    padding: 24px 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    padding: 0;
     
     .price-list-header {
       display: flex;
-      justify-content: space-between;
+      flex-wrap: nowrap;
       align-items: center;
-      margin-bottom: 16px;
+      justify-content: space-between;
+      gap: 12px;
+      height: 40px;
+      flex-shrink: 0;
+      margin-bottom: 8px;
+      padding: 0 2px;
+    }
+
+    .price-list-header__meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+      flex: 1 1 auto;
+      overflow: hidden;
+    }
+
+    .price-list-badge {
+      flex-shrink: 0;
+      height: 24px;
+      padding: 0 10px;
+      border-radius: 4px;
+      background: color-mix(in srgb, var(--app-primary-color) 12%, #fff);
+      color: var(--app-primary-color);
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 24px;
+      white-space: nowrap;
+    }
+
+    .price-list-hint {
+      min-width: 0;
+      color: var(--color-text-3);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .price-list-count {
+      flex-shrink: 0;
+      color: var(--color-text-3);
+      font-size: 12px;
+      white-space: nowrap;
+    }
       
-      .price-list-title {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 4px;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 1.5;
-        color: #fff;
-        background-color: #00b42a;
-        padding: 4px 12px;
-        border-radius: 4px;
+    .price-list-merge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-2);
+      font-size: 12px;
+      white-space: nowrap;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .price-list-actions {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 6px;
+      flex: 0 0 auto;
+
+      &__sep {
+        width: 1px;
+        height: 16px;
+        margin: 0 2px;
+        background: var(--color-border-2);
       }
 
-      .price-list-hint {
+      :deep(.arco-btn) {
+        height: 28px;
+        padding: 0 10px;
+        border-radius: 4px;
         font-size: 12px;
-        font-weight: 400;
-        opacity: 0.92;
-      }
-      
-      .price-list-actions {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        gap: 8px;
-        max-width: 72%;
       }
     }
     
     .price-list-table-container {
-      border: 1px solid #e8e8e8;
-      border-radius: 6px;
-      overflow-x: scroll;
-      overflow-y: scroll;
-      max-height: 500px;
+      box-sizing: border-box;
+      flex: 1 1 auto;
+      width: 100%;
       height: 500px;
-      
-      .price-list-table {
-        width: 100%;
-        min-width: 1000px;
-        border-collapse: collapse;
-
-        .price-row-check {
-          text-align: center;
-          vertical-align: middle;
-        }
-        
-        thead {
-          background-color: var(--color-fill-1);
-          
-          th {
-            padding: 12px 16px;
-            text-align: left;
-            font-weight: 600;
-            color: var(--color-text-1);
-            border-bottom: 1px solid #e8e8e8;
-            border-right: 1px solid #e8e8e8;
-            
-            &:last-child {
-              border-right: none;
-            }
-          }
-        }
-        
-        tbody {
-          tr {
-            border-bottom: 1px solid var(--color-border-2);
-            
-            &:last-child {
-              border-bottom: none;
-            }
-            
-            &:hover {
-              background-color: var(--color-fill-1);
-            }
-            
-            td {
-              padding: 12px 16px;
-              vertical-align: middle;
-              border-right: 1px solid var(--color-border-2);
-              
-              &:last-child {
-                border-right: none;
-              }
-              
-              &.factor-cell {
-                font-weight: 500;
-                background-color: var(--color-fill-1);
-                vertical-align: middle;
-              }
-            }
-          }
-        }
-      }
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+      border: 1px solid var(--color-border-2);
+      border-radius: 6px;
+      background: #fff;
     }
   }
 
   .price-modal-content {
-    padding: 8px 0;
+    padding: 0;
     overflow: visible;
   }
 
@@ -6262,6 +7027,20 @@
     overflow: hidden;
   }
 
+  .tab-pane-spin {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    display: block;
+
+    :deep(.arco-spin-children) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+  }
+
   .shipping-rules-header {
     margin-bottom: 24px;
     display: flex;
@@ -6458,157 +7237,259 @@
   // 发布记录样式
   .publish-records-section {
     flex: 1;
+    min-height: 0;
     display: flex;
     flex-direction: column;
-    padding: 24px;
+    padding: 16px 24px 24px;
     overflow: hidden;
+    gap: 12px;
+  }
+
+  .publish-record-content-spin {
+    display: block;
+    height: 100%;
+  }
+
+  .publish-records-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 32px;
+  }
+
+  .publish-records-hint {
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--color-text-3);
+    white-space: nowrap;
   }
 
   .publish-records-container {
+    flex: 1;
+    min-height: 0;
     display: flex;
-    height: 100%;
     gap: 0;
-    border: 1px solid #e8e8e8;
-    border-radius: 6px;
+    border: 1px solid var(--color-border-2, #e8e8e8);
+    border-radius: 8px;
     overflow: hidden;
+    background: var(--app-card-bg, #fff);
   }
 
   .publish-records-left {
-    width: 370px;
-    border-right: 1px solid #e8e8e8;
+    width: 320px;
+    flex-shrink: 0;
+    border-right: 1px solid var(--color-border-2, #e8e8e8);
     display: flex;
     flex-direction: column;
-    padding: 24px;
-    overflow-y: auto;
-    background-color: var(--color-fill-1);
-    
-    .version-header {
-      margin-bottom: 16px;
-      
-      .version-number {
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--color-text-1);
-      }
-    }
-    
-    .publish-tabs-container {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 16px;
-    }
-    
-    .user-info {
-      font-size: 12px;
-      color: var(--color-text-3);
-      margin-bottom: 16px;
-    }
-    
+    padding: 12px;
+    overflow: hidden;
+    background-color: var(--app-card-bg, #fff);
+
     .version-list {
       flex: 1;
+      min-height: 0;
       overflow-y: auto;
-      
-      .version-item {
-        padding: 12px;
-        margin-bottom: 8px;
-        background-color: var(--app-card-bg);
-        border-radius: 4px;
-        cursor: pointer;
-        transition: all 0.3s;
-        
-        &:hover {
-          background-color: #f6f8f8;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding-right: 2px;
+    }
+
+    .version-item {
+      --vr-hover: rgba(15, 16, 17, 0.04);
+      --vr-selected: var(--app-primary-color-light);
+      --vr-selected-text: var(--app-primary-color);
+      --vr-selected-border: color-mix(in srgb, var(--app-primary-color) 32%, transparent);
+      --vr-muted: var(--color-text-3);
+
+      appearance: none;
+      -webkit-appearance: none;
+      width: 100%;
+      border: 1px solid rgba(15, 16, 17, 0.07);
+      text-align: left;
+      padding: 10px 12px;
+      background-color: var(--color-fill-1);
+      border-radius: 8px;
+      cursor: pointer;
+      box-shadow: none;
+      transition:
+        background-color 0.2s ease,
+        border-color 0.2s ease;
+
+      &:hover {
+        background-color: var(--vr-hover);
+        border-color: rgba(15, 16, 17, 0.1);
+      }
+
+      &.active {
+        background: var(--vr-selected);
+        border-color: var(--vr-selected-border);
+        box-shadow: none;
+
+        .version-item-number {
+          color: var(--vr-selected-text);
+          font-weight: 560;
         }
-        
-        &.active {
-          background-color: #EDF6FF;
-        }
-        
-        .version-item-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 8px;
-          
-          .version-item-number {
-            font-size: 12px;
-            color: #202122;
-            line-height: 14px;
-          }
-          
-          .version-item-type {
-            font-size: 14px;
-            line-height: 18px;
-            
-            &.type-publish {
-              color: #287EDC;
-            }
-            
-            &.type-effective {
-              color: #508A24;
-            }
-            
-            &.type-rollback {
-              color: #faad14;
-            }
-            
-            &.type-invalid {
-              color: #f53f3f;
-            }
-          }
-        }
-        
-        .version-item-footer {
-          display: flex;
-          justify-content: space-between;
-          font-size: 12px;
-          color: #737373;
-          line-height: 18px;
+
+        .version-item-footer,
+        .version-item-user,
+        .version-item-time {
+          color: var(--vr-muted);
         }
       }
+
+      .version-item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+      }
+
+      .version-item-number {
+        min-width: 0;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--color-text-1);
+        line-height: 18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .version-item-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+        font-size: 12px;
+        color: var(--color-text-3);
+        line-height: 18px;
+      }
+
+      .version-item-user,
+      .version-item-time {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .version-item-time {
+        flex-shrink: 0;
+        max-width: 58%;
+      }
+    }
+  }
+
+  .version-item-badge {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 10px;
+    font-size: 12px;
+    line-height: 20px;
+    font-weight: 500;
+
+    &.type-effective {
+      color: #508a24;
+      background: color-mix(in srgb, #508a24 12%, #fff);
+    }
+
+    &.type-rollback {
+      color: #d48806;
+      background: color-mix(in srgb, #faad14 16%, #fff);
+    }
+
+    &.type-invalid {
+      color: #cf1322;
+      background: color-mix(in srgb, #f53f3f 12%, #fff);
     }
   }
 
   .publish-records-right {
     flex: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
-    padding: 24px;
-    background-color: var(--app-card-bg);
+    padding: 16px 20px;
+    background-color: var(--app-card-bg, #fff);
     overflow: hidden;
-    
+
     .right-header {
+      flex-shrink: 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 16px;
-      
-      .rollback-btn {
+      gap: 12px;
+      margin-bottom: 12px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--color-border-2, #e8e8e8);
+    }
+
+    .rollback-btn {
+      color: var(--app-primary-color);
+
+      &:hover:not(:disabled) {
         color: var(--app-primary-color);
-        
-        &:hover {
-          color: #1a6b6b;
-        }
-      }
-      
-      .version-notes {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: var(--color-text-1);
-        font-size: 12px;
-        
-        .notes-icon {
-          cursor: pointer;
-        }
+        border-color: color-mix(in srgb, var(--app-primary-color) 45%, #fff);
+        background: color-mix(in srgb, var(--app-primary-color) 8%, #fff);
       }
     }
-    
+
+    .version-notes {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-2);
+      font-size: 12px;
+    }
+
+    .notes-icon {
+      cursor: pointer;
+      font-size: 16px;
+      vertical-align: middle;
+
+      &--remark {
+        color: #faad14;
+      }
+
+      &--ai {
+        color: var(--app-primary-color, #1d7281);
+      }
+    }
+
     .code-content {
       flex: 1;
+      min-height: 0;
       overflow: auto;
+      border: 1px solid var(--color-border-2, #e8e8e8);
+      border-radius: 6px;
+      background: var(--color-fill-1, #f7f8fa);
     }
+
+    .code-pre {
+      margin: 0;
+      padding: 12px 14px;
+      font-family: Menlo, Consolas, 'Courier New', monospace;
+      font-size: 12px;
+      line-height: 1.55;
+      color: var(--color-text-1);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+  }
+
+  .publish-records-empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px 12px;
   }
 
   .publish-date-modal {
@@ -7074,4 +7955,16 @@
     min-height: 0;
   }
 }
+
+/* 价格配置弹窗：允许 Handsontable 下拉层溢出 */
+.arco-modal.sales-price-config-modal {
+  .arco-modal-body {
+    overflow: visible !important;
+  }
+}
+
+.arco-modal.sales-price-config-modal .handsontable.listbox,
+.arco-modal.sales-price-config-modal .autocompleteEditor.handsontable.listbox {
+  z-index: 5600 !important;
+}
 </style>
diff --git a/src/views/channel/serviceChannels/index.vue b/src/views/channel/serviceChannels/index.vue
index 31e8c45..2521194 100644
--- a/src/views/channel/serviceChannels/index.vue
+++ b/src/views/channel/serviceChannels/index.vue
@@ -43,33 +43,31 @@
           </a-doption>
         </template>
         <template #node-second-row-extra="{ nodeData }">
-          <table class="channel-second-row-table">
-            <tr>
-              <td class="channel-row-left">
-                <span class="create-time">{{ t('channel.serviceChannels.createTime', { time: nodeData?.createTime }) }}</span>
-              </td>
-              <td class="channel-row-right">
-                <span
-                  class="switch-swipe-wrapper"
-                  @click.capture.stop="() => {
-                    const channel = findChannelById(nodeData?.id)
-                    if (channel) { channel.isActive = !channel.isActive; handleToggleChannel(channel); }
-                  }"
-                  @touchstart.passive="onStatusSwipeStart"
-                  @touchend="(e) => onChannelSwitchSwipeEnd(nodeData, e)"
-                >
-                  <a-switch
-                    :model-value="nodeData?.isActive"
-                    size="small"
-                    type="circle"
-                    class="channel-active-switch"
-                    checked-color="#00b42a"
-                    unchecked-color="#f53f3f"
-                  />
-                </span>
-              </td>
-            </tr>
-          </table>
+          <div class="channel-second-row">
+            <span class="modify-time">{{
+              t('channel.serviceChannels.updateTime', {
+                time: nodeData?.updateTime || '--',
+              })
+            }}</span>
+            <span
+              class="switch-swipe-wrapper"
+              @click.capture.stop="() => {
+                const channel = findChannelById(nodeData?.id)
+                if (channel) { channel.isActive = !channel.isActive; handleToggleChannel(channel); }
+              }"
+              @touchstart.passive="onStatusSwipeStart"
+              @touchend="(e) => onChannelSwitchSwipeEnd(nodeData, e)"
+            >
+              <a-switch
+                :model-value="nodeData?.isActive"
+                size="small"
+                type="circle"
+                class="channel-active-switch"
+                checked-color="#00b42a"
+                unchecked-color="#f53f3f"
+              />
+            </span>
+          </div>
         </template>
       </CustomLeftMenu>
     </div>
@@ -139,6 +137,16 @@
           <span class="context-label">{{ t('channel.serviceChannels.context.apiProvider') }}：</span>
           <span class="context-value">{{ selectedChannelContext.apiProviderName }}</span>
         </span>
+        <span class="context-divider">|</span>
+        <span class="context-item">
+          <span class="context-label">{{ t('channel.serviceChannels.context.updateTime') }}：</span>
+          <span class="context-value">{{ selectedChannelContext.updateTime }}</span>
+        </span>
+        <span class="context-divider">|</span>
+        <span class="context-item">
+          <span class="context-label">{{ t('channel.serviceChannels.context.updateBy') }}：</span>
+          <span class="context-value">{{ selectedChannelContext.updateBy }}</span>
+        </span>
         <a-tag v-if="configFormDirty && activeTab === 'config'" color="orangered" size="small" class="context-dirty-tag">
           {{ t('channel.serviceChannels.context.unsaved') }}
         </a-tag>
@@ -303,56 +311,53 @@
                 @click="handleAddPrice"
               >
                 <icon-plus class="btn-icon" />
-                {{ t('channel.salesProducts.actions.add') }}
+                {{ t('channel.serviceChannels.actions.add') }}
               </a-button>
             </div>
           </div>
-          <div class="price-table-container">
-            <a-table
-              :data="priceTableData"
-              :columns="priceColumns"
-              row-key="key"
-              :pagination="false"
-              :bordered="false"
-              class="price-table"
+          <div ref="priceTableContainerRef" class="price-table-container">
+            <TablePro
+              ref="priceListTableRef"
+              v-bind="priceListTableProps"
+              class="price-list-table-pro"
             >
-              <template #status="{ record }">
+              <template #status="{ row }">
                 <div
                   class="switch-swipe-wrapper"
                   @touchstart.passive="onStatusSwipeStart"
-                  @touchend="(e) => onStatusSwipeEnd(record, e)"
+                  @touchend="(e) => onStatusSwipeEnd(row, e)"
                 >
                   <a-switch
-                    v-model="record.status"
+                    v-model="row.status"
                     type="circle"
                     size="small"
                     class="product-active-switch"
                     checked-color="#00b42a"
                     unchecked-color="#f53f3f"
-                    @change="() => handleTogglePriceStatus(record)"
+                    @change="() => handleTogglePriceStatus(row)"
                   />
                 </div>
               </template>
-              <template #costItemCell="{ record }">
-                {{ dictLabelByType('fee_item', record.costItem) }}
+              <template #costItemCell="{ row }">
+                {{ dictLabelByType('fee_item', row.costItem) }}
               </template>
-              <template #costUnitCell="{ record }">
-                {{ dictLabelByType('cost_unit', record.costUnit) }}
+              <template #costUnitCell="{ row }">
+                {{ dictLabelByType('cost_unit', row.costUnit) }}
               </template>
-              <template #currencyCell="{ record }">
-                {{ dictLabelByType('currency', record.currency) }}
+              <template #currencyCell="{ row }">
+                {{ dictLabelByType('currency', row.currency) }}
               </template>
-              <template #billingFactorsCell="{ record }">
-                {{ formatPriceTableBillingFactors(record) }}
+              <template #billingFactorsCell="{ row }">
+                {{ formatPriceTableBillingFactors(row) }}
               </template>
-              <template #operations="{ record }">
+              <template #operations="{ row }">
                 <a-space>
                   <a-button
                     type="text"
                     size="small"
                     class="action-btn"
-                    @click="handleEditPrice(record)"
-                    :title="t('channel.salesProducts.actions.edit')"
+                    :title="t('channel.serviceChannels.actions.edit')"
+                    @click="handleEditPrice(row)"
                   >
                     <icon-edit />
                   </a-button>
@@ -360,94 +365,95 @@
                     type="text"
                     size="small"
                     class="action-btn delete-btn"
-                    @click="handleDeletePrice(record)"
-                    :title="t('channel.salesProducts.actions.delete')"
+                    :title="t('channel.serviceChannels.actions.delete')"
+                    @click="handleDeletePrice(row)"
                   >
                     <icon-delete />
                   </a-button>
                 </a-space>
               </template>
-            </a-table>
+            </TablePro>
           </div>
         </div>
 
       <!-- 发布记录tab内容 -->
       <div v-else-if="activeTab === 'records'" class="publish-records-section">
+        <div class="publish-records-toolbar">
+          <SlidingTabs
+            :model-value="publishRecordTab"
+            :items="publishRecordTabItems"
+            @change="handleChangePublishRecordTab"
+          />
+          <span class="publish-records-hint">
+            {{ t('channel.serviceChannels.record.recordsHint') }}
+          </span>
+        </div>
+
         <div class="publish-records-container">
-          <!-- 左侧面板 -->
           <div class="publish-records-left">
-            <div class="publish-tabs-container">
-              <SlidingTabs
-                :model-value="publishRecordTab"
-                :items="publishRecordTabItems"
-                @change="handleChangePublishRecordTab"
-              />
-            </div>
-            <div class="user-info">
-            </div>
-            <div class="version-list">
-              <div
+            <div v-if="currentListData.length" class="version-list">
+              <button
                 v-for="(item, index) in currentListData"
                 :key="item.id"
+                type="button"
                 :class="['version-item', { active: publishRecordActiveIndex === index }]"
                 @click="handleChangePublishRecordIndex(index)"
               >
                 <div class="version-item-header">
-                  <span class="version-item-number">版本号：{{ item.version }}</span>
+                  <span class="version-item-number">
+                    {{ t('channel.serviceChannels.record.versionNumber', { version: item.version }) }}
+                  </span>
                   <span
-                    :class="[
-                      'version-item-type',
-                      item.status === '生效' ? 'type-effective' : item.status === '回滚' ? 'type-rollback' : 'type-invalid'
-                    ]"
+                    :class="['version-item-badge', publishRecordStatusMeta(item.status).className]"
                   >
-                    {{ item.status === '生效' ? '发布' : item.status === '回滚' ? '回滚' : item.status }}
+                    {{ publishRecordStatusMeta(item.status).label }}
                   </span>
                 </div>
                 <div class="version-item-footer">
-                  <span>{{ item.publishUser }}</span>
-                  <span>生效：{{ item.publishTime }}</span>
+                  <span class="version-item-user">{{ item.publishUser || '--' }}</span>
+                  <span class="version-item-time">{{ item.publishTime || '--' }}</span>
                 </div>
-              </div>
+              </button>
             </div>
+            <a-empty
+              v-else
+              class="publish-records-empty"
+              :description="t('channel.serviceChannels.record.emptyList')"
+            />
           </div>
 
-          <!-- 右侧面板 -->
           <div class="publish-records-right">
-            <div class="right-header">
-              <a-button
-                type="text"
-                @click="handleRollbackToVersion"
-                class="rollback-btn"
-              >
-                {{ t('channel.serviceChannels.record.actions.rollback') }}
-              </a-button>
-              <div class="version-notes">
-                <span>{{ t('channel.serviceChannels.record.versionRemark') }}</span>
-                <a-popover
-                  :content="currentPublishRecord.description || t('channel.serviceChannels.record.noRemark')"
-                  placement="top-start"
+            <template v-if="hasCurrentPublishRecord">
+              <div class="right-header">
+                <div class="version-notes">
+                  <span>{{ t('channel.serviceChannels.record.versionRemark') }}</span>
+                  <a-popover placement="top-start">
+                    <template #content>
+                      {{ currentPublishRecord.description || t('channel.serviceChannels.record.noRemark') }}
+                    </template>
+                    <template #default>
+                      <icon-question-circle-fill class="notes-icon notes-icon--remark" />
+                    </template>
+                  </a-popover>
+                </div>
+                <a-button
+                  size="small"
+                  class="rollback-btn"
+                  :disabled="!canRollbackPublishRecord"
+                  @click="handleRollbackToVersion"
                 >
-                  <template #content>
-                    {{ currentPublishRecord.description || t('channel.serviceChannels.record.noRemark') }}
-                  </template>
-                  <template #default>
-                    <icon-question-circle-fill
-                      class="notes-icon"
-                      style="color: #faad14; font-size: 18px"
-                    />
-                  </template>
-                </a-popover>
+                  {{ t('channel.serviceChannels.record.actions.rollback') }}
+                </a-button>
               </div>
-            </div>
-            <div class="code-content">
-              <a-textarea
-                :model-value="formattedJsonContent"
-                :readonly="true"
-                :auto-size="{ minRows: 20, maxRows: 30 }"
-                class="w-100%"
-                style="font-family: Menlo, Consolas, monospace; font-size: 12px;"
-              />
-            </div>
+              <div class="code-content">
+                <pre class="code-pre">{{ formattedJsonContent || t('channel.serviceChannels.record.emptyContent') }}</pre>
+              </div>
+            </template>
+            <a-empty
+              v-else
+              class="publish-records-empty"
+              :description="t('channel.serviceChannels.record.emptyDetail')"
+            />
           </div>
         </div>
       </div>
@@ -479,9 +485,11 @@
     <a-modal
       v-model:visible="priceModalVisible"
       :title="isEditMode ? t('channel.serviceChannels.actions.edit') : t('channel.serviceChannels.actions.add')"
-      :width="1400"
+      width="1400px"
       :footer="false"
       :mask-closable="false"
+      modal-class="sales-price-config-modal"
+      :body-style="{ overflow: 'visible' }"
       @cancel="handleCancelPriceDrawer"
     >
       <div class="price-modal-content">
@@ -499,11 +507,14 @@
           </div>
         </div>
 
+        <div class="price-modal-pane">
         <!-- 基础信息tab -->
-        <div v-if="priceDrawerActiveTab === 'basic'" class="basic-info-content">
+        <div
+          v-show="priceDrawerActiveTab === 'basic'"
+          class="basic-info-content"
+        >
         <!-- 表单部分 -->
         <div class="form-section-drawer">
-          <div class="form-section-title">{{ t('channel.serviceChannels.drawer.section.feeBasic') }}</div>
           <a-form :model="basicInfoForm" layout="vertical" class="price-form">
             <a-row :gutter="24">
               <a-col :span="8">
@@ -578,16 +589,12 @@
             </a-row>
             <a-row :gutter="24">
               <a-col :span="24">
-                <a-form-item>
-                  <template #label>
-                    <span class="label-with-tip">
-                      {{ t('channel.serviceChannels.drawer.form.chargingCondition') }}
-                      <a-tooltip :content="t('channel.serviceChannels.drawer.tip.chargingCondition')">
-                        <icon-question-circle class="tip-icon" />
-                      </a-tooltip>
-                    </span>
-                  </template>
-                  <BillingConditionEditor v-model="basicInfoForm.chargingCondition" />
+                <a-form-item hide-label class="charging-condition-form-item">
+                  <BillingConditionEditor
+                    v-model="basicInfoForm.chargingCondition"
+                    :label="t('channel.serviceChannels.drawer.form.chargingCondition')"
+                    :label-tip="t('channel.serviceChannels.drawer.tip.chargingCondition')"
+                  />
                 </a-form-item>
               </a-col>
             </a-row>
@@ -617,104 +624,157 @@
                 size="small"
                 @click="handleGeneratePriceList"
               >
-                <icon-plus />
+                <icon-sync />
                 {{ t('channel.serviceChannels.drawer.footer.syncPriceList') }}
               </a-button>
             </a-space>
           </div>
-          <div class="billing-factors-table">
-            <table class="factors-table">
-              <thead>
-                <tr>
-                  <th style="width: 80px">{{ t('channel.serviceChannels.drawer.table.billingFactors.serialNo') }}</th>
-                  <th style="width: 200px">{{ t('channel.serviceChannels.drawer.table.billingFactors.factor') }}</th>
-                  <th>{{ t('channel.serviceChannels.drawer.table.billingFactors.factorValues') }}</th>
-                  <th style="width: 100px">{{ t('channel.serviceChannels.drawer.table.billingFactors.actions') }}</th>
-                </tr>
-              </thead>
-              <tbody class="billing-factors-tbody">
-                <tr
-                  v-for="(row, index) in billingFactorsData"
-                  :key="row.id"
+          <div ref="billingFactorsTableWrapRef" class="billing-factors-table-wrap">
+            <TablePro
+              ref="billingFactorsTableRef"
+              v-bind="billingFactorsTableProps"
+              class="billing-factors-table-pro"
+            >
+              <template #sort>
+                <div class="billing-factor-sort-cell">
+                  <icon-drag-arrow />
+                </div>
+              </template>
+              <template #factor="{ row }">
+                <a-select
+                  v-model="row.factor"
+                  :placeholder="t('channel.serviceChannels.form.placeholder.select')"
+                  :loading="channelPriceDictLoading"
+                  size="mini"
+                  style="width: 100%"
+                  :fallback-option="pricingFactorFallbackOption"
+                  @change="(val: string) => handleBillingFactorChange(row, val)"
                 >
-                  <td>
-                    <div class="serial-number-cell">
-                      <icon-drag-arrow class="drag-icon" />
-                      <span>{{ row.serialNumber }}</span>
-                    </div>
-                  </td>
-                  <td>
-                    <a-select
-                      v-model="row.factor"
-                      :placeholder="t('channel.serviceChannels.form.placeholder.select')"
-                      :loading="channelPriceDictLoading"
+                  <a-option
+                    v-for="option in factorOptions"
+                    :key="option.value"
+                    :value="option.value"
+                    :label="option.label"
+                    :disabled="isBillingFactorOptionDisabled(option.value, row)"
+                  >
+                    {{ option.label }}
+                  </a-option>
+                </a-select>
+              </template>
+              <template #factorValues="{ row }">
+                <div
+                  v-for="preview in [getFactorValuePreview(row)]"
+                  :key="row.id"
+                  class="factor-values-cell"
+                >
+                  <template v-if="preview.values.length">
+                    <a-tag
+                      v-for="(value, valueIndex) in preview.visible"
+                      :key="`${row.id}-v-${valueIndex}`"
                       size="small"
-                      style="width: 100%"
+                      closable
+                      class="factor-value-tag"
+                      @close="handleDeleteFactorValue(row, valueIndex)"
                     >
-                      <a-option
-                        v-for="option in factorOptions"
-                        :key="option.value"
-                        :value="option.value"
-                      >
-                        {{ option.label }}
-                      </a-option>
-                    </a-select>
-                  </td>
-                  <td>
-                    <div class="factor-values-cell">
-                      <a-tag
-                        v-for="(value, valueIndex) in row.factorValues"
-                        :key="valueIndex"
-                        closable
-                        @close="handleDeleteFactorValue(row, valueIndex)"
-                        style="margin-right: 8px; margin-bottom: 4px"
-                      >
-                        {{ formatFactorValueTagDisplay(row.factor, value) }}
+                      {{ formatFactorValueTagDisplay(row.factor, value) }}
+                    </a-tag>
+                    <a-popover
+                      v-if="preview.extraCount > 0"
+                      trigger="click"
+                      position="bl"
+                      :content-style="{ padding: '10px 12px', maxWidth: '420px' }"
+                    >
+                      <a-tag size="small" class="factor-value-more" tabindex="0">
+                        +{{ preview.extraCount }}
                       </a-tag>
-                      <a-button
-                        type="text"
-                        size="small"
-                        @click="handleAddFactorValue(row)"
-                        class="add-value-btn"
-                      >
-                        <icon-plus />
-                      </a-button>
-                    </div>
-                  </td>
-                  <td>
-                    <a-button
-                      type="text"
-                      size="small"
-                      status="danger"
-                      @click="handleDeleteBillingFactor(index)"
-                    >
-                      <icon-delete />
-                    </a-button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+                      <template #content>
+                        <div class="factor-values-popover">
+                          <div class="factor-values-popover__title">
+                            已选 {{ preview.values.length }} 项
+                          </div>
+                          <div class="factor-values-popover__list">
+                            <a-tag
+                              v-for="(value, valueIndex) in preview.values"
+                              :key="`${row.id}-all-${valueIndex}`"
+                              size="small"
+                              closable
+                              @close="handleDeleteFactorValue(row, valueIndex)"
+                            >
+                              {{ formatFactorValueTagDisplay(row.factor, value) }}
+                            </a-tag>
+                          </div>
+                        </div>
+                      </template>
+                    </a-popover>
+                  </template>
+                  <span v-else class="factor-values-empty">未配置</span>
+                  <a-button
+                    type="text"
+                    size="mini"
+                    class="add-value-btn"
+                    @click="handleAddFactorValue(row)"
+                  >
+                    <icon-plus />
+                  </a-button>
+                </div>
+              </template>
+              <template #action="{ row }">
+                <a-button
+                  type="text"
+                  size="mini"
+                  status="danger"
+                  class="row-action-btn"
+                  @click="handleDeleteBillingFactor(row)"
+                >
+                  <icon-delete />
+                </a-button>
+              </template>
+            </TablePro>
           </div>
         </div>
       </div>
 
-        <!-- 价格表tab -->
+        <!-- 价格表tab：Handsontable 虚拟渲染 -->
         <div
           v-if="priceDrawerActiveTab === 'priceList'"
-          :key="`price-list-${priceListData.length}-${priceTableHeaders.length}`"
           class="price-list-content"
         >
         <div class="price-list-header">
-          <div class="price-list-title">
-            {{
-              dictLabelByType('fee_item', basicInfoForm.costItem) ||
-                t('channel.serviceChannels.drawer.section.priceListTitle')
-            }}
+          <div class="price-list-header__meta">
+            <span class="price-list-badge">
+              {{
+                dictLabelByType('fee_item', basicInfoForm.costItem) ||
+                  t('channel.serviceChannels.drawer.section.priceListTitle')
+              }}
+            </span>
             <span class="price-list-hint">{{ t('channel.serviceChannels.drawer.priceList.hint') }}</span>
+            <span v-if="priceListData.length" class="price-list-count">
+              {{ priceListData.length }} 行
+              <template v-if="priceListSelectedIds.length"> · 已选 {{ priceListSelectedIds.length }}</template>
+            </span>
           </div>
           <div class="price-list-actions">
+            <label class="price-list-merge">
+              <span>合并相同值</span>
+              <a-switch v-model="priceListMergeSame" size="small" />
+            </label>
+            <span class="price-list-actions__sep" aria-hidden="true"></span>
+            <a-button
+              size="small"
+              :disabled="!priceListData.length"
+              @click="selectAllPriceListRows"
+            >
+              全选
+            </a-button>
+            <a-button
+              size="small"
+              :disabled="!priceListSelectedIds.length"
+              @click="clearAllPriceListRowsSelection"
+            >
+              取消全选
+            </a-button>
+            <span class="price-list-actions__sep" aria-hidden="true"></span>
             <a-button
-              type="secondary"
               size="small"
               :disabled="!priceListSelectedIds.length"
               @click="openBatchFillModal(false)"
@@ -722,7 +782,6 @@
               {{ t('channel.serviceChannels.drawer.priceList.batchFill') }}
             </a-button>
             <a-button
-              type="secondary"
               size="small"
               :disabled="!priceListSelectedIds.length"
               @click="openBatchFillModal(true)"
@@ -730,30 +789,19 @@
               {{ t('channel.serviceChannels.drawer.priceList.batchFillEmpty') }}
             </a-button>
             <a-button
-              type="secondary"
               size="small"
               :disabled="!priceListSelectedIds.length"
               @click="handleCopyPrevRowPrices"
             >
               {{ t('channel.serviceChannels.drawer.priceList.copyPrev') }}
             </a-button>
-            <a-button
-              type="secondary"
-              size="small"
-              @click="handleExportPriceList"
-            >
-              导出价格
-            </a-button>
-            <a-button
-              type="secondary"
-              size="small"
-              @click="handleImportPriceList"
-            >
-              导入价格
-            </a-button>
+            <span class="price-list-actions__sep" aria-hidden="true"></span>
+            <a-button size="small" @click="handleExportPriceList">导出</a-button>
+            <a-button size="small" @click="handleImportPriceList">导入</a-button>
             <a-button
               type="primary"
               size="small"
+              class="app-btn-primary-soft"
               :loading="savingPriceDrawer"
               @click="handleSavePriceList"
             >
@@ -762,84 +810,18 @@
           </div>
         </div>
         <div class="price-list-table-container">
-          <table class="price-list-table">
-            <thead>
-              <tr>
-                <th style="width: 44px">
-                  <a-checkbox
-                    :model-value="priceListAllSelected"
-                    @change="toggleSelectAllPriceRows"
-                  />
-                </th>
-                <th
-                  v-for="header in priceTableHeaders"
-                  :key="header.key"
-                  style="width: 120px"
-                >
-                  {{ header.label }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(row, index) in priceListData"
-                :key="row.id"
-              >
-                <td class="price-row-check">
-                  <a-checkbox
-                    :model-value="priceListSelectedIds.includes(row.id)"
-                    @change="(v: boolean | Event) => toggleSelectPriceRow(row.id, v)"
-                  />
-                </td>
-                <template v-for="header in priceTableHeaders" :key="header.key">
-                  <td
-                    v-if="header.key.startsWith('factor_')"
-                    :rowspan="getFactorRowSpan(header.key, index) > 0 ? getFactorRowSpan(header.key, index) : undefined"
-                    :style="getFactorRowSpan(header.key, index) > 0 ? {} : { display: 'none' }"
-                    class="factor-cell"
-                  >
-                    {{
-                      formatPriceTableFactorCell(
-                        header.factorIndex,
-                        String((row as any)[header.key] ?? '')
-                      )
-                    }}
-                  </td>
-                  <td
-                    v-else-if="header.key === 'calculationFormula'"
-                  >
-                    <a-select
-                      v-model="row.calculationFormula"
-                      placeholder="请选择计算公式"
-                      size="small"
-                      style="width: 100%"
-                    >
-                      <a-option
-                        v-for="option in calculationFormulaOptions"
-                        :key="option.value"
-                        :value="option.value"
-                      >
-                        {{ option.label }}
-                      </a-option>
-                    </a-select>
-                  </td>
-                  <td
-                    v-else-if="header.key === 'unitPrice'"
-                  >
-                    <a-input-number
-                      v-model="row.calculatedValue"
-                      size="small"
-                      style="width: 100%"
-                      :min="0"
-                      :precision="4"
-                    />
-                  </td>
-                </template>
-              </tr>
-            </tbody>
-          </table>
+          <PriceListHotTable
+            ref="priceListHotRef"
+            :key="priceListHotTableKey"
+            :columns="priceListHotColumns"
+            :data="priceListData"
+            :height="PRICE_LIST_HOT_HEIGHT"
+            :merge-same-values="priceListMergeSame"
+            @selection-change="onPriceListSelectionChange"
+          />
         </div>
       </div>
+      </div>
 
       </div>
 
@@ -854,7 +836,7 @@
             type="primary"
             @click="handleGeneratePriceList"
           >
-            <icon-plus />
+            <icon-sync />
             {{ t('channel.serviceChannels.drawer.footer.syncPriceList') }}
           </a-button>
           <a-button
@@ -1425,15 +1407,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch, nextTick, onMounted, h } from 'vue'
+import { ref, shallowRef, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount, h, markRaw } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { IconPlus, IconDelete, IconSearch, IconEdit, IconDragArrow, IconQuestionCircleFill, IconQuestionCircle, IconFolder, IconMore } from '@arco-design/web-vue/es/icon'
+import { IconPlus, IconDelete, IconSearch, IconEdit, IconDragArrow, IconQuestionCircleFill, IconQuestionCircle, IconFolder, IconMore, IconSync } from '@arco-design/web-vue/es/icon'
 import { Message, Modal, Input } from '@arco-design/web-vue'
 import ModalPro from '@/components/ModalPro/index.vue'
 import useModal from '@/components/ModalPro/useModal'
 import PublishDiffPanel from '@/components/PublishDiff/index.vue'
+import PriceListHotTable, {
+  type PriceListHotColumn,
+} from '@/views/channel/salesProducts/components/PriceListHotTable.vue'
 import {
   computeSnapshotDiff,
+  snapshotsSemanticallyEqual,
   formatSnapshotJson,
   type SnapshotDiffRow,
 } from '@/utils/publishSnapshotDiff'
@@ -1461,6 +1447,7 @@ import {
   getServiceChannelDetail,
   getServiceChannelGroupList,
   getServiceChannelList,
+  getServiceChannelPrice,
   getServiceChannelPriceList,
   getServiceChannelPublishPreview,
   getServiceChannelPublishPriceList,
@@ -1480,6 +1467,10 @@ import CustomLeftMenu from '@/components/CustomLeftMenu/index.vue'
 import type { CustomLeftMenuTreeNode } from '@/components/CustomLeftMenu/types'
 import BillingConditionEditor from '@/views/channel/salesProducts/components/BillingConditionEditor.vue'
 import { ENABLE_STATUS, isEnableStatusEnabled, toEnableStatus } from '@/utils/enableStatus'
+import { pickResolvedAudit } from '@/utils/auditFields'
+
+/** 两个 tab 共用固定内容区高度，仅价格表内部滚动 */
+const PRICE_LIST_HOT_HEIGHT = 550
 
 defineOptions({
   name: 'ServiceChannel'
@@ -1622,6 +1613,13 @@ function pricingFactorColumnLabel(factorValue: string): string {
   return hit?.dictName || factorValue
 }
 
+function pricingFactorFallbackOption(val: string | number | boolean | Record<string, unknown>) {
+  const value = typeof val === 'object' && val != null && 'value' in val
+    ? String((val as { value: unknown }).value ?? '')
+    : String(val ?? '')
+  return { value, label: pricingFactorColumnLabel(value) }
+}
+
 function getPricingFactorMeta(factorKey: string): NormalizedDictRow | undefined {
   if (!factorKey) return undefined
   return dictRowsOfType('pricing_factor').find(
@@ -1856,6 +1854,27 @@ function defaultCalculationFormulaCode(): string {
   return hit?.dictCode || rows[0]?.dictCode || '总价'
 }
 
+function formulaCodeToLabel(code: string): string {
+  const c = String(code ?? '').trim()
+  if (!c) return ''
+  return dictLabelByType('calculation_formula', c) || c
+}
+
+function formulaLabelToCode(labelOrCode: string): string {
+  const s = String(labelOrCode ?? '').trim()
+  if (!s) return defaultCalculationFormulaCode()
+  const rows = dictRowsOfType('calculation_formula')
+  const byName = rows.find((r) => r.dictName === s)
+  if (byName?.dictCode) return byName.dictCode
+  const byCode = rows.find((r) => r.dictCode === s)
+  if (byCode?.dictCode) return byCode.dictCode
+  return s
+}
+
+function defaultCalculationFormulaDisplay(): string {
+  return formulaCodeToLabel(defaultCalculationFormulaCode())
+}
+
 const cargoAttributeValueOptions = computed<IdSelectOption[]>(() =>
   dictRowsOfType('cargo_attribute').map((r) => ({
     label: r.dictName || '（未命名）',
@@ -2268,12 +2287,15 @@ const selectedChannelContext = computed(() => {
   const apiProviderName = spId != null
     ? (serviceProviderOptions.value.find((o) => o.value === spId)?.label ?? String(spId))
     : '-'
+  const audit = pickResolvedAudit(ch?.raw || ch)
   return {
     channelName: String(ch.name ?? formData.channelName ?? '-'),
     channelCode: String(ch.channelCode ?? formData.channelCode ?? ''),
     groupName: String(group?.name ?? '-'),
     appName,
     apiProviderName,
+    updateTime: audit.updateTime || '--',
+    updateBy: audit.updateBy || '--',
   }
 })
 
@@ -2504,13 +2526,18 @@ const loadChannelGroups = async () => {
         map.set(gid, { id: gid, name: gname, channels: [] as any[] })
         order.push(gid)
       }
+      const audit = pickResolvedAudit(it)
       map.get(gid).channels.push({
         id: it.id,
         name: it.channelName,
         channelCode: it.channelCode,
         groupId: it.groupId,
-        createTime: it.createTime,
+        createTime: audit.createTime,
+        updateTime: audit.updateTime,
+        createBy: audit.createBy,
+        updateBy: audit.updateBy,
         isActive: isEnableStatusEnabled(it.isActive ?? it.IsActive),
+        raw: it,
       })
     }
 
@@ -2551,6 +2578,7 @@ onMounted(() => {
   loadChannelGroups()
   void loadRemoteAreaSelectOptions()
 })
+
 // 计费因素数据
 interface BillingFactor {
   id?: number
@@ -2660,7 +2688,9 @@ function mapDetailsToPriceListRows(details: any[]): any[] {
     if (item?.factorValuesJson && typeof item.factorValuesJson === 'object') {
       const row: any = {
         id: item.id ?? index + 1,
-        calculationFormula: item.calculationFormula || defaultCalculationFormulaCode(),
+        calculationFormula: formulaCodeToLabel(
+          item.calculationFormula || defaultCalculationFormulaCode(),
+        ),
         calculatedValue: item.calculatedValue,
       }
       const fj = item.factorValuesJson as Record<string, string>
@@ -2699,28 +2729,73 @@ function buildServiceChannelDetailsPayload(): any[] {
     return {
       id: row.id ?? index + 1,
       factorValuesJson,
-      calculationFormula: row.calculationFormula || defaultCalculationFormulaCode(),
+      calculationFormula:
+        formulaLabelToCode(String(row.calculationFormula ?? '')) || defaultCalculationFormulaCode(),
       calculatedValue: Number(row.calculatedValue ?? 0) || 0,
     }
   })
 }
 
-// 价格表数据（详情弹窗内）
-const priceListData = ref<any[]>([])
+// 价格表数据：shallowRef + 普通对象，避免上千行 deep 响应式拖垮 Handsontable
+const priceListData = shallowRef<any[]>([])
 const priceListSelectedIds = ref<number[]>([])
+const priceListHotRef = ref<{ selectAll: () => void; clearSelection: () => void } | null>(null)
 const batchFillModalVisible = ref(false)
 const batchFillValue = ref<number | undefined>(undefined)
 const batchFillOnlyEmpty = ref(false)
 
+function replacePriceListData(rows: any[]) {
+  priceListData.value = (rows || []).map((row) => ({
+    ...row,
+    checked: !!(row as any)?.checked,
+  }))
+}
+
+/** 换新数组引用，触发 Handsontable 浅监听刷新（行对象可复用） */
+function touchPriceListData() {
+  priceListData.value = priceListData.value.slice()
+}
+
+function clearPriceListChecked() {
+  priceListSelectedIds.value = []
+  priceListHotRef.value?.clearSelection()
+}
+
+function onPriceListSelectionChange(ids: Array<number | string>) {
+  priceListSelectedIds.value = ids.map((id) => Number(id)).filter((id) => Number.isFinite(id))
+}
+
+function selectAllPriceListRows() {
+  priceListHotRef.value?.selectAll()
+}
+
+function clearAllPriceListRowsSelection() {
+  priceListHotRef.value?.clearSelection()
+}
+
+/** 因素值预览：行内最多展示条数，超出用 +N 弹层 */
+const FACTOR_VALUE_PREVIEW_LIMIT = 10
+
+function getFactorValuePreview(row: any) {
+  const values = Array.isArray(row?.factorValues) ? row.factorValues : []
+  const limit = FACTOR_VALUE_PREVIEW_LIMIT
+  return {
+    values,
+    visible: values.slice(0, limit),
+    extraCount: Math.max(0, values.length - limit),
+  }
+}
+
 // 价格表数据（用于列表展示）
 const priceTableData = ref<any[]>([])
 
-
 // 价格弹窗相关
 const priceModalVisible = ref(false)
 const priceDrawerActiveTab = ref('basic')
+const priceListMergeSame = ref(false)
 const isEditMode = ref(false)
 const editingPriceRecord = ref<any>(null)
+const priceEditPreparing = ref(false)
 
 // 基础信息表单
 const basicInfoForm = reactive({
@@ -2730,65 +2805,206 @@ const basicInfoForm = reactive({
   chargingCondition: ''
 })
 
-// 渠道买价表列（与销售产品-产品卖价一致：字典编码列用 slot 展示名称）
-const priceColumns = ref([
-  { title: t('channel.salesProducts.table.providers.serialNo'), dataIndex: 'serialNumber', width: 80, align: 'center' },
+// 渠道买价列表（TablePro）
+const priceListTableRef = ref<any>(null)
+const priceTableContainerRef = ref<HTMLElement | null>(null)
+const priceListTableHeight = ref(400)
+let priceListResizeObserver: ResizeObserver | null = null
+let priceListHeightRaf = 0
+
+function applyPriceListTableHeight(h: number, force = false) {
+  if (h < 160) return
+  if (!force && Math.abs(h - priceListTableHeight.value) < 2) return
+  priceListTableHeight.value = h
+  priceListTableRef.value?.setHeight?.(h)
+}
+
+function syncPriceListTableHeight(force = false) {
+  const el = priceTableContainerRef.value
+  if (!el) return
+  const h = Math.floor(el.clientHeight || el.getBoundingClientRect().height)
+  applyPriceListTableHeight(h, force)
+}
+
+function setupPriceListResizeObserver() {
+  if (priceListResizeObserver) return
+  if (priceListHeightRaf) {
+    cancelAnimationFrame(priceListHeightRaf)
+    priceListHeightRaf = 0
+  }
+  const el = priceTableContainerRef.value
+  if (!el || typeof ResizeObserver === 'undefined') return
+  priceListResizeObserver = new ResizeObserver(() => {
+    if (priceListHeightRaf) cancelAnimationFrame(priceListHeightRaf)
+    priceListHeightRaf = requestAnimationFrame(() => {
+      priceListHeightRaf = 0
+      syncPriceListTableHeight()
+    })
+  })
+  priceListResizeObserver.observe(el)
+  nextTick(() => syncPriceListTableHeight(true))
+}
+
+const priceColumns = computed(() => [
   {
+    field: 'serialNumber',
+    title: t('channel.salesProducts.table.providers.serialNo'),
+    width: 72,
+    align: 'center',
+  },
+  {
+    field: 'status',
     title: t('channel.salesProducts.table.price.status'),
-    dataIndex: 'status',
     width: 100,
     align: 'center',
-    slotName: 'status',
+    slots: { default: 'status' },
   },
   {
-    title: t('channel.salesProducts.drawer.form.costItem'),
-    dataIndex: 'costItem',
-    width: 140,
-    slotName: 'costItemCell',
+    field: 'costItem',
+    title: t('channel.serviceChannels.drawer.form.costItem'),
+    minWidth: 120,
+    slots: { default: 'costItemCell' },
   },
   {
-    title: t('channel.salesProducts.drawer.form.costUnit'),
-    dataIndex: 'costUnit',
+    field: 'costUnit',
+    title: t('channel.serviceChannels.drawer.form.costUnit'),
     width: 100,
     align: 'center',
-    slotName: 'costUnitCell',
+    slots: { default: 'costUnitCell' },
   },
   {
-    title: t('channel.salesProducts.drawer.form.currency'),
-    dataIndex: 'currency',
+    field: 'currency',
+    title: t('channel.serviceChannels.drawer.form.currency'),
     width: 100,
     align: 'center',
-    slotName: 'currencyCell',
+    slots: { default: 'currencyCell' },
   },
   {
-    title: t('channel.salesProducts.drawer.section.billingFactors'),
-    dataIndex: 'billingFactors',
-    width: 200,
-    ellipsis: true,
-    tooltip: true,
-    slotName: 'billingFactorsCell',
+    field: 'billingFactors',
+    title: t('channel.serviceChannels.drawer.section.billingFactors'),
+    minWidth: 200,
+    showOverflow: true,
+    slots: { default: 'billingFactorsCell' },
   },
-  { title: '修改时间', dataIndex: 'modifyTime', width: 180 },
-  { title: '修改人', dataIndex: 'modifier', width: 100 },
   {
+    field: 'modifyTime',
+    title: '修改时间',
+    width: 180,
+  },
+  {
+    field: 'modifier',
+    title: '修改人',
+    width: 100,
+  },
+  {
+    field: 'action',
     title: t('channel.salesProducts.table.providers.actions'),
-    width: 150,
+    width: 120,
     align: 'center',
     fixed: 'right',
-    slotName: 'operations',
+    slots: { default: 'operations' },
   },
 ])
 
+const priceListTableProps = computed(() => ({
+  columns: priceColumns.value,
+  showPager: false,
+  showToolbar: false,
+  showIndex: false,
+  isCellSort: false,
+  isColumnsDrag: false,
+  useForm: false,
+  autoHeight: false,
+  keepSource: true,
+  size: 'small',
+  tableConfig: { height: 400 },
+  toolbarConfig: { setting: false, enabled: false },
+  rowConfig: { isHover: true, keyField: 'id' },
+}))
+
+watch(
+  priceTableData,
+  (rows) => {
+    nextTick(() => {
+      priceListTableRef.value?.reloadData?.(rows || [])
+    })
+  },
+  { deep: false },
+)
+
+watch(
+  () => activeTab.value,
+  (tab) => {
+    if (tab !== 'price') {
+      priceListResizeObserver?.disconnect()
+      priceListResizeObserver = null
+      return
+    }
+    nextTick(() => setupPriceListResizeObserver())
+  },
+  { immediate: true },
+)
+
 // 发布记录相关
 const publishRecordTab = ref('price')
+const publishRecordCounts = reactive({ price: 0, rules: 0 })
 
 const publishRecordTabItems = computed(() => [
-  { key: 'price', label: t('channel.serviceChannels.record.tabs.price') },
-  { key: 'rules', label: t('channel.serviceChannels.record.tabs.rules') },
+  {
+    key: 'price',
+    label: t('channel.serviceChannels.record.tabs.price'),
+    badge: publishRecordCounts.price || undefined,
+  },
+  {
+    key: 'rules',
+    label: t('channel.serviceChannels.record.tabs.rules'),
+    badge: publishRecordCounts.rules || undefined,
+  },
 ])
 const currentListData = ref<any[]>([])
 const publishRecordActiveIndex = ref(0)
 const currentPublishRecord = computed(() => currentListData.value[publishRecordActiveIndex.value] || {})
+const hasCurrentPublishRecord = computed(() => {
+  const rec = currentPublishRecord.value as Record<string, any>
+  return rec != null && rec.id != null
+})
+
+function isPublishRecordEffectiveRow(row: Record<string, any> | undefined): boolean {
+  if (!row) return false
+  const s = row.status ?? row.Status
+  if (s === '生效') return true
+  if (typeof s === 'string' && ['effective', 'active', 'published'].includes(s.toLowerCase())) return true
+  if (s === 1 || s === '1') return true
+  return false
+}
+
+const canRollbackPublishRecord = computed(() => {
+  const rec = currentPublishRecord.value as Record<string, any>
+  if (!rec || rec.id == null) return false
+  const effectiveRow = currentListData.value.find((item) => isPublishRecordEffectiveRow(item))
+  if (effectiveRow != null && Number(effectiveRow.id) === Number(rec.id)) return false
+  return true
+})
+
+function publishRecordStatusMeta(status: unknown) {
+  if (status === '生效') {
+    return {
+      label: t('channel.serviceChannels.record.actions.publish'),
+      className: 'type-effective',
+    }
+  }
+  if (status === '回滚') {
+    return {
+      label: t('channel.serviceChannels.record.status.rollback'),
+      className: 'type-rollback',
+    }
+  }
+  return {
+    label: status == null || status === '' ? '--' : String(status),
+    className: 'type-invalid',
+  }
+}
+
 const formattedJsonContent = computed(() => {
   if (!currentPublishRecord.value?.content) return ''
   try {
@@ -2826,7 +3042,8 @@ async function refreshChannelPriceEffectiveInfo(serviceChannelId?: number | stri
   }
 }
 
-function mapServiceChannelPriceRow(p: any, idx: number) {
+function mapServiceChannelPriceRow(p: any, idx: number, opts?: { includeDetails?: boolean }) {
+  const includeDetails = opts?.includeDetails !== false
   const id = p?.id ?? p?.Id
   const serialNumber = p?.serialNumber ?? p?.SerialNumber ?? idx + 1
   const st = p?.status ?? p?.Status
@@ -2838,13 +3055,16 @@ function mapServiceChannelPriceRow(p: any, idx: number) {
     factorValues: f?.factorValues ?? f?.FactorValues ?? f?.values ?? f?.Values ?? [],
   }))
   const billingFactors =
-    factors.map((f: any) => f.factor).filter(Boolean).join('+') || '-'
+    factors.map((f: any) => pricingFactorColumnLabel(String(f.factor ?? ''))).filter(Boolean).join('+') ||
+    factors.map((f: any) => f.factor).filter(Boolean).join('+') ||
+    '-'
   const key =
     id != null && id !== ''
       ? id
       : `sc-price-${idx}-${serialNumber}-${String(p?.costItem ?? p?.CostItem ?? '')}`
+  const detailsRaw = p?.details ?? p?.Details
+  const audit = pickResolvedAudit(p)
   return {
-    ...p,
     key,
     id,
     serialNumber,
@@ -2853,21 +3073,53 @@ function mapServiceChannelPriceRow(p: any, idx: number) {
     costItem: p?.costItem ?? p?.CostItem,
     costUnit: p?.costUnit ?? p?.CostUnit,
     currency: p?.currency ?? p?.Currency,
-    chargingCondition: p?.chargingCondition ?? p?.ChargingCondition,
-    factors,
-    details: Array.isArray(p?.details ?? p?.Details) ? (p.details ?? p.Details) : [],
+    chargingCondition: (p?.chargingCondition ?? p?.ChargingCondition) || '',
     billingFactors,
-    modifyTime: p?.updateTime ?? p?.UpdateTime ?? p?.createTime ?? p?.CreateTime ?? '',
-    modifier: p?.updateBy ?? p?.UpdateBy ?? p?.createBy ?? p?.CreateBy ?? '',
+    factors: markRaw(factors),
+    details: includeDetails && Array.isArray(detailsRaw) ? detailsRaw : null,
+    modifyTime: audit.updateTime,
+    modifier: audit.updateBy,
   }
 }
 
+let priceTabLoadSeq = 0
+
+async function loadPriceTabData(serviceChannelId: number | string) {
+  const cid = Number(serviceChannelId)
+  const seq = ++priceTabLoadSeq
+  try {
+    const [prices] = await Promise.all([
+      getServiceChannelPriceList(cid, { includeDetails: false }),
+      refreshChannelPriceEffectiveInfo(cid),
+    ])
+    if (seq !== priceTabLoadSeq || Number((selectedChannel.value as any)?.id) !== cid) return
+    // 映射前确保字典就绪，计费因素列显示中文名而非 code
+    await ensureChannelPriceDictLoaded()
+    if (seq !== priceTabLoadSeq || Number((selectedChannel.value as any)?.id) !== cid) return
+    const list = Array.isArray(prices) ? prices : []
+    priceTableData.value = list.map((p: any, i: number) =>
+      mapServiceChannelPriceRow(p, i, { includeDetails: false }),
+    )
+    const runPublishCheck = () => {
+      if (seq !== priceTabLoadSeq || Number((selectedChannel.value as any)?.id) !== cid) return
+      void refreshPricePublishSyncStatus(cid)
+    }
+    if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
+      ;(window as any).requestIdleCallback(runPublishCheck, { timeout: 1200 })
+    } else {
+      window.setTimeout(runPublishCheck, 300)
+    }
+  } catch (e) {
+    if (seq !== priceTabLoadSeq) return
+    console.error(e)
+    effectiveVersion.value = '--'
+    effectiveTime.value = '--'
+  }
+}
+
+/** @deprecated use loadPriceTabData */
 async function loadServiceChannelPriceRows(serviceChannelId: number | string) {
-  const raw = await getServiceChannelPriceList(serviceChannelId)
-  const list = Array.isArray(raw) ? raw : []
-  priceTableData.value = list.map((p: any, i: number) => mapServiceChannelPriceRow(p, i))
-  await refreshChannelPriceEffectiveInfo(serviceChannelId)
-  void refreshPricePublishSyncStatus(serviceChannelId)
+  await loadPriceTabData(serviceChannelId)
 }
 
 function mapPublishRecordRow(r: any) {
@@ -2893,6 +3145,8 @@ async function loadServiceChannelPublishRecords(tab?: 'price' | 'rules') {
   const cid = (selectedChannel.value as any)?.id
   if (cid == null) {
     currentListData.value = []
+    publishRecordCounts.price = 0
+    publishRecordCounts.rules = 0
     return
   }
   const t = tab ?? (publishRecordTab.value as 'price' | 'rules')
@@ -2902,24 +3156,29 @@ async function loadServiceChannelPublishRecords(tab?: 'price' | 'rules') {
         ? await getServiceChannelPublishPriceList({ serviceChannelId: cid, page: 1, pageSize: 200 })
         : await getServiceChannelPublishRulesList({ serviceChannelId: cid, page: 1, pageSize: 200 })
     currentListData.value = (res.items || []).map(mapPublishRecordRow)
+    publishRecordCounts[t] = currentListData.value.length
     publishRecordActiveIndex.value = 0
   } catch {
     currentListData.value = []
+    publishRecordCounts[t] = 0
   }
 }
 
-watch([activeTab, selectedChannel], async () => {
-  const cid = (selectedChannel.value as any)?.id
-  if (cid == null) return
-  if (activeTab.value === 'price') {
-    await ensureChannelPriceDictLoaded()
-    await loadServiceChannelPriceRows(cid)
-    await refreshChannelPriceEffectiveInfo(cid)
-  }
-  if (activeTab.value === 'records') {
-    await loadServiceChannelPublishRecords()
-  }
-})
+// 仅跟 tab 切换：渠道切换由 selectChannel 并行加载，避免重复请求
+watch(
+  () => activeTab.value,
+  async (tab) => {
+    const cid = (selectedChannel.value as any)?.id
+    if (cid == null) return
+    if (tab === 'price') {
+      await ensureChannelPriceDictLoaded()
+      await loadPriceTabData(cid)
+    }
+    if (tab === 'records') {
+      await loadServiceChannelPublishRecords()
+    }
+  },
+)
 
 // 发布日期相关
 const publishDateVisible = ref(false)
@@ -2962,7 +3221,7 @@ const priceTableHeaders = computed(() => {
 
   const unitPriceHeader: H = {
     key: 'unitPrice',
-    label: '单价/金额',
+    label: '买价',
     isCustomer: false,
   }
 
@@ -3022,7 +3281,7 @@ const syncPriceListData = (opts?: { dropMissing?: boolean }) => {
   combinations.forEach((combination, index) => {
     const row: any = {
       id: index + 1,
-      calculationFormula: defaultCalculationFormulaCode(),
+      calculationFormula: defaultCalculationFormulaDisplay(),
       calculatedValue: 0,
     }
 
@@ -3066,8 +3325,16 @@ const applySyncedPriceList = (result: {
   added: number
   removed: number
 }) => {
-  priceListData.value = result.newData
-  priceListSelectedIds.value = []
+  replacePriceListData(
+    result.newData.map((row) => ({
+      ...row,
+      calculationFormula: formulaCodeToLabel(
+        String(row.calculationFormula ?? defaultCalculationFormulaCode()),
+      ),
+      checked: false,
+    })),
+  )
+  clearPriceListChecked()
   priceDrawerActiveTab.value = 'priceList'
   const parts = [`保留 ${result.kept} 行`, `新增 ${result.added} 行`]
   if (result.removed > 0) parts.push(`移除 ${result.removed} 行`)
@@ -3097,27 +3364,9 @@ const handleGeneratePriceList = async () => {
   applySyncedPriceList(preview)
 }
 
-const priceListAllSelected = computed(() => {
-  const ids = priceListData.value.map((r) => r.id)
-  return ids.length > 0 && ids.every((id) => priceListSelectedIds.value.includes(id))
-})
-
-const toggleSelectAllPriceRows = (checked: boolean | Event) => {
-  const on = typeof checked === 'boolean' ? checked : !!(checked as any)?.target?.checked
-  priceListSelectedIds.value = on ? priceListData.value.map((r) => r.id) : []
-}
-
-const toggleSelectPriceRow = (id: number, checked: boolean | Event) => {
-  const on = typeof checked === 'boolean' ? checked : !!(checked as any)?.target?.checked
-  const set = new Set(priceListSelectedIds.value)
-  if (on) set.add(id)
-  else set.delete(id)
-  priceListSelectedIds.value = [...set]
-}
-
 const openBatchFillModal = (onlyEmpty = false) => {
   if (!priceListSelectedIds.value.length) {
-    Message.warning('请先勾选要填价的行')
+    Message.warning('请先选中要填价的行')
     return
   }
   batchFillOnlyEmpty.value = onlyEmpty
@@ -3142,13 +3391,14 @@ const handleConfirmBatchFill = () => {
     touched += 1
   }
   batchFillModalVisible.value = false
+  touchPriceListData()
   Message.success(touched ? `已填充 ${touched} 行单价` : '没有需要填充的行')
 }
 
 /** 将上一行单价复制到勾选行 */
 const handleCopyPrevRowPrices = () => {
   if (!priceListSelectedIds.value.length) {
-    Message.warning('请先勾选目标行')
+    Message.warning('请先选中目标行')
     return
   }
   const selected = new Set(priceListSelectedIds.value)
@@ -3160,6 +3410,7 @@ const handleCopyPrevRowPrices = () => {
     row.calculatedValue = Number(prev.calculatedValue) || 0
     copied += 1
   }
+  touchPriceListData()
   Message.success(copied ? `已将上一行单价复制到 ${copied} 行` : '没有可复制的行')
 }
 
@@ -3352,15 +3603,15 @@ const handleImportPriceList = () => {
         const importedData = jsonData.map((row: any, index: number) => {
           const newRow: any = {
             id: index + 1,
-            calculationFormula:
-              row[priceTableHeaders.value.find((h) => h.key === 'calculationFormula')?.label || ''] ||
-              defaultCalculationFormulaCode(),
+            calculationFormula: defaultCalculationFormulaDisplay(),
           }
 
           priceTableHeaders.value.forEach((header) => {
             if (header.key === 'calculationFormula') {
-              newRow.calculationFormula =
-                row[header.label] || defaultCalculationFormulaCode()
+              newRow.calculationFormula = formulaCodeToLabel(
+                formulaLabelToCode(String(row[header.label] || '')) ||
+                  defaultCalculationFormulaCode(),
+              )
             } else if (header.key === 'unitPrice') {
               newRow.calculatedValue = Number(row[header.label]) || 0
             } else if (!header.key.startsWith('factor_')) {
@@ -3373,8 +3624,10 @@ const handleImportPriceList = () => {
           return newRow
         })
 
-        priceListData.value = importedData
+        replacePriceListData(importedData)
         coercePriceListRowsFactorCells()
+        clearPriceListChecked()
+        touchPriceListData()
         Message.success('导入成功')
       } catch (error) {
         console.error('导入价格表失败:', error)
@@ -3473,9 +3726,7 @@ const handlePriceDrawerTabSwitch = async (tabKey: string) => {
   }
   priceDrawerActiveTab.value = tabKey
   if (tabKey === 'basic' && priceModalVisible.value) {
-    nextTick(() => {
-      initSortable()
-    })
+    refreshBillingFactorsTable()
   }
 }
 
@@ -3556,7 +3807,7 @@ const handleAddChannelToGroup = async (group: any) => {
   await Promise.all([mergeForecastTypeDictFromApi(), loadRemoteAreaSelectOptions()])
 }
 
-function applyServiceChannelDetailToForm(d: Record<string, any>) {
+function applyServiceChannelDetailToForm(d: Record<string, any>, channel?: any) {
   if (d == null || typeof d !== 'object') return
   formData.channelCode = String(d.channelCode ?? d.ChannelCode ?? '')
   formData.channelName = String(d.channelName ?? d.ChannelName ?? '')
@@ -3570,6 +3821,15 @@ function applyServiceChannelDetailToForm(d: Record<string, any>) {
   formData.remoteAreaId = remoteRaw != null && remoteRaw !== '' ? String(remoteRaw) : ''
   formData.description = String(d.description ?? d.Description ?? '')
   formData.preScript = String(d.preScript ?? d.PreScript ?? '')
+  // 列表原先不带 createBy/updateBy，详情有；合并进当前渠道供上下文栏展示
+  if (channel) {
+    const audit = pickResolvedAudit(d)
+    channel.createTime = audit.createTime || channel.createTime
+    channel.updateTime = audit.updateTime || channel.updateTime
+    channel.createBy = audit.createBy || channel.createBy
+    channel.updateBy = audit.updateBy || channel.updateBy
+    channel.raw = { ...(channel.raw || {}), ...d }
+  }
   resetConfigFormBaseline()
 }
 
@@ -3582,8 +3842,36 @@ const selectChannel = async (channel: any) => {
   }
   void ensureReferenceOptionsLoaded()
   await ensureChannelPriceDictLoaded()
+
+  // 买价 tab：详情与价格列表并行，缩短切换等待
+  if (activeTab.value === 'price') {
+    try {
+      const [d] = await Promise.all([
+        getServiceChannelDetail(channel.id),
+        loadPriceTabData(channel.id),
+      ])
+      if ((selectedChannel.value as any)?.id !== channel.id) return
+      if (d == null || typeof d !== 'object') {
+        Message.error('渠道详情为空，请稍后重试')
+        formData.channelCode = String(channel.channelCode ?? '')
+        formData.channelName = String(channel.name ?? '')
+        resetConfigFormBaseline()
+        return
+      }
+      applyServiceChannelDetailToForm(d, channel)
+    } catch (e) {
+      console.error(e)
+      Message.error((e as any)?.message || '加载渠道详情失败')
+      formData.channelCode = String(channel.channelCode ?? '')
+      formData.channelName = String(channel.name ?? '')
+      resetConfigFormBaseline()
+    }
+    return
+  }
+
   try {
     const d = await getServiceChannelDetail(channel.id)
+    if ((selectedChannel.value as any)?.id !== channel.id) return
     if (d == null || typeof d !== 'object') {
       Message.error('渠道详情为空，请稍后重试')
       formData.channelCode = String(channel.channelCode ?? '')
@@ -3591,7 +3879,7 @@ const selectChannel = async (channel: any) => {
       resetConfigFormBaseline()
       return
     }
-    applyServiceChannelDetailToForm(d)
+    applyServiceChannelDetailToForm(d, channel)
   } catch (e) {
     console.error(e)
     Message.error((e as any)?.message || '加载渠道详情失败')
@@ -3600,11 +3888,6 @@ const selectChannel = async (channel: any) => {
     resetConfigFormBaseline()
     return
   }
-  try {
-    await loadServiceChannelPriceRows(channel.id)
-  } catch (e) {
-    console.error('加载渠道买价失败:', e)
-  }
   if (activeTab.value === 'records') {
     try {
       await loadServiceChannelPublishRecords()
@@ -3809,8 +4092,8 @@ async function refreshPricePublishSyncStatus(serviceChannelId?: number | string)
       pricePublishPending.value = true
       return
     }
-    const { length } = computeSnapshotDiff(online, preview)
-    pricePublishPending.value = length < 0 ? null : length > 0
+    // 仅判断有无差异，禁止大快照走 diffJson（会卡死整页）
+    pricePublishPending.value = !snapshotsSemanticallyEqual(online, preview)
   } catch {
     pricePublishPending.value = null
   }
@@ -3870,72 +4153,110 @@ const handleChannelPublishPrice = async () => {
   }
 }
 
-// 新增价格
-const handleAddPrice = async () => {
-  await ensureChannelPriceDictLoaded()
-  await loadBillingFactorSelectOptions()
-  // 重置编辑模式
-  isEditMode.value = false
-  editingPriceRecord.value = null
-  // 重置表单
-  Object.assign(basicInfoForm, {
-    costItem: '',
-    costUnit: '',
-    currency: '',
-  chargingCondition: '无',
-  })
-  // 重置计费因素数据为默认值
-  billingFactorsData.value = getDefaultBillingFactorsData().map(item => ({ ...item }))
-  // 重置价格表数据
-  priceListData.value = []
-  priceDrawerActiveTab.value = 'basic'
-  priceModalVisible.value = true
-  
-  // 初始化拖拽排序
-  nextTick(() => {
-    initSortable()
-  })
+function normalizePriceListFormulaDisplays() {
+  for (const row of priceListData.value) {
+    if (!row || typeof row !== 'object') continue
+    row.calculationFormula = formulaCodeToLabel(
+      formulaLabelToCode(String(row.calculationFormula ?? '')),
+    )
+  }
 }
 
-// 编辑价格
-const handleEditPrice = async (record: any) => {
-  await ensureChannelPriceDictLoaded()
-  await loadBillingFactorSelectOptions()
-  isEditMode.value = true
-  editingPriceRecord.value = record
-  const cid = (selectedChannel.value as any)?.id
-  let sourceRecord = record
-  if (cid != null && record?.id != null) {
-    try {
-      const list = await getServiceChannelPriceList(cid)
-      const matched = (list || []).find(
-        (item: any) => String(item?.id ?? item?.Id) === String(record?.id ?? record?.Id)
-      )
-      if (matched) sourceRecord = matched
-    } catch (e: any) {
-      Message.warning(e?.message || '加载最新买价配置失败，已使用列表数据回填')
-    }
-  }
-  Object.assign(basicInfoForm, {
-    costItem: sourceRecord.costItem || '',
-    costUnit: sourceRecord.costUnit || '',
-    currency: sourceRecord.currency || '',
-    chargingCondition: sourceRecord.chargingCondition || '无',
-  })
+function applyPriceEditSourceRecord(sourceRecord: any) {
   billingFactorsData.value = normalizeBillingFactorsFromApi(sourceRecord?.factors)
   for (const row of billingFactorsData.value) {
     row.factorValues = toCanonicalFactorValues(row.factor, row.factorValues)
   }
-  priceListData.value = mapDetailsToPriceListRows(sourceRecord?.details || [])
+  replacePriceListData(mapDetailsToPriceListRows(sourceRecord?.details || []))
   coercePriceListRowsFactorCells()
-  priceListSelectedIds.value = []
-  // 编辑有明细时直接进入价格表，避免误点「同步」清价
-  priceDrawerActiveTab.value = priceListData.value.length > 0 ? 'priceList' : 'basic'
+  normalizePriceListFormulaDisplays()
+  clearPriceListChecked()
+  if (priceModalVisible.value && priceDrawerActiveTab.value === 'basic') {
+    refreshBillingFactorsTable()
+  }
+}
+
+// 新增价格
+const handleAddPrice = async () => {
+  await Promise.all([
+    ensureChannelPriceDictLoaded(),
+    loadBillingFactorSelectOptions(),
+  ])
+  isEditMode.value = false
+  editingPriceRecord.value = null
+  Object.assign(basicInfoForm, {
+    costItem: '',
+    costUnit: '',
+    currency: '',
+    chargingCondition: '无',
+  })
+  billingFactorsData.value = getDefaultBillingFactorsData().map((item) => ({ ...item }))
+  replacePriceListData([])
+  clearPriceListChecked()
+  priceDrawerActiveTab.value = 'basic'
   priceModalVisible.value = true
-  if (priceDrawerActiveTab.value === 'basic') {
-    nextTick(() => {
-      initSortable()
+  nextTick(() => {
+    refreshBillingFactorsTable()
+  })
+}
+
+async function activateEditPriceListTab() {
+  await nextTick()
+  await new Promise<void>((resolve) => {
+    requestAnimationFrame(() => resolve())
+  })
+  if (!priceModalVisible.value || !isEditMode.value) return
+  // 编辑场景默认进入价格表（详情异步回填后也要切过去）
+  priceDrawerActiveTab.value = 'priceList'
+}
+
+// 编辑价格配置（先开弹窗再填数据；列表缺 details 时按需拉单条）
+const handleEditPrice = async (record: any) => {
+  if (priceEditPreparing.value) return
+  priceEditPreparing.value = true
+  try {
+    isEditMode.value = true
+    editingPriceRecord.value = record
+
+    Object.assign(basicInfoForm, {
+      costItem: record.costItem || '',
+      costUnit: record.costUnit || '',
+      currency: record.currency || '',
+      chargingCondition: record.chargingCondition || '无',
     })
+
+    billingFactorsData.value = normalizeBillingFactorsFromApi(record?.factors)
+    replacePriceListData(mapDetailsToPriceListRows(record?.details || []))
+    coercePriceListRowsFactorCells()
+    clearPriceListChecked()
+
+    // 列表行常无 details：先开基础信息保证即时反馈，数据就绪后再切价格表
+    priceDrawerActiveTab.value = 'basic'
+    priceModalVisible.value = true
+
+    await Promise.all([
+      ensureChannelPriceDictLoaded(),
+      loadBillingFactorSelectOptions(),
+    ])
+
+    applyPriceEditSourceRecord(record)
+    normalizePriceListFormulaDisplays()
+    await activateEditPriceListTab()
+
+    const hasLocalDetails = Array.isArray(record?.details) && record.details.length > 0
+    if (hasLocalDetails || record?.id == null) return
+    try {
+      const matched = await getServiceChannelPrice(record.id)
+      if (!priceModalVisible.value || editingPriceRecord.value?.id !== record?.id) return
+      if (matched) {
+        applyPriceEditSourceRecord(matched)
+        await activateEditPriceListTab()
+      }
+    } catch (e: any) {
+      Message.warning(e?.message || '加载最新价格配置失败，已使用列表数据回填')
+    }
+  } finally {
+    priceEditPreparing.value = false
   }
 }
 
@@ -3955,10 +4276,14 @@ const handleChangePublishRecordIndex = (index: number) => {
 
 // 回滚到指定版本
 const handleRollbackToVersion = () => {
-  if (!currentPublishRecord.value) {
+  if (!hasCurrentPublishRecord.value) {
     Message.warning('请选择要回滚的版本')
     return
   }
+  if (!canRollbackPublishRecord.value) {
+    Message.warning('当前选中版本为线上生效版本，无需回滚')
+    return
+  }
   Modal.confirm({
     title: '确认回滚',
     content: `确定要回滚到版本 "${currentPublishRecord.value.version}" 吗？`,
@@ -4018,34 +4343,33 @@ const handleConfirmPublishDate = async (date: Date | null) => {
 // 拖拽排序相关
 let sortableInstance: any = null
 
-// 初始化拖拽排序
+// 初始化拖拽排序（TablePro / vxe-table tbody）
 const initSortable = () => {
-  // 销毁旧的实例
   if (sortableInstance) {
     sortableInstance.destroy()
     sortableInstance = null
   }
-  
+
   nextTick(() => {
-    const tbody = document.querySelector('.billing-factors-table .billing-factors-tbody')
+    const root = billingFactorsTableRef.value?.$el as HTMLElement | undefined
+    const tbody = root?.querySelector(
+      '.body--wrapper>.vxe-table--body tbody',
+    ) as HTMLElement | null
     if (!tbody) return
-    
-    sortableInstance = Sortable.create(tbody as HTMLElement, {
-      handle: '.drag-icon',
+
+    sortableInstance = Sortable.create(tbody, {
+      handle: '.sort',
       animation: 150,
       onEnd: (evt: any) => {
         const { oldIndex, newIndex } = evt
         if (oldIndex === newIndex || oldIndex === undefined || newIndex === undefined) return
-        
-        // 更新数据顺序
         const movedItem = billingFactorsData.value.splice(oldIndex, 1)[0]
         billingFactorsData.value.splice(newIndex, 0, movedItem)
-        
-        // 重新编号
         billingFactorsData.value.forEach((item, idx) => {
           item.serialNumber = idx + 1
         })
-      }
+        billingFactorsTableRef.value?.reloadData?.(billingFactorsData.value)
+      },
     })
   })
 }
@@ -4053,11 +4377,9 @@ const initSortable = () => {
 // 取消价格弹窗
 const handleCancelPriceDrawer = () => {
   priceModalVisible.value = false
-  // 重置编辑模式
   isEditMode.value = false
   editingPriceRecord.value = null
-  priceListSelectedIds.value = []
-  // 清理拖拽实例
+  clearPriceListChecked()
   if (sortableInstance) {
     sortableInstance.destroy()
     sortableInstance = null
@@ -4072,9 +4394,14 @@ const priceDrawerTabList = [
 
 // 选项数据（与销售产品卖价一致：走字典）
 const factorOptions = computed(() =>
-  mapDictToSelectOptions('pricing_factor').filter(
-    (opt) => !isCustomerFactor(String(opt.value)) && !isCustomerFactor(String(opt.label))
-  )
+  mapDictToSelectOptions('pricing_factor')
+    .filter(
+      (opt) => !isCustomerFactor(String(opt.value)) && !isCustomerFactor(String(opt.label))
+    )
+    .map((opt) => ({
+      value: opt.value,
+      label: pricingFactorColumnLabel(opt.value),
+    }))
 )
 const costItemOptions = computed(() => mapDictToSelectOptions('fee_item'))
 
@@ -4092,6 +4419,165 @@ const costUnitOptions = computed(() => mapDictToSelectOptions('cost_unit'))
 const currencyOptions = computed(() => mapDictToSelectOptions('currency'))
 const calculationFormulaOptions = computed(() => mapDictToSelectOptions('calculation_formula'))
 
+/** 计费因素去重键：同义词（如 zone/价格分区）视为同一因素 */
+function billingFactorDedupKey(factor: string): string {
+  const s = String(factor ?? '').trim()
+  if (!s) return ''
+  if (isPartitionValueFactor(s)) return 'zone'
+  if (isRemotePartitionValueFactor(s)) return 'remoteZone'
+  if (isWarehouseValueFactor(s)) return 'warehouse'
+  if (isWeightValueFactor(s)) return 'weight'
+  if (isCustomerGroupValueFactor(s) || isCustomerFactor(s)) return 'customer'
+  if (isCargoTypeValueFactor(s)) return 'cargo'
+  return s
+}
+
+function isBillingFactorAlreadyUsed(factor: string, currentRowId?: number): boolean {
+  const key = billingFactorDedupKey(factor)
+  if (!key) return false
+  return billingFactorsData.value.some(
+    (r) =>
+      r.id !== currentRowId
+      && billingFactorDedupKey(String(r.factor ?? '')) === key,
+  )
+}
+
+function isBillingFactorOptionDisabled(
+  optionValue: string,
+  currentRow: { id: number; factor?: string },
+) {
+  const key = billingFactorDedupKey(optionValue)
+  if (!key) return false
+  if (billingFactorDedupKey(String(currentRow?.factor ?? '')) === key) return false
+  return isBillingFactorAlreadyUsed(optionValue, currentRow?.id)
+}
+
+function handleBillingFactorChange(
+  row: { id: number; factor?: string; factorValues?: string[] },
+  value: string,
+) {
+  if (!value) return
+  if (isBillingFactorAlreadyUsed(value, row.id)) {
+    Message.warning('该因素已存在，不能重复添加')
+    row.factor = ''
+    row.factorValues = []
+  }
+}
+
+const billingFactorsTableRef = ref<any>(null)
+const billingFactorsTableWrapRef = ref<HTMLElement | null>(null)
+const billingFactorsTableHeight = ref(220)
+let billingFactorsResizeObserver: ResizeObserver | null = null
+let billingFactorsHeightRaf = 0
+
+const billingFactorColumns = computed(() => [
+  {
+    field: 'sort',
+    title: t('channel.serviceChannels.drawer.table.billingFactors.serialNo'),
+    className: 'sort',
+    width: 52,
+    align: 'center',
+    slots: { default: 'sort' },
+  },
+  {
+    field: 'factor',
+    title: t('channel.serviceChannels.drawer.table.billingFactors.factor'),
+    width: 140,
+    slots: { default: 'factor' },
+  },
+  {
+    field: 'factorValues',
+    title: t('channel.serviceChannels.drawer.table.billingFactors.factorValues'),
+    minWidth: 420,
+    showOverflow: false,
+    slots: { default: 'factorValues' },
+  },
+  {
+    field: 'action',
+    title: t('channel.serviceChannels.drawer.table.billingFactors.actions'),
+    width: 64,
+    align: 'center',
+    showOverflow: false,
+    slots: { default: 'action' },
+  },
+])
+
+function applyBillingFactorsTableHeight(h: number) {
+  if (h < 120) return
+  billingFactorsTableHeight.value = h
+  const table = billingFactorsTableRef.value
+  table?.setHeight?.(h)
+  nextTick(() => {
+    const grid = table?.xGrid
+    if (grid && typeof grid.recalculate === 'function') {
+      grid.recalculate(true)
+    }
+  })
+}
+
+function syncBillingFactorsTableHeight(force = false) {
+  const el = billingFactorsTableWrapRef.value
+  if (!el) return
+  const h = Math.floor(el.clientHeight || el.getBoundingClientRect().height)
+  if (h < 120) return
+  if (!force && Math.abs(h - billingFactorsTableHeight.value) < 2) return
+  applyBillingFactorsTableHeight(h)
+}
+
+function setupBillingFactorsResizeObserver() {
+  billingFactorsResizeObserver?.disconnect()
+  billingFactorsResizeObserver = null
+  if (billingFactorsHeightRaf) {
+    cancelAnimationFrame(billingFactorsHeightRaf)
+    billingFactorsHeightRaf = 0
+  }
+  const el = billingFactorsTableWrapRef.value
+  if (!el || typeof ResizeObserver === 'undefined') return
+  billingFactorsResizeObserver = new ResizeObserver(() => {
+    if (billingFactorsHeightRaf) cancelAnimationFrame(billingFactorsHeightRaf)
+    billingFactorsHeightRaf = requestAnimationFrame(() => {
+      billingFactorsHeightRaf = 0
+      syncBillingFactorsTableHeight()
+    })
+  })
+  billingFactorsResizeObserver.observe(el)
+  nextTick(() => {
+    syncBillingFactorsTableHeight(true)
+    setTimeout(() => syncBillingFactorsTableHeight(true), 80)
+  })
+}
+
+const billingFactorsTableProps = computed(() => ({
+  columns: billingFactorColumns.value,
+  isCellSort: false,
+  showToolbar: false,
+  isColumnsDrag: false,
+  showPager: false,
+  showIndex: false,
+  data: billingFactorsData.value,
+  minHeight: 120,
+  keepSource: true,
+  size: 'small',
+  useForm: false,
+  autoHeight: false,
+  height: billingFactorsTableHeight.value,
+  tableConfig: {
+    height: billingFactorsTableHeight.value,
+  },
+  toolbarConfig: { setting: false, enabled: false },
+  rowConfig: { isHover: true, keyField: 'id', height: 52 },
+  scrollY: { enabled: true, gt: 0 },
+}))
+
+function refreshBillingFactorsTable() {
+  nextTick(() => {
+    syncBillingFactorsTableHeight()
+    billingFactorsTableRef.value?.reloadData?.(billingFactorsData.value)
+    initSortable()
+    setupBillingFactorsResizeObserver()
+  })
+}
+
 // 新增计费因素行
 const handleAddBillingFactor = () => {
   const newId = Math.max(...billingFactorsData.value.map((item) => item.id || 0), 0) + 1
@@ -4102,26 +4588,86 @@ const handleAddBillingFactor = () => {
     factorValues: [],
   })
   if (priceModalVisible.value && priceDrawerActiveTab.value === 'basic') {
-    nextTick(() => {
-      initSortable()
-    })
+    refreshBillingFactorsTable()
   }
 }
 
 // 删除计费因素行
-const handleDeleteBillingFactor = (index: number) => {
+const handleDeleteBillingFactor = (row: { id: number } | number) => {
+  const index =
+    typeof row === 'number'
+      ? row
+      : billingFactorsData.value.findIndex((item) => item.id === row.id)
+  if (index < 0) return
   billingFactorsData.value.splice(index, 1)
-  // 重新编号
   billingFactorsData.value.forEach((item, idx) => {
     item.serialNumber = idx + 1
   })
   if (priceModalVisible.value && priceDrawerActiveTab.value === 'basic') {
-    nextTick(() => {
-      initSortable()
-    })
+    refreshBillingFactorsTable()
   }
 }
 
+const priceListHotColumns = computed<PriceListHotColumn[]>(() => {
+  const formulaSource = Array.from(
+    new Set(
+      calculationFormulaOptions.value
+        .map((o) => String(o.label || o.value || '').trim())
+        .filter(Boolean),
+    ),
+  )
+  if (!formulaSource.length) {
+    const fallback = defaultCalculationFormulaDisplay()
+    if (fallback) formulaSource.push(fallback)
+  }
+  return priceTableHeaders.value.map((header) => {
+    if (header.key.startsWith('factor_')) {
+      const factorIndex = header.factorIndex
+      return {
+        key: header.key,
+        label: header.label,
+        width: 120,
+        readOnly: true,
+        type: 'text' as const,
+        formatter: (row: any) =>
+          formatPriceTableFactorCell(factorIndex, String(row?.[header.key] ?? '')),
+      }
+    }
+    if (header.key === 'calculationFormula') {
+      return {
+        key: header.key,
+        label: header.label,
+        width: 140,
+        type: 'dropdown' as const,
+        source: formulaSource,
+      }
+    }
+    // unitPrice 列：数据字段为 calculatedValue
+    return {
+      key: 'calculatedValue',
+      label: header.label,
+      width: 110,
+      type: 'numeric' as const,
+    }
+  })
+})
+
+/** 仅列结构变化时重挂载 */
+const priceListHotTableKey = computed(
+  () => `price-hot-${priceListHotColumns.value.map((c) => c.key).join('|')}`,
+)
+
+onBeforeUnmount(() => {
+  priceListResizeObserver?.disconnect()
+  priceListResizeObserver = null
+  billingFactorsResizeObserver?.disconnect()
+  billingFactorsResizeObserver = null
+  if (sortableInstance) {
+    sortableInstance.destroy()
+    sortableInstance = null
+  }
+})
+
 // 添加因素值弹窗（与销售产品卖价一致：多选字典 / 分区 / 仓库等）
 const addFactorValueModalVisible = ref(false)
 const addFactorValueSelected = ref<string[]>([])
@@ -4591,35 +5137,27 @@ const handleConfirmPublish = async () => {
 
 }
 
-/* 第二行表格：创建时间对齐 node-title，开关对齐 node-actions-cell */
-.channel-second-row-table {
+/* 第二行：修改时间 + 开关（卡片高度由 CustomLeftMenu 固定，内容垂直居中） */
+.channel-second-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.channel-row-left {
-  text-align: left;
-  padding: 0;
+  height: 16px;
   padding-left: 24px;
-  vertical-align: middle;
-  width: auto;
-  font-size: 12px;
-  color: var(--color-text-3);
-
-  .create-time {
-    font-size: 10px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+  box-sizing: border-box;
 }
 
-.channel-row-right {
-  text-align: right;
-  padding: 0;
-  width: 30px;
-  vertical-align: middle;
+.modify-time {
+  flex: 1;
+  min-width: 0;
+  font-size: 10px;
+  line-height: 16px;
+  color: var(--color-text-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .channel-sidebar :deep(.channel-active-switch.arco-switch-checked) {
@@ -4638,7 +5176,7 @@ const handleConfirmPublish = async () => {
   text-align: left;
 }
 
-:deep(.tree-node.selected .create-time) {
+:deep(.tree-node.selected .modify-time) {
   font-size: 10px;
   color: #86909c !important;
 }
@@ -4851,29 +5389,42 @@ const handleConfirmPublish = async () => {
 
 .price-table-container {
   flex: 1;
-  overflow: auto;
-  
-  .price-table {
-    :deep(.arco-table-th) {
-      background-color: var(--color-fill-1);
-      font-weight: 500;
+  min-height: 0;
+  overflow: hidden;
+
+  .price-list-table-pro {
+    width: 100%;
+    min-height: 0;
+
+    :deep(.table-pro),
+    :deep(.table-pro-surface) {
+      height: 100%;
     }
-    
-    :deep(.arco-table-td) {
-      padding: 12px 16px;
+
+    :deep(.vxe-toolbar) {
+      display: none !important;
+      height: 0 !important;
+      min-height: 0 !important;
+      padding: 0 !important;
+      overflow: hidden !important;
     }
-    
+
+    :deep(.vxe-grid) {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
     .action-btn {
       color: var(--app-primary-color);
-      
+
       &:hover {
-        color: #1a6b6b;
-        background-color: #f0f9f9;
+        color: var(--app-primary-color);
+        background: color-mix(in srgb, var(--app-primary-color) 8%, #fff);
       }
-      
+
       &.delete-btn {
         color: #f53f3f;
-        
+
         &:hover {
           color: #d32f2f;
           background-color: #fff1f0;
@@ -4922,8 +5473,14 @@ const handleConfirmPublish = async () => {
 .basic-info-content {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  padding: 16px 0;
+  gap: 12px;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  .form-section-drawer {
+    flex-shrink: 0;
+  }
 
   .form-section-title {
     margin: 0 0 12px;
@@ -4966,197 +5523,256 @@ const handleConfirmPublish = async () => {
     :deep(.arco-form-item-label) {
       font-weight: 500;
     }
+
+    :deep(.charging-condition-form-item) {
+      margin-bottom: 12px;
+
+      .arco-form-item-label-col {
+        display: none;
+      }
+
+      .arco-form-item-wrapper-col {
+        flex: 1 1 100%;
+        width: 100%;
+      }
+    }
   }
 }
 
 .billing-factors-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+
   .billing-factors-header {
-    margin-bottom: 0;
+    flex-shrink: 0;
+    margin-bottom: 8px;
   }
-  
-.billing-factors-table {
-  border: 1px solid var(--color-border-2);
-  border-radius: 6px;
-  overflow-x: auto;
-  overflow-y: auto;
-  max-height: 360px;
-  
-  .factors-table {
+
+  .billing-factors-table-wrap {
+    flex: 1 1 auto;
+    min-height: 0;
     width: 100%;
-    min-width: 800px;
-    border-collapse: collapse;
-      
-      thead {
-        background-color: var(--color-fill-1);
-        
-        th {
-          padding: 12px 16px;
-          text-align: left;
-          font-weight: 600;
-          color: var(--color-text-1);
-          border-bottom: 1px solid #e8e8e8;
-        }
+    overflow: hidden;
+  }
+
+  .billing-factors-table-pro {
+    width: 100%;
+    min-height: 0;
+
+    :deep(.vxe-toolbar) {
+      display: none;
+    }
+  }
+
+  .billing-factor-sort-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-3);
+    cursor: move;
+    font-size: 18px;
+
+    &:hover {
+      color: var(--app-primary-color);
+    }
+  }
+
+  .factor-values-cell {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    max-height: 48px;
+    overflow: hidden;
+
+    .factor-value-tag {
+      flex-shrink: 0;
+      max-width: 88px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .factor-value-more {
+      flex-shrink: 0;
+      cursor: pointer;
+      color: var(--app-primary-color);
+      background: color-mix(in srgb, var(--app-primary-color) 10%, #fff);
+      border-color: color-mix(in srgb, var(--app-primary-color) 28%, #fff);
+
+      &:hover {
+        background: color-mix(in srgb, var(--app-primary-color) 16%, #fff);
       }
-      
-      tbody {
-        tr {
-          border-bottom: 1px solid var(--color-border-2);
-          
-          &:last-child {
-            border-bottom: none;
-          }
-          
-          &:hover {
-            background-color: var(--color-fill-1);
-          }
-          
-          td {
-            padding: 12px 16px;
-            vertical-align: middle;
-          }
-        }
-      }
-      
-      .serial-number-cell {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        
-        .drag-icon {
-          font-size: 18px;
-          color: var(--color-text-3);
-          cursor: move;
-          user-select: none;
-          
-          &:hover {
-            color: var(--app-primary-color);
-          }
-        }
-      }
-      
-      .factor-values-cell {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 4px;
-        
-        .add-value-btn {
-          color: var(--app-primary-color);
-          
-          &:hover {
-            color: #1a6b6b;
-            background-color: #f0f9f9;
-          }
-        }
+    }
+
+    .factor-values-empty {
+      flex-shrink: 0;
+      color: var(--color-text-4);
+      font-size: 12px;
+    }
+
+    .add-value-btn {
+      flex-shrink: 0;
+      margin-left: auto;
+      color: var(--app-primary-color);
+
+      &:hover {
+        color: var(--app-primary-color);
+        background: color-mix(in srgb, var(--app-primary-color) 8%, #fff);
       }
     }
   }
+
+  .row-action-btn {
+    color: var(--color-text-3);
+
+    &:hover {
+      color: rgb(var(--danger-6));
+    }
+  }
+}
+
+.factor-values-popover {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 400px;
+
+  &__title {
+    color: var(--color-text-3);
+    font-size: 12px;
+    line-height: 1.2;
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    max-height: 220px;
+    overflow: auto;
+  }
+}
+
+.price-modal-pane {
+  box-sizing: border-box;
+  height: 598px;
+  overflow: hidden;
 }
 
 .price-list-content {
-  padding: 24px 0;
-  
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+
   .price-list-header {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: nowrap;
     align-items: center;
-    margin-bottom: 16px;
-    
-    .price-list-title {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: baseline;
-      gap: 8px 12px;
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--color-text-1);
+    justify-content: space-between;
+    gap: 12px;
+    height: 40px;
+    flex-shrink: 0;
+    margin-bottom: 8px;
+    padding: 0 2px;
+  }
+
+  .price-list-header__meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  .price-list-badge {
+    flex-shrink: 0;
+    height: 24px;
+    padding: 0 10px;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--app-primary-color) 12%, #fff);
+    color: var(--app-primary-color);
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 24px;
+    white-space: nowrap;
+  }
+
+  .price-list-hint {
+    min-width: 0;
+    color: var(--color-text-3);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .price-list-count {
+    flex-shrink: 0;
+    color: var(--color-text-3);
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  .price-list-merge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--color-text-2);
+    font-size: 12px;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .price-list-actions {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    flex: 0 0 auto;
+
+    &__sep {
+      width: 1px;
+      height: 16px;
+      margin: 0 2px;
+      background: var(--color-border-2);
     }
 
-    .price-list-hint {
+    :deep(.arco-btn) {
+      height: 28px;
+      padding: 0 10px;
+      border-radius: 4px;
       font-size: 12px;
-      font-weight: 400;
-      color: var(--color-text-3);
-    }
-    
-    .price-list-actions {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      gap: 8px;
-      max-width: 72%;
     }
   }
-  
-  .price-list-table-container {
-    border: 1px solid #e8e8e8;
-    border-radius: 6px;
-    overflow-x: scroll;
-    overflow-y: scroll;
-    max-height: 500px;
-    height: 500px;
-    
-    .price-list-table {
-      width: 100%;
-      min-width: 1000px;
-      border-collapse: collapse;
 
-      .price-row-check {
-        text-align: center;
-        vertical-align: middle;
-      }
-      
-      thead {
-        background-color: var(--color-fill-1);
-        
-        th {
-          padding: 12px 16px;
-          text-align: left;
-          font-weight: 600;
-          color: var(--color-text-1);
-          border-bottom: 1px solid #e8e8e8;
-          border-right: 1px solid #e8e8e8;
-          
-          &:last-child {
-            border-right: none;
-          }
-        }
-      }
-      
-      tbody {
-        tr {
-          border-bottom: 1px solid var(--color-border-2);
-          
-          &:last-child {
-            border-bottom: none;
-          }
-          
-          &:hover {
-            background-color: var(--color-fill-1);
-          }
-          
-          td {
-            padding: 12px 16px;
-            vertical-align: middle;
-            border-right: 1px solid var(--color-border-2);
-            
-            &:last-child {
-              border-right: none;
-            }
-            
-            &.factor-cell {
-              font-weight: 500;
-              background-color: var(--color-fill-1);
-              vertical-align: middle;
-            }
-          }
-        }
-      }
-    }
+  .price-list-table-container {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 500px;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border: 1px solid var(--color-border-2);
+    border-radius: 6px;
+    background: #fff;
   }
 }
 
 .price-modal-content {
-  padding: 8px 0;
+  padding: 0;
   overflow: visible;
 }
 
@@ -5170,163 +5786,250 @@ const handleConfirmPublish = async () => {
 // 发布记录样式
 .publish-records-section {
   flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  padding: 16px 24px 24px;
   overflow: hidden;
+  gap: 12px;
+}
+
+.publish-records-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 32px;
+}
+
+.publish-records-hint {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--color-text-3);
+  white-space: nowrap;
 }
 
 .publish-records-container {
+  flex: 1;
+  min-height: 0;
   display: flex;
-  height: 100%;
   gap: 0;
-  border: 1px solid #e8e8e8;
-  border-radius: 6px;
+  border: 1px solid var(--color-border-2, #e8e8e8);
+  border-radius: 8px;
   overflow: hidden;
+  background: var(--app-card-bg, #fff);
 }
 
 .publish-records-left {
-  width: 370px;
-  border-right: 1px solid #e8e8e8;
+  width: 320px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-border-2, #e8e8e8);
   display: flex;
   flex-direction: column;
-  padding: 24px;
-  overflow-y: auto;
-  background-color: var(--color-fill-1);
-  
-  .version-header {
-    margin-bottom: 16px;
-    
-    .version-number {
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--color-text-1);
-    }
-  }
-  
-  .publish-tabs-container {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-    
-    .publish-link-btn {
-      color: #287EDC;
-      padding: 0;
-      
-      &:hover {
-        color: #1a6b6b;
-      }
-    }
-  }
-  
-  .user-info {
-    font-size: 12px;
-    color: var(--color-text-3);
-    margin-bottom: 16px;
-  }
-  
+  padding: 12px;
+  overflow: hidden;
+  background-color: var(--app-card-bg, #fff);
+
   .version-list {
     flex: 1;
+    min-height: 0;
     overflow-y: auto;
-    
-    .version-item {
-      padding: 12px;
-      margin-bottom: 8px;
-      background-color: var(--app-card-bg);
-      border-radius: 4px;
-      cursor: pointer;
-      transition: all 0.3s;
-      
-      &:hover {
-        background-color: #f6f8f8;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-right: 2px;
+  }
+
+  .version-item {
+    --vr-hover: rgba(15, 16, 17, 0.04);
+    --vr-selected: var(--app-primary-color-light);
+    --vr-selected-text: var(--app-primary-color);
+    --vr-selected-border: color-mix(in srgb, var(--app-primary-color) 32%, transparent);
+    --vr-muted: var(--color-text-3);
+
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    border: 1px solid rgba(15, 16, 17, 0.07);
+    text-align: left;
+    padding: 10px 12px;
+    background-color: var(--color-fill-1);
+    border-radius: 8px;
+    cursor: pointer;
+    box-shadow: none;
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--vr-hover);
+      border-color: rgba(15, 16, 17, 0.1);
+    }
+
+    &.active {
+      background: var(--vr-selected);
+      border-color: var(--vr-selected-border);
+      box-shadow: none;
+
+      .version-item-number {
+        color: var(--vr-selected-text);
+        font-weight: 560;
       }
-      
-      &.active {
-        background-color: #EDF6FF;
-      }
-      
-      .version-item-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-        
-        .version-item-number {
-          font-size: 12px;
-          color: #202122;
-          line-height: 14px;
-        }
-        
-        .version-item-type {
-          font-size: 14px;
-          line-height: 18px;
-          
-          &.type-publish,
-          &.type-effective {
-            color: #508A24;
-          }
-          
-          &.type-rollback {
-            color: #f53f3f;
-          }
-          
-          &.type-invalid {
-            color: var(--color-text-3);
-          }
-        }
-      }
-      
-      .version-item-footer {
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        color: #737373;
-        line-height: 18px;
+
+      .version-item-footer,
+      .version-item-user,
+      .version-item-time {
+        color: var(--vr-muted);
       }
     }
+
+    .version-item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .version-item-number {
+      min-width: 0;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-1);
+      line-height: 18px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .version-item-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--color-text-3);
+      line-height: 18px;
+    }
+
+    .version-item-user,
+    .version-item-time {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .version-item-time {
+      flex-shrink: 0;
+      max-width: 58%;
+    }
+  }
+}
+
+.version-item-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+
+  &.type-effective {
+    color: #508a24;
+    background: color-mix(in srgb, #508a24 12%, #fff);
+  }
+
+  &.type-rollback {
+    color: #d48806;
+    background: color-mix(in srgb, #faad14 16%, #fff);
+  }
+
+  &.type-invalid {
+    color: #cf1322;
+    background: color-mix(in srgb, #f53f3f 12%, #fff);
   }
 }
 
 .publish-records-right {
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  padding: 24px;
-  background-color: var(--app-card-bg);
+  padding: 16px 20px;
+  background-color: var(--app-card-bg, #fff);
   overflow: hidden;
-  
+
   .right-header {
+    flex-shrink: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 16px;
-    
-    .rollback-btn {
+    gap: 12px;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--color-border-2, #e8e8e8);
+  }
+
+  .rollback-btn {
+    color: var(--app-primary-color);
+
+    &:hover:not(:disabled) {
       color: var(--app-primary-color);
-      
-      &:hover {
-        color: #1a6b6b;
-      }
-    }
-    
-    .version-notes {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      color: var(--color-text-1);
-      font-size: 12px;
-      
-      .notes-icon {
-        cursor: pointer;
-      }
+      border-color: color-mix(in srgb, var(--app-primary-color) 45%, #fff);
+      background: color-mix(in srgb, var(--app-primary-color) 8%, #fff);
     }
   }
-  
+
+  .version-notes {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--color-text-2);
+    font-size: 12px;
+  }
+
+  .notes-icon {
+    cursor: pointer;
+    font-size: 16px;
+    vertical-align: middle;
+
+    &--remark {
+      color: #faad14;
+    }
+  }
+
   .code-content {
     flex: 1;
+    min-height: 0;
     overflow: auto;
+    border: 1px solid var(--color-border-2, #e8e8e8);
+    border-radius: 6px;
+    background: var(--color-fill-1, #f7f8fa);
   }
+
+  .code-pre {
+    margin: 0;
+    padding: 12px 14px;
+    font-family: Menlo, Consolas, 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.55;
+    color: var(--color-text-1);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+}
+
+.publish-records-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 12px;
 }
 
 .publish-date-modal {
@@ -5405,10 +6108,6 @@ const handleConfirmPublish = async () => {
   margin-top: 0;
 }
 
-.basic-info-content {
-  padding: 16px 0;
-}
-
 .drawer-tab-item {
   padding: 8px 24px;
 }
@@ -5467,4 +6166,18 @@ const handleConfirmPublish = async () => {
     font-size: 13px;
   }
 }
+</style>
+
+<style lang="less">
+/* 价格配置弹窗：允许 Handsontable 下拉层溢出 */
+.arco-modal.sales-price-config-modal {
+  .arco-modal-body {
+    overflow: visible !important;
+  }
+}
+
+.arco-modal.sales-price-config-modal .handsontable.listbox,
+.arco-modal.sales-price-config-modal .autocompleteEditor.handsontable.listbox {
+  z-index: 5600 !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/channel/weightRounding/index.vue b/src/views/channel/weightRounding/index.vue
index 2ec9c29..18edd78 100644
--- a/src/views/channel/weightRounding/index.vue
+++ b/src/views/channel/weightRounding/index.vue
@@ -41,7 +41,11 @@
                   <tr>
                     <td class="product-row-left">
                       <span class="update-time">
-                        {{ t('channel.weightRounding.updateTime', { time: nodeData?.updateTime ?? '' }) }}
+                        {{
+                          t('channel.weightRounding.updateTime', {
+                            time: nodeData?.updateTime || '--',
+                          })
+                        }}
                       </span>
                     </td>
                     <td class="product-row-right"></td>
@@ -159,6 +163,7 @@
   import ChannelConfigHotTable from '@/views/channel/components/ChannelConfigHotTable.vue';
   import type { ChannelHotColumn } from '@/views/channel/components/channelHotTable.types';
   import { syncChannelLeftSelection } from '@/views/channel/composables/channelLeftSelection';
+  import { pickResolvedAudit } from '@/utils/auditFields';
 
   const { t } = useI18n();
 
@@ -505,14 +510,19 @@
     {
       key: 'category-list',
       title: t('channel.weightRounding.listTitle'),
-      children: leftMenuData.value.map((item) => ({
-        key: `item-${item.id}`,
-        title: item.name,
-        isLeaf: true,
-        id: item.id,
-        name: item.name,
-        ...item,
-      })),
+      children: leftMenuData.value.map((item) => {
+        const audit = pickResolvedAudit(item);
+        return {
+          key: `item-${item.id}`,
+          title: item.name,
+          isLeaf: true,
+          id: item.id,
+          name: item.name,
+          ...item,
+          updateTime: audit.updateTime,
+          updateBy: audit.updateBy,
+        };
+      }),
     },
   ]);
 
diff --git a/src/views/channel/weightRules/index.vue b/src/views/channel/weightRules/index.vue
index 0326450..b1d9d45 100644
--- a/src/views/channel/weightRules/index.vue
+++ b/src/views/channel/weightRules/index.vue
@@ -41,7 +41,7 @@
                   <tr>
                     <td class="product-row-left">
                       <span class="update-time">
-                        {{ t('channel.weightRules.updateTime', { time: nodeData?.updateTime ?? '' }) }}
+                        {{ t('channel.weightRules.updateTime', { time: nodeData?.updateTime || '--' }) }}
                       </span>
                     </td>
                     <td class="product-row-right"></td>
@@ -161,6 +161,7 @@
   import ChannelConfigHotTable from '@/views/channel/components/ChannelConfigHotTable.vue';
   import type { ChannelHotColumn } from '@/views/channel/components/channelHotTable.types';
   import { syncChannelLeftSelection } from '@/views/channel/composables/channelLeftSelection';
+  import { pickResolvedAudit } from '@/utils/auditFields';
 
   const { t } = useI18n();
 
@@ -489,14 +490,19 @@
     {
       key: 'category-list',
       title: t('channel.weightRules.listTitle'),
-      children: leftMenuData.value.map((item) => ({
-        key: `item-${item.id}`,
-        title: item.name,
-        isLeaf: true,
-        id: item.id,
-        name: item.name,
-        ...item,
-      })),
+      children: leftMenuData.value.map((item) => {
+        const audit = pickResolvedAudit(item);
+        return {
+          key: `item-${item.id}`,
+          title: item.name,
+          isLeaf: true,
+          id: item.id,
+          name: item.name,
+          ...item,
+          updateTime: audit.updateTime,
+          updateBy: audit.updateBy,
+        };
+      }),
     },
   ]);
 
diff --git a/src/views/login/components/pwd-login/index.vue b/src/views/login/components/pwd-login/index.vue
index f310c95..83e8239 100644
--- a/src/views/login/components/pwd-login/index.vue
+++ b/src/views/login/components/pwd-login/index.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="nova-login">
-    <div class="nova-login__header">
+    <a
+      class="nova-login__header"
+      href="/"
+      :title="brandHint"
+      @click.prevent="goOfficialSite"
+    >
       <LoginLockLogo />
       <p class="nova-login__brand-hint">{{ brandHint }}</p>
-    </div>
+    </a>
 
     <form class="nova-login__form" autocomplete="off" @submit.prevent="handleSubmit">
       <div class="nova-login__input-group">
@@ -162,6 +167,11 @@ const isCustomerLogin = computed(() => props.loginType === OmsLoginType.Customer
 const brandHint = computed(() =>
   t(isCustomerLogin.value ? 'login.form.brandHint.customer' : 'login.form.brandHint.admin'),
 );
+
+/** Logo / 欢迎文案 → 官网首页 */
+function goOfficialSite() {
+  window.location.href = '/';
+}
 const accountFieldLabel = computed(() => t('login.field.account'));
 const accountPlaceholder = computed(() =>
   isCustomerLogin.value
@@ -403,8 +413,12 @@ async function handleSubmit() {
 
 <style lang="less" scoped>
 .nova-login__header {
+  display: block;
   text-align: center;
   margin-bottom: 28px;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .nova-login__brand-hint {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 34f21b6..5f04ae0 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -164,6 +164,7 @@ provide(LOGIN_EXIT_KEY, {
     if (isExiting.value) {
       return Promise.resolve();
     }
+    // Flips login-container--exit: hides admin overlays outside pane clip-paths
     isExiting.value = true;
 
     const leftTargets = collectExitTargets('left');
@@ -335,6 +336,15 @@ onBeforeUnmount(() => {
 
 .login-container--exit {
   pointer-events: none;
+
+  /* Safety net: admin overlays are outside pane clip-paths */
+  .login-hero-panel--admin,
+  .login-characters-panel--admin,
+  :deep(.login-care-banner) {
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none;
+  }
 }
 
 .login-split {
diff --git a/src/views/order/customs9610Order/index.vue b/src/views/order/customs9610Order/index.vue
index 8d10b38..0ab1eaa 100644
--- a/src/views/order/customs9610Order/index.vue
+++ b/src/views/order/customs9610Order/index.vue
@@ -695,8 +695,7 @@ watch(adminCustomerId, () => {
 })
 
 onMounted(() => {
-  loadList()
-  loadCounts()
+  void Promise.all([loadList(), loadCounts()])
 })
 </script>
 
diff --git a/src/views/order/myOrders/index.vue b/src/views/order/myOrders/index.vue
index 36d3b08..9ad5d2c 100644
--- a/src/views/order/myOrders/index.vue
+++ b/src/views/order/myOrders/index.vue
@@ -1,11 +1,20 @@
 <script lang="ts" setup>
-  import { ref, computed, onMounted, nextTick, watch, reactive } from 'vue';
+  import {
+    ref,
+    computed,
+    onMounted,
+    nextTick,
+    watch,
+    reactive,
+    defineAsyncComponent,
+  } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { IconCalendar, IconDown, IconQuestionCircleFill } from '@arco-design/web-vue/es/icon';
   import { Message, Modal } from '@arco-design/web-vue';
   import dayjs from 'dayjs';
   import HandsontablePro from '@/components/HandsontablePro/index.vue';
   import PaginationPro from '@/components/PaginationPro/index.vue';
+  import SlidingTabs from '@/components/SlidingTabs/index.vue';
   import { useTableContainerHeight } from '@/composables/useTableContainerHeight';
   import { useI18n } from 'vue-i18n';
   import {
@@ -40,13 +49,6 @@
   } from '@/api/order';
   import { notifyCustomerBalanceChanged } from '@/api/customer/accountFlow';
   import { buildFailGuideFromReason } from '@/utils/parcelCreateFailGuide';
-  import OrderDetailDrawer from './components/OrderDetailDrawer.vue';
-  import OrderPayConfirmModal from './components/OrderPayConfirmModal.vue';
-  import CreatePickupOrderModal from './components/CreatePickupOrderModal.vue';
-  import MarkProblematicModal from './components/MarkProblematicModal.vue';
-  import MarkClaimedModal from './components/MarkClaimedModal.vue';
-  import StockBindModal from './components/StockBindModal.vue';
-  import ColumnConfigModal from '../components/ColumnConfigModal.vue';
   import {
     MY_ORDERS_COLUMN_CATALOG,
     MY_ORDERS_COLUMN_STORAGE_KEY,
@@ -60,9 +62,32 @@
     type ColumnScheme,
   } from './columnConfig';
   import { filterMyOrdersColumns, filterMyOrdersFieldKeys } from './customerFieldMask';
-  import OrderPrintModal from '@/components/PrintTemplate/OrderPrintModal.vue';
   import { useHiprintClientState } from '@/utils/hiprint/hiprintClientState';
   import { fetchPrintUrlsForOrders, getCachedPrintUrl } from '@/utils/printSessionCache';
+
+  /** 详情/弹层按需分包，代发订单与我的订单共用本页 */
+  const OrderDetailDrawer = defineAsyncComponent(
+    () => import('./components/OrderDetailDrawer.vue'),
+  );
+  const OrderPayConfirmModal = defineAsyncComponent(
+    () => import('./components/OrderPayConfirmModal.vue'),
+  );
+  const CreatePickupOrderModal = defineAsyncComponent(
+    () => import('./components/CreatePickupOrderModal.vue'),
+  );
+  const MarkProblematicModal = defineAsyncComponent(
+    () => import('./components/MarkProblematicModal.vue'),
+  );
+  const MarkClaimedModal = defineAsyncComponent(
+    () => import('./components/MarkClaimedModal.vue'),
+  );
+  const StockBindModal = defineAsyncComponent(() => import('./components/StockBindModal.vue'));
+  const ColumnConfigModal = defineAsyncComponent(
+    () => import('../components/ColumnConfigModal.vue'),
+  );
+  const OrderPrintModal = defineAsyncComponent(
+    () => import('@/components/PrintTemplate/OrderPrintModal.vue'),
+  );
   import {
     ORDER_STATUS_TABS,
     ORDER_STATUS_ALL,
@@ -106,9 +131,48 @@
   );
   const { tableContainerRef, tableHeight } = useTableContainerHeight();
 
-  // 订单详情抽屉
-  const detailDrawerRef = ref<InstanceType<typeof OrderDetailDrawer>>();
+  // 订单详情抽屉（首次打开再挂载）
+  const detailDrawerMounted = ref(false);
+  const detailDrawerRef = ref<{
+    openDrawer?: (opts?: { tab?: string }) => void;
+    startBasicEdit?: () => void;
+  } | null>(null);
   const currentOrder = ref<any>(null);
+  const columnConfigMounted = ref(false);
+  const createPickupMounted = ref(false);
+  const columnConfigModalRef = ref<{ open?: () => void } | null>(null);
+  const createPickupModalRef = ref<{
+    open?: (
+      rows: Array<{
+        id: number | string;
+        serviceNo?: string;
+        warehouseId?: number;
+        customerId?: number;
+      }>,
+    ) => void;
+  } | null>(null);
+
+  async function waitForRef<T>(
+    get: () => T | null | undefined,
+    ready: (v: T) => boolean,
+    retries = 40,
+  ): Promise<T | null> {
+    for (let i = 0; i < retries; i++) {
+      await nextTick();
+      const v = get();
+      if (v != null && ready(v)) return v;
+      await new Promise((r) => setTimeout(r, 40));
+    }
+    return null;
+  }
+
+  async function ensureDetailDrawer() {
+    detailDrawerMounted.value = true;
+    return waitForRef(
+      () => detailDrawerRef.value,
+      (v) => typeof v.openDrawer === 'function',
+    );
+  }
 
   /** 兼容后端 camelCase / PascalCase */
   function pick(raw: Record<string, any> | undefined, ...keys: string[]) {
@@ -216,10 +280,11 @@
       }
     }
     currentOrder.value = nextRow;
-    detailDrawerRef.value?.openDrawer({ tab: opts?.tab || 'basic' });
+    const drawer = await ensureDetailDrawer();
+    drawer?.openDrawer?.({ tab: opts?.tab || 'basic' });
     if (opts?.editBasic) {
       await nextTick();
-      detailDrawerRef.value?.startBasicEdit?.();
+      drawer?.startBasicEdit?.();
     }
   }
 
@@ -1061,9 +1126,7 @@
     openPayConfirm(rows);
   };
 
-  const createPickupModalRef = ref<InstanceType<typeof CreatePickupOrderModal> | null>(null);
-
-  const handleCreatePickup = () => {
+  async function handleCreatePickup() {
     const rows = requireSelectedRows();
     if (!rows.length) return;
     const notPredeclared = rows.filter((r) => resolveOrderStatusCode(r) !== 'predeclared');
@@ -1076,7 +1139,12 @@
       Message.warning(t('order.myOrders.createPickup.alreadyBound'));
       return;
     }
-    createPickupModalRef.value?.open(
+    createPickupMounted.value = true;
+    const modal = await waitForRef(
+      () => createPickupModalRef.value,
+      (v) => typeof v.open === 'function',
+    );
+    modal?.open?.(
       rows.map((r) => ({
         id: getOrderRowId(r)!,
         serviceNo: r?.serviceNo || r?.ServiceNo,
@@ -1084,7 +1152,7 @@
         customerId: r?.customerId ?? r?.CustomerId,
       })),
     );
-  };
+  }
 
   async function handleCreatePickupSuccess() {
     await refreshListAndTabCounts();
@@ -1530,7 +1598,6 @@
       t('order.myOrders.columnConfig.defaultScheme'),
     ),
   );
-  const columnConfigModalRef = ref<InstanceType<typeof ColumnConfigModal>>();
 
   const columnSchemeOptions = computed(() =>
     columnConfigState.value.schemes.map((s) => ({ label: s.name, value: s.id })),
@@ -1607,8 +1674,13 @@
     saveColumnConfigState(listColumnStorageKey.value, columnConfigState.value);
   }
 
-  function openColumnConfig() {
-    columnConfigModalRef.value?.open();
+  async function openColumnConfig() {
+    columnConfigMounted.value = true;
+    const modal = await waitForRef(
+      () => columnConfigModalRef.value,
+      (v) => typeof v.open === 'function',
+    );
+    modal?.open?.();
   }
 
   function handleColumnConfigApply(payload: { activeId: string; schemes: ColumnScheme[] }) {
@@ -1792,8 +1864,7 @@
 
   onMounted(() => {
     nextTick(async () => {
-      await loadOrderList();
-      loadTabCounts();
+      await Promise.all([loadOrderList(), loadTabCounts()]);
       await tryOpenOrderFromQuery();
     });
   });
@@ -2021,7 +2092,7 @@
       <div ref="tableContainerRef" class="list-wrap">
         <a-spin :loading="listLoading" class="table-spin">
           <HandsontablePro
-            :key="`${activeTab}-${currentPage}-${orderList.length}-${tableColumnsKey}`"
+            :key="`${activeTab}-${tableColumnsKey}`"
             :columns="hotColumns"
             :data="processedTableData"
             :total="totalCount"
@@ -2045,13 +2116,15 @@
       </div>
     </div>
 
-    <!-- 订单详情抽屉（左侧） -->
+    <!-- 订单详情抽屉（左侧）：首次打开再挂载 -->
     <OrderDetailDrawer
+      v-if="detailDrawerMounted"
       ref="detailDrawerRef"
       :order="currentOrder"
       @updated="handleOrderDetailUpdated"
     />
     <ColumnConfigModal
+      v-if="columnConfigMounted"
       ref="columnConfigModalRef"
       :catalog="listColumnCatalog"
       :schemes="columnConfigState.schemes"
@@ -2059,8 +2132,14 @@
       :default-keys="MY_ORDERS_DEFAULT_KEYS"
       @apply="handleColumnConfigApply"
     />
-    <OrderPrintModal v-model:visible="singlePrintVisible" mode="single" :items="singlePrintItems" />
     <OrderPrintModal
+      v-if="singlePrintVisible"
+      v-model:visible="singlePrintVisible"
+      mode="single"
+      :items="singlePrintItems"
+    />
+    <OrderPrintModal
+      v-if="batchPrintVisible"
       v-model:visible="batchPrintVisible"
       mode="batch"
       :items="batchPrintItems"
@@ -2068,11 +2147,13 @@
     />
 
     <MarkProblematicModal
+      v-if="problematicModalVisible"
       v-model:visible="problematicModalVisible"
       :order-ids="exceptionOrderIds"
       @success="handleExceptionActionSuccess"
     />
     <MarkClaimedModal
+      v-if="claimedModalVisible"
       v-model:visible="claimedModalVisible"
       :order-ids="exceptionOrderIds"
       :has-insurance="claimContext.hasInsurance"
@@ -2081,16 +2162,22 @@
       @success="handleExceptionActionSuccess"
     />
     <StockBindModal
+      v-if="stockBindModalVisible"
       v-model:visible="stockBindModalVisible"
       :order-ids="stockBindOrderIds"
       @success="handleStockBindSuccess"
     />
     <OrderPayConfirmModal
+      v-if="payConfirmVisible"
       v-model:visible="payConfirmVisible"
       :orders="payConfirmOrders"
       @success="handlePayConfirmSuccess"
     />
-    <CreatePickupOrderModal ref="createPickupModalRef" @success="handleCreatePickupSuccess" />
+    <CreatePickupOrderModal
+      v-if="createPickupMounted"
+      ref="createPickupModalRef"
+      @success="handleCreatePickupSuccess"
+    />
   </div>
 </template>
 
diff --git a/src/views/order/pickupOrder/index.vue b/src/views/order/pickupOrder/index.vue
index d05ab53..097bbbc 100644
--- a/src/views/order/pickupOrder/index.vue
+++ b/src/views/order/pickupOrder/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, h, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, h, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import dayjs from 'dayjs'
@@ -10,7 +10,6 @@ import PaginationPro from '@/components/PaginationPro/index.vue'
 import ModalPro from '@/components/ModalPro/index.vue'
 import SlidingTabs from '@/components/SlidingTabs/index.vue'
 import useModal from '@/components/ModalPro/useModal'
-import PickupOrderDetailDrawer from './PickupOrderDetailDrawer.vue'
 import { useTableContainerHeight } from '@/composables/useTableContainerHeight'
 import { useWarehouseAdminCustomer } from '@/composables/useWarehouseAdminCustomer'
 import {
@@ -44,12 +43,20 @@ import {
   loadDomesticPickupProductOptions,
   type DomesticPickupProductOption,
 } from '@/utils/domesticPickupProducts'
-import CompleteContactModal from '@/components/CompleteContactModal/index.vue'
 import type { CustomerProfileCompleteness } from '@/api/customer'
-import CreatePickupSheetModal from './components/CreatePickupSheetModal.vue'
 import type { CreatePickupSuccessPayload } from './components/CreatePickupSheetModal.vue'
-import BindableOrderPicker from './components/BindableOrderPicker.vue'
 import type { BindableOrderRow } from './components/BindableOrderPicker.vue'
+
+const PickupOrderDetailDrawer = defineAsyncComponent(() => import('./PickupOrderDetailDrawer.vue'))
+const CompleteContactModal = defineAsyncComponent(
+  () => import('@/components/CompleteContactModal/index.vue'),
+)
+const CreatePickupSheetModal = defineAsyncComponent(
+  () => import('./components/CreatePickupSheetModal.vue'),
+)
+const BindableOrderPicker = defineAsyncComponent(
+  () => import('./components/BindableOrderPicker.vue'),
+)
 import { getOrderStatusMeta, resolveOrderStatusCode } from '@/constants/orderStatus'
 import { useRbacUserStore } from '@/store/modules/rbac-user'
 import { getMapIdFromAccessToken } from '@/utils/jwt'
@@ -68,10 +75,28 @@ const {
   withCustomerId,
 } = useWarehouseAdminCustomer()
 
-const createModalRef = ref<InstanceType<typeof CreatePickupSheetModal> | null>(null)
+const createModalMounted = ref(false)
+const detailDrawerMounted = ref(false)
+const createModalRef = ref<{
+  open?: (customerId?: number, direction?: 'forward' | 'reverse') => void
+} | null>(null)
 const contactVisible = ref(false)
 const contactProfile = ref<CustomerProfileCompleteness | null>(null)
 
+async function waitForPickupRef<T>(
+  get: () => T | null | undefined,
+  ready: (v: T) => boolean,
+  retries = 40,
+): Promise<T | null> {
+  for (let i = 0; i < retries; i++) {
+    await nextTick()
+    const v = get()
+    if (v != null && ready(v)) return v
+    await new Promise((r) => setTimeout(r, 40))
+  }
+  return null
+}
+
 const keyword = ref('')
 const STATUS_TAB_ALL = 'all'
 const DIRECTION_FORWARD = 'forward'
@@ -405,12 +430,21 @@ function handleSearch() {
   void loadList()
 }
 
+async function openCreateModal() {
+  createModalMounted.value = true
+  const modal = await waitForPickupRef(
+    () => createModalRef.value,
+    (v) => typeof v.open === 'function',
+  )
+  modal?.open?.(adminCustomerId.value, directionFilter.value)
+}
+
 function handleOpenCreate() {
   if (!hasPermission('Order.Pickup.Create')) {
     $baseMessage(t('order.pickupOrder.message.noPermission'), 'warning')
     return
   }
-  createModalRef.value?.open(adminCustomerId.value, directionFilter.value)
+  void openCreateModal()
 }
 
 function onCreateSuccess(payload: CreatePickupSuccessPayload = {}) {
@@ -502,7 +536,7 @@ function onNeedContact(profile: CustomerProfileCompleteness | null) {
 
 function onContactSuccess() {
   contactVisible.value = false
-  createModalRef.value?.open(adminCustomerId.value, directionFilter.value)
+  void openCreateModal()
 }
 
 function handleDirectionTabChange() {
@@ -868,12 +902,17 @@ function handleRowAction(row: any, _rowIndex: number, action?: string) {
 async function openDetail(id: number | string) {
   detailLoading.value = true
   detail.value = null
-  detailDrawerRef.value?.open()
+  detailDrawerMounted.value = true
+  const drawer = await waitForPickupRef(
+    () => detailDrawerRef.value,
+    (v) => typeof v.open === 'function',
+  )
+  drawer?.open()
   try {
     detail.value = await getPickupOrderDetail(id)
   } catch (e: any) {
     $baseMessage(e?.message || t('order.pickupOrder.message.detailFailed'), 'error')
-    detailDrawerRef.value?.close()
+    drawer?.close()
   } finally {
     detailLoading.value = false
   }
@@ -1336,8 +1375,9 @@ watch(
   },
 )
 
-onMounted(async () => {
-  await ensureCarrierServiceOptions()
+onMounted(() => {
+  // 承运选项不阻塞列表首屏
+  void ensureCarrierServiceOptions()
   void loadList()
 })
 </script>
@@ -1345,11 +1385,13 @@ onMounted(async () => {
 <template>
   <div class="pickup-order-container warehouse-list-page">
     <CompleteContactModal
+      v-if="contactVisible"
       v-model:visible="contactVisible"
       :profile="contactProfile"
       @success="onContactSuccess"
     />
     <CreatePickupSheetModal
+      v-if="createModalMounted"
       ref="createModalRef"
       @success="onCreateSuccess"
       @need-contact="onNeedContact"
@@ -1488,6 +1530,7 @@ onMounted(async () => {
     </div>
 
     <PickupOrderDetailDrawer
+      v-if="detailDrawerMounted"
       ref="detailDrawerRef"
       :loading="detailLoading"
       :detail="detail"
diff --git a/src/views/order/platformStoreOrder/index.vue b/src/views/order/platformStoreOrder/index.vue
index a2d75a5..5fea6cc 100644
--- a/src/views/order/platformStoreOrder/index.vue
+++ b/src/views/order/platformStoreOrder/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Modal } from '@arco-design/web-vue'
 import HandsontablePro from '@/components/HandsontablePro/index.vue'
 import PaginationPro from '@/components/PaginationPro/index.vue'
+import SlidingTabs from '@/components/SlidingTabs/index.vue'
 import { useTableContainerHeight } from '@/composables/useTableContainerHeight'
 import { useWarehouseAdminCustomer } from '@/composables/useWarehouseAdminCustomer'
 import { getSalesProductList } from '@/api/channel/salesProduct'
@@ -32,9 +33,11 @@ import {
 } from '@/utils/warehouseListMapper'
 import { renderWarehouseActionBtn, wrapWarehouseActions } from '@/utils/warehouseActionRenderer'
 import { buildStoreOrderStatusTagHtml } from '@/constants/storeOrderStatus'
-import PullOrdersModal from './PullOrdersModal.vue'
-import StoreOrderDetailDrawer from './StoreOrderDetailDrawer.vue'
-import CreateLogisticsModal, { type CreateLogisticsMode } from './CreateLogisticsModal.vue'
+import type { CreateLogisticsMode } from './CreateLogisticsModal.vue'
+
+const PullOrdersModal = defineAsyncComponent(() => import('./PullOrdersModal.vue'))
+const StoreOrderDetailDrawer = defineAsyncComponent(() => import('./StoreOrderDetailDrawer.vue'))
+const CreateLogisticsModal = defineAsyncComponent(() => import('./CreateLogisticsModal.vue'))
 
 defineOptions({ name: 'PlatformStoreOrder' })
 
@@ -93,8 +96,21 @@ const pullVisible = ref(false)
 const actionLoading = ref(false)
 const matchWarehouseId = ref<number>()
 const matchProductCode = ref<string>()
-const detailDrawerRef = ref<InstanceType<typeof StoreOrderDetailDrawer>>()
+const detailDrawerMounted = ref(false)
+const detailDrawerRef = ref<{
+  open?: (opts: { id: number; customerId?: number }) => void
+} | null>(null)
 const createModalVisible = ref(false)
+
+async function ensureStoreDetailDrawer() {
+  detailDrawerMounted.value = true
+  for (let i = 0; i < 40; i++) {
+    await nextTick()
+    if (detailDrawerRef.value?.open) return detailDrawerRef.value
+    await new Promise((r) => setTimeout(r, 40))
+  }
+  return detailDrawerRef.value
+}
 const createModalMode = ref<CreateLogisticsMode>('logistics')
 const createModalIds = ref<number[]>([])
 
@@ -321,7 +337,8 @@ function handleSelectionChange(rows: any[]) {
 async function showDetail(row: any) {
   const id = Number(row._raw?.id || row.id)
   if (!id) return
-  detailDrawerRef.value?.open({
+  const drawer = await ensureStoreDetailDrawer()
+  drawer?.open?.({
     id,
     customerId: withCustomerId({}).customerId,
   })
@@ -639,15 +656,19 @@ function handleActionClick(row: any, _i: number, action?: string) {
 }
 
 onMounted(async () => {
-  const { items } = await getWarehouseList({ page: 1, pageSize: 200 }).catch(() => ({ items: [] }))
-  warehouseOptions.value = (items || []).map((w: any) => ({
-    label: w.warehouseName || `#${w.id}`,
-    value: Number(w.id),
-  }))
-  if (warehouseOptions.value.length) matchWarehouseId.value = warehouseOptions.value[0].value
-  await loadProducts()
-  await loadSummary()
-  await loadList()
+  // 仓库下拉与列表/汇总/产品并行，避免串行等三轮接口
+  const warehouseTask = getWarehouseList({ page: 1, pageSize: 200 })
+    .then(({ items }) => {
+      warehouseOptions.value = (items || []).map((w: any) => ({
+        label: w.warehouseName || `#${w.id}`,
+        value: Number(w.id),
+      }))
+      if (warehouseOptions.value.length) matchWarehouseId.value = warehouseOptions.value[0].value
+    })
+    .catch(() => {
+      warehouseOptions.value = []
+    })
+  await Promise.all([warehouseTask, loadProducts(), loadSummary(), loadList()])
 })
 
 watch(
@@ -790,17 +811,20 @@ watch(
     </div>
 
     <StoreOrderDetailDrawer
+      v-if="detailDrawerMounted"
       ref="detailDrawerRef"
       :warehouse-name-map="warehouseNameMap"
     />
 
     <PullOrdersModal
+      v-if="pullVisible"
       v-model:visible="pullVisible"
       :customer-id="withCustomerId({}).customerId"
       @success="() => { loadSummary(); loadList() }"
     />
 
     <CreateLogisticsModal
+      v-if="createModalVisible"
       v-model:visible="createModalVisible"
       :mode="createModalMode"
       :store-order-ids="createModalIds"
diff --git a/src/views/order/waybillManage/index.vue b/src/views/order/waybillManage/index.vue
index 3a2b8bd..fc0f4c7 100644
--- a/src/views/order/waybillManage/index.vue
+++ b/src/views/order/waybillManage/index.vue
@@ -1,11 +1,20 @@
 <script lang="ts" setup>
-  import { ref, computed, onMounted, nextTick, watch, reactive } from 'vue';
+  import {
+    ref,
+    computed,
+    onMounted,
+    nextTick,
+    watch,
+    reactive,
+    defineAsyncComponent,
+  } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { IconCalendar, IconDown, IconQuestionCircleFill, IconSettings } from '@arco-design/web-vue/es/icon';
   import { Message, Modal } from '@arco-design/web-vue';
   import dayjs from 'dayjs';
   import HandsontablePro from '@/components/HandsontablePro/index.vue';
   import PaginationPro from '@/components/PaginationPro/index.vue';
+  import SlidingTabs from '@/components/SlidingTabs/index.vue';
   import { useTableContainerHeight } from '@/composables/useTableContainerHeight';
   import { useI18n } from 'vue-i18n';
   import {
@@ -47,13 +56,6 @@
   } from '@/api/order';
   import { notifyCustomerBalanceChanged } from '@/api/customer/accountFlow';
   import { buildFailGuideFromReason } from '@/utils/parcelCreateFailGuide';
-  import OrderDetailDrawer from './components/OrderDetailDrawer.vue';
-  import OrderPayConfirmModal from './components/OrderPayConfirmModal.vue';
-  import MarkProblematicModal from './components/MarkProblematicModal.vue';
-  import MarkClaimedModal from './components/MarkClaimedModal.vue';
-  import ReallocateModal from './components/ReallocateModal.vue';
-  import DownstreamWeightImportModal from './components/DownstreamWeightImportModal.vue';
-  import ColumnConfigModal from '../components/ColumnConfigModal.vue';
   import {
     buildHotColumns,
     getActiveScheme,
@@ -68,7 +70,6 @@
     WAYBILL_MANAGE_DEFAULT_KEYS,
     getWaybillBaseCatalog,
   } from './columnConfig';
-  import OrderPrintModal from '@/components/PrintTemplate/OrderPrintModal.vue';
   import {
     fetchPrintUrlForOrder,
     fetchPrintUrlsForOrders,
@@ -100,6 +101,32 @@
   import { renderWarehouseActionBtn, wrapWarehouseActions } from '@/utils/warehouseActionRenderer';
   import { buildWaybillContextFromRow, openAskAdvisor } from '@/composables/useAskAdvisor';
 
+  /** 详情/弹层按需分包，避免进页就解析 100KB+ 抽屉与打印组件 */
+  const OrderDetailDrawer = defineAsyncComponent(
+    () => import('./components/OrderDetailDrawer.vue'),
+  );
+  const OrderPayConfirmModal = defineAsyncComponent(
+    () => import('./components/OrderPayConfirmModal.vue'),
+  );
+  const MarkProblematicModal = defineAsyncComponent(
+    () => import('./components/MarkProblematicModal.vue'),
+  );
+  const MarkClaimedModal = defineAsyncComponent(
+    () => import('./components/MarkClaimedModal.vue'),
+  );
+  const ReallocateModal = defineAsyncComponent(
+    () => import('./components/ReallocateModal.vue'),
+  );
+  const DownstreamWeightImportModal = defineAsyncComponent(
+    () => import('./components/DownstreamWeightImportModal.vue'),
+  );
+  const ColumnConfigModal = defineAsyncComponent(
+    () => import('../components/ColumnConfigModal.vue'),
+  );
+  const OrderPrintModal = defineAsyncComponent(
+    () => import('@/components/PrintTemplate/OrderPrintModal.vue'),
+  );
+
   defineOptions({
     name: 'WaybillManage',
   });
@@ -108,9 +135,39 @@
   const { tableContainerRef, tableHeight } = useTableContainerHeight();
   const { customerOptions, withCustomerId } = useWarehouseAdminCustomer();
 
-  // 订单详情抽屉
-  const detailDrawerRef = ref<InstanceType<typeof OrderDetailDrawer>>();
+  // 订单详情抽屉（首次打开再挂载，避免进页就拉抽屉分包）
+  const detailDrawerMounted = ref(false);
+  const detailDrawerRef = ref<{
+    openDrawer?: (opts?: { tab?: string }) => void;
+    startBasicEdit?: () => void;
+  } | null>(null);
   const currentOrder = ref<any>(null);
+  const columnConfigMounted = ref(false);
+  const downstreamWeightImportMounted = ref(false);
+  const columnConfigModalRef = ref<{ open?: () => void } | null>(null);
+  const downstreamWeightImportModalRef = ref<{ open?: () => void } | null>(null);
+
+  async function waitForRef<T>(
+    get: () => T | null | undefined,
+    ready: (v: T) => boolean,
+    retries = 40,
+  ): Promise<T | null> {
+    for (let i = 0; i < retries; i++) {
+      await nextTick();
+      const v = get();
+      if (v != null && ready(v)) return v;
+      await new Promise((r) => setTimeout(r, 40));
+    }
+    return null;
+  }
+
+  async function ensureDetailDrawer() {
+    detailDrawerMounted.value = true;
+    return waitForRef(
+      () => detailDrawerRef.value,
+      (v) => typeof v.openDrawer === 'function',
+    );
+  }
 
   /** 兼容后端 camelCase / PascalCase */
   function pick(raw: Record<string, any> | undefined, ...keys: string[]) {
@@ -274,10 +331,11 @@
       }
     }
     currentOrder.value = nextRow;
-    detailDrawerRef.value?.openDrawer({ tab: opts?.tab || 'basic' });
+    const drawer = await ensureDetailDrawer();
+    drawer?.openDrawer?.({ tab: opts?.tab || 'basic' });
     if (opts?.editBasic) {
       await nextTick();
-      detailDrawerRef.value?.startBasicEdit?.();
+      drawer?.startBasicEdit?.();
     }
   }
 
@@ -1356,10 +1414,14 @@
     reallocateModalVisible.value = true;
   };
 
-  const downstreamWeightImportModalRef = ref<InstanceType<typeof DownstreamWeightImportModal> | null>(null);
-  const openDownstreamWeightImport = () => {
-    downstreamWeightImportModalRef.value?.open();
-  };
+  async function openDownstreamWeightImport() {
+    downstreamWeightImportMounted.value = true;
+    const modal = await waitForRef(
+      () => downstreamWeightImportModalRef.value,
+      (v) => typeof v.open === 'function',
+    );
+    modal?.open?.();
+  }
 
   function resolveClaimContextFromRow(row: any) {
     let hasInsurance: boolean | null = null;
@@ -1487,8 +1549,6 @@
       t('order.myOrders.columnConfig.defaultScheme'),
     ),
   );
-  const columnConfigModalRef = ref<InstanceType<typeof ColumnConfigModal>>();
-
   const activeColumnKeys = computed(() => getActiveScheme(columnConfigState.value).keys);
 
   const hotColumns = computed(() => {
@@ -1549,8 +1609,13 @@
     columnCatalog.value = mergeDiscoveredColumns(getWaybillBaseCatalog(), rows);
   }
 
-  function openColumnConfig() {
-    columnConfigModalRef.value?.open();
+  async function openColumnConfig() {
+    columnConfigMounted.value = true;
+    const modal = await waitForRef(
+      () => columnConfigModalRef.value,
+      (v) => typeof v.open === 'function',
+    );
+    modal?.open?.();
   }
 
   function handleColumnConfigApply(payload: { activeId: string; schemes: ColumnScheme[] }) {
@@ -1730,8 +1795,8 @@
 
   onMounted(() => {
     nextTick(async () => {
-      await loadOrderList();
-      loadTabCounts();
+      // 列表与角标并行，避免串行多等一整轮接口
+      await Promise.all([loadOrderList(), loadTabCounts()]);
       await tryOpenOrderFromQuery();
     });
   });
@@ -2017,7 +2082,7 @@
       <div ref="tableContainerRef" class="list-wrap">
         <a-spin :loading="listLoading" class="table-spin">
           <HandsontablePro
-            :key="`${activeTab}-${currentPage}-${orderList.length}-${tableColumnsKey}`"
+            :key="`${activeTab}-${tableColumnsKey}`"
             :columns="hotColumns"
             :data="processedTableData"
             :total="totalCount"
@@ -2041,13 +2106,15 @@
       </div>
     </div>
 
-    <!-- 订单详情抽屉（左侧） -->
+    <!-- 订单详情抽屉（左侧）：首次打开再挂载 -->
     <OrderDetailDrawer
+      v-if="detailDrawerMounted"
       ref="detailDrawerRef"
       :order="currentOrder"
       @updated="handleOrderDetailUpdated"
     />
     <ColumnConfigModal
+      v-if="columnConfigMounted"
       ref="columnConfigModalRef"
       :catalog="columnCatalog"
       :schemes="columnConfigState.schemes"
@@ -2056,12 +2123,19 @@
       @apply="handleColumnConfigApply"
     />
     <OrderPrintModal
+      v-if="singlePrintVisible"
       v-model:visible="singlePrintVisible"
       mode="single"
       :items="singlePrintItems"
       :preparing="singlePrintPreparing"
     />
-    <OrderPrintModal v-model:visible="batchPrintVisible" mode="batch" :items="batchPrintItems" :preparing="batchPrintPreparing" />
+    <OrderPrintModal
+      v-if="batchPrintVisible"
+      v-model:visible="batchPrintVisible"
+      mode="batch"
+      :items="batchPrintItems"
+      :preparing="batchPrintPreparing"
+    />
 
     <a-modal
       v-model:visible="keywordBatchVisible"
@@ -2109,11 +2183,13 @@
     </a-modal>
 
     <MarkProblematicModal
+      v-if="problematicModalVisible"
       v-model:visible="problematicModalVisible"
       :order-ids="exceptionOrderIds"
       @success="handleExceptionActionSuccess"
     />
     <MarkClaimedModal
+      v-if="claimedModalVisible"
       v-model:visible="claimedModalVisible"
       :order-ids="exceptionOrderIds"
       :has-insurance="claimContext.hasInsurance"
@@ -2122,15 +2198,18 @@
       @success="handleExceptionActionSuccess"
     />
     <ReallocateModal
+      v-if="reallocateModalVisible"
       v-model:visible="reallocateModalVisible"
       :order-ids="exceptionOrderIds"
       @success="handleExceptionActionSuccess"
     />
     <DownstreamWeightImportModal
+      v-if="downstreamWeightImportMounted"
       ref="downstreamWeightImportModalRef"
       @success="handleExceptionActionSuccess"
     />
     <OrderPayConfirmModal
+      v-if="payConfirmVisible"
       v-model:visible="payConfirmVisible"
       :orders="payConfirmOrders"
       @success="handlePayConfirmSuccess"
diff --git a/src/views/site/SiteHeader.vue b/src/views/site/SiteHeader.vue
index 637b838..4140963 100644
--- a/src/views/site/SiteHeader.vue
+++ b/src/views/site/SiteHeader.vue
@@ -34,6 +34,7 @@
             </a>
           </li>
           <li class="site-nav-tools">
+            <span class="site-nav-tools__glass" aria-hidden="true"></span>
             <a
               v-if="!signedIn"
               class="site-nav-login"
diff --git a/src/views/site/SiteRoutesPanel.vue b/src/views/site/SiteRoutesPanel.vue
index 7484574..f04dae6 100644
--- a/src/views/site/SiteRoutesPanel.vue
+++ b/src/views/site/SiteRoutesPanel.vue
@@ -104,7 +104,10 @@
         <article v-for="item in visibleItems" :key="String(item.id)" class="ai-route-card">
           <div class="ai-route-card__head">
             <div class="ai-route-card__titles">
-              <span class="ai-route-card__group">{{ item.productGroupName || item.productGroup }}</span>
+              <span
+                v-if="item.productGroupName || item.productGroup"
+                class="ai-route-card__group"
+              >{{ item.productGroupName || item.productGroup }}</span>
               <h4 class="ai-route-card__name">{{ item.productName }}</h4>
             </div>
             <p v-if="formatRouteTimeliness(item)" class="ai-route-card__eta">
@@ -134,10 +137,37 @@
             {{ expanded[String(item.id)] ? copy.collapse : copy.expand }}
           </button>
           <div class="ai-route-card__actions">
-            <button type="button" class="ai-route-card__ask" @click="askItem(item)">{{ copy.ask }}</button>
             <a class="ai-route-card__reg" :href="officialLoginUrl(destLabel(destFilter, lang) || undefined)">
               {{ copy.register }}
             </a>
+            <button
+              type="button"
+              class="ai-route-card__ask"
+              :title="copy.ask"
+              :aria-label="copy.ask"
+              @click="askItem(item)"
+            >
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <path
+                  d="M4 14.5V12a8 8 0 0 1 16 0v2.5"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                />
+                <path
+                  d="M4 14h2.8v5.2H4A1.6 1.6 0 0 1 2.4 17.6v-2A1.6 1.6 0 0 1 4 14z"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M20 14h-2.8v5.2H20a1.6 1.6 0 0 0 1.6-1.6v-2A1.6 1.6 0 0 0 20 14z"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
           </div>
         </article>
         <div v-if="visibleItems.length < filtered.length" class="ai-routes-more">
diff --git a/src/views/site/SiteTopicPanel.vue b/src/views/site/SiteTopicPanel.vue
index 8089d14..ee968c6 100644
--- a/src/views/site/SiteTopicPanel.vue
+++ b/src/views/site/SiteTopicPanel.vue
@@ -62,11 +62,65 @@
       <template v-if="topic === 'pricing'">
         <a class="site-topic-btn is-primary" :href="loginUrl">{{ copy.register }}</a>
         <button type="button" class="site-topic-btn" @click="$emit('open-panel', 'routes')">{{ copy.lanes }}</button>
-        <button type="button" class="site-topic-btn is-ghost" @click="askPricing">{{ copy.ask }}</button>
+        <button
+          type="button"
+          class="site-topic-btn is-icon"
+          :title="copy.ask"
+          :aria-label="copy.ask"
+          @click="askPricing"
+        >
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path
+              d="M4 14.5V12a8 8 0 0 1 16 0v2.5"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+            />
+            <path
+              d="M4 14h2.8v5.2H4A1.6 1.6 0 0 1 2.4 17.6v-2A1.6 1.6 0 0 1 4 14z"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M20 14h-2.8v5.2H20a1.6 1.6 0 0 0 1.6-1.6v-2A1.6 1.6 0 0 0 20 14z"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
       </template>
       <template v-else-if="topic === 'about'">
         <a class="site-topic-btn is-primary" :href="loginUrl">{{ copy.register }}</a>
-        <button type="button" class="site-topic-btn" @click="$emit('open-panel', 'contact')">{{ copy.contact }}</button>
+        <button
+          type="button"
+          class="site-topic-btn is-icon"
+          :title="copy.contact"
+          :aria-label="copy.contact"
+          @click="$emit('open-panel', 'contact')"
+        >
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path
+              d="M4 14.5V12a8 8 0 0 1 16 0v2.5"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+            />
+            <path
+              d="M4 14h2.8v5.2H4A1.6 1.6 0 0 1 2.4 17.6v-2A1.6 1.6 0 0 1 4 14z"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M20 14h-2.8v5.2H20a1.6 1.6 0 0 0 1.6-1.6v-2A1.6 1.6 0 0 0 20 14z"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
       </template>
       <template v-else>
         <button type="button" class="site-topic-btn is-primary" @click="$emit('wechat')">{{ copy.live }}</button>
diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index 51cca89..ed2db2a 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -371,7 +371,7 @@
     inset: 0;
     z-index: 995;
     border: none;
-    background: color-mix(in srgb, var(--ai-bg, #f5f4f1) 55%, rgba(18, 24, 32, 0.18));
+    background: color-mix(in srgb, var(--ai-bg, #f0f3f4) 55%, rgba(18, 24, 32, 0.18));
     backdrop-filter: blur(6px) saturate(140%);
     -webkit-backdrop-filter: blur(6px) saturate(140%);
     cursor: pointer;
diff --git a/src/views/site/styles/ai-advisor.css b/src/views/site/styles/ai-advisor.css
index f8aaa19..2007eb5 100644
--- a/src/views/site/styles/ai-advisor.css
+++ b/src/views/site/styles/ai-advisor.css
@@ -3,7 +3,7 @@
 :root {
   --ai-header-h: 72px;
   --ai-ease: cubic-bezier(0.22, 1, 0.36, 1);
-  --ai-bg: #f5f4f1;
+  --ai-bg: #f0f3f4;
   --ai-bg-soft: #faf8f6;
   --ai-surface: #ffffff;
   --ai-text: #121820;
@@ -110,10 +110,16 @@ body.command-home #header .container-xl {
 }
 
 body.command-home #navbar > ul > li.site-nav-tools {
+  position: relative;
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  gap: 8px;
+  gap: 2px;
+  isolation: isolate;
+}
+
+body.command-home .site-nav-tools__glass {
+  display: none;
 }
 
 body.command-home .site-nav-dock {
@@ -132,7 +138,8 @@ body.command-home #navbar .site-nav-dock a {
   }
 
   body.command-home .site-nav-dock__glass,
-  body.command-home .site-nav-dock__slider {
+  body.command-home .site-nav-dock__slider,
+  body.command-home .site-nav-tools__glass {
     display: none;
   }
 
@@ -357,15 +364,123 @@ body.command-home #navbar .site-nav-dock a {
   }
 
   body.command-home #navbar > ul > li.site-nav-tools {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: 8px;
+    height: 60px;
+    padding: 5px;
+    overflow: hidden;
+    border: none;
+    border-radius: 28px;
+    background: transparent;
+    box-shadow:
+      0 12px 40px rgba(15, 23, 42, 0.1),
+      0 2px 8px rgba(15, 23, 42, 0.04);
+  }
+
+  body.command-home .site-nav-tools__glass {
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: inherit;
+    overflow: hidden;
+    pointer-events: none;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.16) 100%);
+    backdrop-filter: blur(32px) saturate(190%) brightness(1.08);
+    -webkit-backdrop-filter: blur(32px) saturate(190%) brightness(1.08);
+  }
+
+  body.command-home .site-nav-tools__glass::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(
+      165deg,
+      rgba(255, 255, 255, 0.62) 0%,
+      rgba(255, 255, 255, 0.12) 32%,
+      rgba(255, 255, 255, 0) 58%
+    );
+  }
+
+  body.command-home .site-nav-tools__glass::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.92) 0%,
+      rgba(255, 255, 255, 0.28) 42%,
+      rgba(255, 255, 255, 0.4) 100%
+    );
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+  }
+
+  body.command-home #navbar .site-nav-tools .site-nav-login,
+  body.command-home #navbar .site-nav-tools .site-nav-login:focus,
+  body.command-home #navbar .site-nav-tools .site-nav-login:hover,
+  body.command-home #navbar .site-nav-tools .site-nav-login:visited,
+  body.command-home #navbar .site-nav-tools .language-toggle-link,
+  body.command-home #navbar .site-nav-tools .language-toggle-link:focus,
+  body.command-home #navbar .site-nav-tools .language-toggle-link:hover,
+  body.command-home #navbar .site-nav-tools .language-toggle-link.active,
+  body.command-home #navbar .site-nav-tools .language-toggle-link.active:focus {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    min-height: 0;
+    padding: 0 14px;
+    border: none;
+    border-radius: 23px;
+    background: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    box-shadow: none;
+    transition:
+      background 0.22s ease,
+      box-shadow 0.22s ease,
+      color 0.22s ease;
+  }
+
+  body.command-home #navbar .site-nav-tools .site-nav-login:hover,
+  body.command-home #navbar .site-nav-tools .site-nav-login:focus,
+  body.command-home #navbar .site-nav-tools .language-toggle-link:hover,
+  body.command-home #navbar .site-nav-tools .language-toggle-link.active,
+  body.command-home #navbar .site-nav-tools .language-toggle-link.active:focus {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 100%);
+    box-shadow:
+      0 4px 16px rgba(15, 23, 42, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.95),
+      inset 0 -1px 0 rgba(255, 255, 255, 0.2);
+  }
+
+  body.command-home #navbar .site-nav-tools .site-nav-avatar,
+  body.command-home #navbar .site-nav-tools .site-nav-avatar:visited,
+  body.command-home #navbar .site-nav-tools .site-nav-avatar:hover {
+    position: relative;
+    z-index: 1;
+    width: 50px;
+    height: 50px;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  body.command-home #navbar .site-nav-tools .site-nav-avatar img {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
   }
 
   body.command-home #navbar .language-toggle-link,
   body.command-home #navbar .language-toggle-link:focus {
-    padding: 0 10px 0 8px;
     margin-left: 0;
   }
 }
@@ -462,10 +577,10 @@ body.command-home #navbar .site-nav-login:visited {
   align-items: center;
   justify-content: center;
   gap: 6px;
+  box-sizing: border-box;
   width: auto;
   height: 32px;
   margin: 0;
-  padding: 0 10px 0 8px;
   border: 1px solid var(--ai-glass-border);
   border-radius: var(--ai-radius-sm);
   background: var(--ai-glass-fill);
@@ -480,6 +595,26 @@ body.command-home #navbar .site-nav-login:visited {
     color 0.2s var(--ai-ease);
 }
 
+body.command-home #navbar .language-toggle-link,
+body.command-home #navbar .language-toggle-link:focus,
+body.command-home #navbar .language-toggle-link:hover,
+body.command-home #navbar .language-toggle-link.active,
+body.command-home #navbar .language-toggle-link.active:focus {
+  padding: 0 10px 0 8px;
+}
+
+body.command-home #navbar .site-nav-login,
+body.command-home #navbar .site-nav-login:focus,
+body.command-home #navbar .site-nav-login:hover,
+body.command-home #navbar .site-nav-login:visited {
+  padding: 0 12px;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--ai-action);
+}
+
 body.command-home .language-toggle-icon {
   width: 1em;
   height: 1em;
@@ -1561,6 +1696,21 @@ body.command-home .ai-stage-map--eu {
   background: transparent;
 }
 
+.site-topic-btn.is-icon {
+  width: 36px;
+  min-width: 36px;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--ai-text-3);
+}
+
+.site-topic-btn.is-icon svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+
 .site-topic-btn:hover {
   filter: brightness(1.03);
 }
@@ -1569,6 +1719,12 @@ body.command-home .ai-stage-map--eu {
   background: color-mix(in srgb, var(--ai-action) 8%, #fff);
 }
 
+.site-topic-btn.is-icon:hover {
+  filter: none;
+  color: var(--ai-action);
+  background: color-mix(in srgb, var(--ai-action) 8%, transparent);
+}
+
 @media (max-width: 640px) {
   .site-topic-contact {
     grid-template-columns: minmax(0, 1fr);
@@ -1782,23 +1938,36 @@ body.command-home .ai-stage-map--eu {
 .ai-route-card__titles {
   min-width: 0;
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0;
 }
 
 .ai-route-card__group {
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  color: var(--ai-gold);
+  flex-shrink: 0;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1.3;
+  color: var(--ai-muted);
+}
+
+.ai-route-card__group::after {
+  content: '·';
+  margin: 0 6px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--ai-muted) 55%, transparent);
 }
 
 .ai-route-card__name {
   margin: 0;
-  font-size: 1.02rem;
-  font-weight: 750;
+  min-width: 0;
+  font-size: 1.05rem;
+  font-weight: 800;
   line-height: 1.3;
-  color: var(--ai-ink);
+  letter-spacing: -0.01em;
+  color: var(--ai-action);
 }
 
 .ai-route-card__eta {
@@ -1888,12 +2057,39 @@ body.command-home .ai-stage-map--eu {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 10px;
+  justify-content: flex-end;
+  gap: 8px;
   margin-top: auto;
-  padding-top: 2px;
+  padding-top: 4px;
+}
+
+.ai-route-card__ask {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--ai-text-3);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.ai-route-card__ask svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.ai-route-card__ask:hover {
+  color: var(--ai-action);
+  background: color-mix(in srgb, var(--ai-action) 8%, transparent);
 }
 
-.ai-route-card__ask,
 .ai-routes-retry {
   display: inline-flex;
   align-items: center;
@@ -1909,7 +2105,6 @@ body.command-home .ai-stage-map--eu {
   cursor: pointer;
 }
 
-.ai-route-card__ask:hover,
 .ai-routes-retry:hover {
   filter: brightness(1.06);
 }
@@ -1919,19 +2114,20 @@ body.command-home .ai-stage-map--eu {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 34px;
-  padding: 0 4px;
+  min-height: 28px;
+  padding: 0 2px;
   border: 0;
   background: none;
-  color: var(--ai-action);
-  font-size: 0.82rem;
-  font-weight: 650;
+  color: var(--ai-text-3);
+  font-size: 0.78rem;
+  font-weight: 600;
   text-decoration: none;
   cursor: pointer;
 }
 
 .ai-route-card__reg:hover,
 .ai-routes-ghost:hover {
+  color: var(--ai-action);
   text-decoration: underline;
 }
 
@@ -2207,14 +2403,6 @@ body.command-home .ai-stage-map--eu {
   display: none;
 }
 
-body.command-home #navbar .site-nav-login {
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--ai-action);
-  padding: 0 12px;
-}
-
 body.command-home #navbar .site-nav-avatar,
 body.command-home #navbar .site-nav-avatar:visited {
   display: inline-flex;
diff --git a/src/views/site/styles/main.css b/src/views/site/styles/main.css
index a81c019..aaeb594 100644
--- a/src/views/site/styles/main.css
+++ b/src/views/site/styles/main.css
@@ -8,7 +8,7 @@
   --kc-secondary: #3d6678;
   --kc-tertiary: #054f74;
   --kc-tertiary-rgb: 5, 79, 116;
-  --kc-page-bg: #f5f4f1;
+  --kc-page-bg: #f0f3f4;
   --kc-neutral: #faf8f6;
   --kc-surface: #ffffff;
   --kc-border: #e0d9cc;
diff --git a/src/views/track/trackOrder/index.vue b/src/views/track/trackOrder/index.vue
index 7304aa4..d5c5668 100644
--- a/src/views/track/trackOrder/index.vue
+++ b/src/views/track/trackOrder/index.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
   import { renderWarehouseActionBtn, wrapWarehouseActions } from '@/utils/warehouseActionRenderer'
 import { useI18n } from 'vue-i18n';
-  import { ref, reactive, computed, onMounted, onUnmounted, nextTick, unref } from 'vue';
+  import {
+    ref,
+    reactive,
+    computed,
+    onMounted,
+    onUnmounted,
+    nextTick,
+    unref,
+    defineAsyncComponent,
+  } from 'vue';
   import { useRoute } from 'vue-router';
   import dayjs from 'dayjs';
   import { $baseMessage } from '@/utils';
@@ -13,7 +22,7 @@ import { useI18n } from 'vue-i18n';
   import { useUserStore } from '@/store';
   import { eventBus } from '@/utils/pub';
   import HandsontablePro from '@/components/HandsontablePro/index.vue';
-  import TrackOrderDetailDrawer from './components/TrackOrderDetailDrawer.vue';
+  import SlidingTabs from '@/components/SlidingTabs/index.vue';
   import { useTrackOrderForm } from './composables/useTrackOrderForm';
   import { useTableColumns } from './config/tableColumns';
   import { useTrackOrderData } from './composables/useTrackOrderData';
@@ -21,6 +30,10 @@ import { useI18n } from 'vue-i18n';
   import { useContentHeight } from '@/composables/table/useContentHeight';
   import { useTableContainerHeight } from '@/composables/useTableContainerHeight';
 
+  const TrackOrderDetailDrawer = defineAsyncComponent(
+    () => import('./components/TrackOrderDetailDrawer.vue'),
+  );
+
   const { t } = useI18n();
   const route = useRoute();
   const { tableContainerRef, tableHeight } = useTableContainerHeight();
@@ -64,14 +77,18 @@ import { useI18n } from 'vue-i18n';
   } from '@/api/TrackOrder/trackOrder';
   import { getGetList } from '@/api/ApplicationServicesProvider/dictionary';
   import { getAppGetList } from '@/api/ApplicationServices/apps';
-  import TimeAxis from './components/TimeAxis.vue';
-  import TimeZoneConversion from './components/TimeZoneConversion.vue';
   import { IconEye, IconTool, IconDown } from '@arco-design/web-vue/es/icon';
   import PaginationPro from '@/components/PaginationPro/index.vue';
 
+  const TimeAxis = defineAsyncComponent(() => import('./components/TimeAxis.vue'));
+  const TimeZoneConversion = defineAsyncComponent(
+    () => import('./components/TimeZoneConversion.vue'),
+  );
+
   defineOptions({ name: 'TrackOrder' });
 
   const formRef = ref();
+  const detailDrawerMounted = ref(false);
 
   const [register, modalMethods] = useModal();
   const [registerTemplate, templateMethods] = useModal();
@@ -81,7 +98,22 @@ import { useI18n } from 'vue-i18n';
   
   // 详情抽屉相关状态
   const currentDetailRow = ref<any>(null);
-  const detailDrawerRef = ref<InstanceType<typeof TrackOrderDetailDrawer>>();
+  const detailDrawerRef = ref<{
+    setDrawerProps?: (props: Record<string, unknown>) => void;
+    openDrawer?: () => void;
+    updateDetailData?: () => void;
+    getSelectedRows?: () => any[];
+  } | null>(null);
+
+  async function ensureTrackDetailDrawer() {
+    detailDrawerMounted.value = true;
+    for (let i = 0; i < 40; i++) {
+      await nextTick();
+      if (detailDrawerRef.value?.openDrawer) return detailDrawerRef.value;
+      await new Promise((r) => setTimeout(r, 40));
+    }
+    return detailDrawerRef.value;
+  }
 
   const orderId = ref<number | undefined>();
   const tableRef = ref();
@@ -777,12 +809,13 @@ import { useI18n } from 'vue-i18n';
       orderId: row.id,
     });
     
-    // 打开详情抽屉
-    detailDrawerRef.value?.setDrawerProps({
+    // 打开详情抽屉（首次再挂载分包）
+    const drawer = await ensureTrackDetailDrawer();
+    drawer?.setDrawerProps?.({
       content: '订单详情',
       width: 1200,
     });
-    detailDrawerRef.value?.openDrawer();
+    drawer?.openDrawer?.();
   }
   
   // 关闭详情抽屉
@@ -2027,8 +2060,9 @@ import { useI18n } from 'vue-i18n';
         </div>
       </div>
     </ModalPro>
-    <!-- 详情抽屉 -->
+    <!-- 详情抽屉：首次打开再挂载 -->
     <TrackOrderDetailDrawer
+      v-if="detailDrawerMounted"
       ref="detailDrawerRef"
       :orderId="currentDetailRow?.id"
       :orderNumber="currentDetailRow?.orderNumber"