From 407a0f7be6f0fe77a11f2ed2269be74ba480ca59 Mon Sep 17 00:00:00 2001
From: zzh <1368735060@qq.com>
Date: Thu, 30 Jul 2026 20:09:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Handsontable=20=E6=B7=B7=E5=90=88?=
 =?UTF-8?q?=E8=A1=A8=E5=A4=B4=E4=B8=8E=E8=AF=B7=E6=B1=82=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E6=94=B9=E9=80=A0=EF=BC=8C=E5=B9=B6=E5=AE=8C=E5=96=84=20H5=20?=
 =?UTF-8?q?=E4=B8=8B=E5=8D=95/=E7=99=BB=E5=BD=95=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

统一 HandsontablePro 液态筛选表头、批量输入与自动列增强；请求日志改用公共列表组件；同步收件地址解析与 H5/PC 下单相关改动。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/前端页面设计规范.md                      |    2 +
 src/api/order/index.ts                        |   57 +
 src/components.d.ts                           |    2 +
 .../HandsontablePro/ActiveFilterBar.vue       |  124 ++
 .../HandsontablePro/HeaderFilterPopover.vue   | 1134 ++++++++++++++++
 src/components/HandsontablePro/filterValue.ts |  104 ++
 .../HandsontablePro/hybridHeader.ts           |   96 ++
 src/components/HandsontablePro/index.vue      | 1206 ++++++++++++-----
 src/components/HandsontablePro/types.ts       |   28 +
 src/router/guard/userLoginInfo.ts             |    8 +-
 src/router/index.ts                           |    6 +-
 src/utils/login-portal.ts                     |    4 +-
 src/views/api/requestLog/index.vue            |  912 +++++--------
 .../components/ChannelConfigHotTable.vue      |    1 +
 .../components/H5PlaceOrderSheet.vue          |  238 +++-
 .../components/WechatOAuthLoginButton.vue     |   44 +-
 src/views/h5/customer-center/locale/en-US.ts  |   24 +-
 src/views/h5/customer-center/locale/zh-CN.ts  |   23 +-
 src/views/h5/customer-center/login/index.vue  |  298 ++--
 src/views/h5/customer-center/me/index.vue     |  303 +----
 src/views/order/placeOrder/index.vue          |  416 ++++--
 src/views/system/announcement/index.vue       |    1 -
 src/views/track/trackContent/index.vue        |    3 +-
 src/views/track/trackFlag/index.vue           |    3 +-
 .../components/TrackOrderDetailDrawer.vue     |   20 +
 .../composables/useTrackOrderData.ts          |   40 +-
 .../track/trackOrder/config/tableColumns.ts   |   78 +-
 src/views/track/trackState/index.vue          |    3 +-
 28 files changed, 3668 insertions(+), 1510 deletions(-)
 create mode 100644 src/components/HandsontablePro/ActiveFilterBar.vue
 create mode 100644 src/components/HandsontablePro/HeaderFilterPopover.vue
 create mode 100644 src/components/HandsontablePro/filterValue.ts
 create mode 100644 src/components/HandsontablePro/hybridHeader.ts

diff --git a/docs/前端页面设计规范.md b/docs/前端页面设计规范.md
index 5a75b62..d6cca5b 100644
--- a/docs/前端页面设计规范.md
+++ b/docs/前端页面设计规范.md
@@ -320,6 +320,8 @@ itemList: [
 | `key` | `string` | 对应行数据字段名（如 `jobId`、`statusLabel`） |
 | `label` | `string` | 表头文案（支持 `t('...')`） |
 | `width` | `number` | 列宽（像素） |
+| `headerMode` | `'inline' \| 'icon' \| 'none'` | 混合表头：内嵌搜索 / 仅图标 / 纯展示；未设时由 `searchable` + `filterType` 推导 |
+| `searchable` / `searchField` / `multiValue` | — | 表头搜索；`multiValue` 显示「多」批量入口 |
 
 **正确示例：**
 
diff --git a/src/api/order/index.ts b/src/api/order/index.ts
index 5b8c9cf..de05512 100644
--- a/src/api/order/index.ts
+++ b/src/api/order/index.ts
@@ -1650,6 +1650,63 @@ function throwParcelCreateBusinessError(body: any, fallbackMsg: string): never {
   })
 }
 
+export interface OrderReceiverParseAddressResult {
+  receiver: {
+    recipientsName?: string
+    companyName?: string
+    phone?: string
+    telePhone?: string
+    email?: string
+    countryCode?: string
+    province?: string
+    city?: string
+    streetNumber?: string
+    streetAddress1?: string
+    streetAddress2?: string
+    streetAddress3?: string
+    zipCode?: string
+  }
+  isComplete: boolean
+  missingRequired: string[]
+  missingRecommended: string[]
+  warnings: string[]
+}
+
+/** POST /order/receiver/parse-address — 粘贴地址 AI 解析 */
+export async function postOrderReceiverParseAddress(body: {
+  rawText: string
+  providerKey?: string
+  model?: string
+}): Promise<OrderReceiverParseAddressResult> {
+  const res = await axiosInstance.post(orderUrl('/order/receiver/parse-address'), body)
+  assertBusinessOk(res.data)
+  const data = unwrapApiData<any>(res.data)
+  const receiver = data?.receiver ?? data?.Receiver ?? {}
+  const pick = (a: string, b: string) =>
+    String(receiver?.[a] ?? receiver?.[b] ?? '').trim() || undefined
+  return {
+    receiver: {
+      recipientsName: pick('recipientsName', 'RecipientsName'),
+      companyName: pick('companyName', 'CompanyName'),
+      phone: pick('phone', 'Phone'),
+      telePhone: pick('telePhone', 'TelePhone'),
+      email: pick('email', 'Email'),
+      countryCode: pick('countryCode', 'CountryCode'),
+      province: pick('province', 'Province'),
+      city: pick('city', 'City'),
+      streetNumber: pick('streetNumber', 'StreetNumber'),
+      streetAddress1: pick('streetAddress1', 'StreetAddress1'),
+      streetAddress2: pick('streetAddress2', 'StreetAddress2'),
+      streetAddress3: pick('streetAddress3', 'StreetAddress3'),
+      zipCode: pick('zipCode', 'ZipCode'),
+    },
+    isComplete: Boolean(data?.isComplete ?? data?.IsComplete),
+    missingRequired: (data?.missingRequired ?? data?.MissingRequired ?? []) as string[],
+    missingRecommended: (data?.missingRecommended ?? data?.MissingRecommended ?? []) as string[],
+    warnings: (data?.warnings ?? data?.Warnings ?? []) as string[],
+  }
+}
+
 /** POST /order/parcel/create */
 export async function postOrderParcelCreate(body: Record<string, any>): Promise<any> {
   try {
diff --git a/src/components.d.ts b/src/components.d.ts
index 2851f29..45cefb7 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ActiveFilterBar: typeof import('./components/HandsontablePro/ActiveFilterBar.vue')['default']
     AiAdvisorShell: typeof import('./components/NanaAssistant/AiAdvisorShell.vue')['default']
     ApiTest: typeof import('./components/ApiTest/index.vue')['default']
     BasicLayoutLeftRight: typeof import('./components/BasicLayoutLeftRight/index.vue')['default']
@@ -27,6 +28,7 @@ declare module 'vue' {
     FormWrapper: typeof import('./components/global-setting/form-wrapper.vue')['default']
     GlobalSetting: typeof import('./components/global-setting/index.vue')['default']
     HandsontablePro: typeof import('./components/HandsontablePro/index.vue')['default']
+    HeaderFilterPopover: typeof import('./components/HandsontablePro/HeaderFilterPopover.vue')['default']
     InterfaceDetail: typeof import('./components/InterfaceDetail/index.vue')['default']
     InvitePoster: typeof import('./components/InvitePoster.vue')['default']
     InviteQrImage: typeof import('./components/InviteQrImage.vue')['default']
diff --git a/src/components/HandsontablePro/ActiveFilterBar.vue b/src/components/HandsontablePro/ActiveFilterBar.vue
new file mode 100644
index 0000000..84bde9a
--- /dev/null
+++ b/src/components/HandsontablePro/ActiveFilterBar.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+  export type ActiveFilterItem = {
+    key: string;
+    label: string;
+    text: string;
+    kind: 'filter' | 'sort';
+  };
+
+  defineProps<{
+    items: ActiveFilterItem[];
+  }>();
+
+  const emit = defineEmits<{
+    clear: [key: string];
+    'clear-all': [];
+    'item-click': [key: string];
+  }>();
+</script>
+
+<template>
+  <div v-if="items.length" class="ht-active-filter-bar">
+    <span class="ht-active-filter-bar__title">已筛选</span>
+    <button
+      v-for="item in items"
+      :key="`${item.kind}-${item.key}`"
+      type="button"
+      class="ht-active-filter-bar__pill"
+      :class="{ 'is-sort': item.kind === 'sort' }"
+      :title="item.text"
+      @click="emit('item-click', item.key)"
+    >
+      <span class="ht-active-filter-bar__pill-text">{{ item.label }} · {{ item.text }}</span>
+      <span
+        class="ht-active-filter-bar__pill-x"
+        title="清除"
+        @click.stop="emit('clear', item.key)"
+      >×</span>
+    </button>
+    <button type="button" class="ht-active-filter-bar__clear" @click="emit('clear-all')">
+      清除全部
+    </button>
+  </div>
+</template>
+
+<style scoped lang="less">
+  .ht-active-filter-bar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 12px;
+    margin-bottom: 8px;
+    background: color-mix(in srgb, var(--app-primary-color, #007979) 8%, #fff);
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  .ht-active-filter-bar__title {
+    font-size: 12px;
+    font-weight: 500;
+    color: #1d2129;
+  }
+
+  .ht-active-filter-bar__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 280px;
+    height: 24px;
+    padding: 0 6px 0 8px;
+    border: 1px solid color-mix(in srgb, var(--app-primary-color, #007979) 35%, #e5e6eb);
+    border-radius: 4px;
+    background: #fff;
+    color: var(--app-primary-color, #007979);
+    font-size: 12px;
+    cursor: pointer;
+
+    &.is-sort {
+      border-color: #00b42a;
+      color: #00b42a;
+    }
+
+    &:hover {
+      background: #f7f8fa;
+    }
+  }
+
+  .ht-active-filter-bar__pill-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ht-active-filter-bar__pill-x {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    line-height: 14px;
+    text-align: center;
+    border-radius: 2px;
+    color: #86909c;
+
+    &:hover {
+      background: #f2f3f5;
+      color: #1d2129;
+    }
+  }
+
+  .ht-active-filter-bar__clear {
+    margin-left: auto;
+    border: none;
+    background: transparent;
+    color: #86909c;
+    font-size: 12px;
+    cursor: pointer;
+    padding: 0 4px;
+    height: 24px;
+
+    &:hover {
+      color: var(--app-primary-color, #007979);
+    }
+  }
+</style>
diff --git a/src/components/HandsontablePro/HeaderFilterPopover.vue b/src/components/HandsontablePro/HeaderFilterPopover.vue
new file mode 100644
index 0000000..d10d83e
--- /dev/null
+++ b/src/components/HandsontablePro/HeaderFilterPopover.vue
@@ -0,0 +1,1134 @@
+<script setup lang="ts">
+  import { computed, reactive, ref, watch } from 'vue';
+  import { encodeFilterValue, parseFilterValue, type FilterOp } from './filterValue';
+
+  export type FilterType = 'text' | 'enum' | 'number' | 'date';
+  export type SortOrder = 'asc' | 'desc' | null;
+  export type ColumnMenuTab = 'filter' | 'sort' | 'batch';
+
+  type SelectKey = 'textOp' | 'numberOp';
+
+  const TEXT_OP_OPTIONS = [
+    { value: 'contains', label: '包含' },
+    { value: 'equals', label: '等于' },
+    { value: 'ne', label: '不等于' },
+    { value: 'gte', label: '大于等于' },
+    { value: 'lte', label: '小于等于' },
+    { value: 'empty', label: '为空' },
+  ] as const;
+
+  const NUMBER_OP_OPTIONS = [
+    { value: 'eq', label: '等于' },
+    { value: 'ne', label: '不等于' },
+    { value: 'gt', label: '大于' },
+    { value: 'gte', label: '大于等于' },
+    { value: 'lt', label: '小于' },
+    { value: 'lte', label: '小于等于' },
+  ] as const;
+
+  const props = withDefaults(
+    defineProps<{
+      visible: boolean;
+      title: string;
+      filterType: FilterType;
+      modelValue: string;
+      options?: Array<{ label: string; value: string | number | boolean }>;
+      anchorStyle: Record<string, string>;
+      sortable?: boolean;
+      sortOrder?: SortOrder;
+      multiValue?: boolean;
+      /** 打开时默认 Tab */
+      defaultTab?: ColumnMenuTab;
+    }>(),
+    {
+      sortable: false,
+      sortOrder: null,
+      multiValue: false,
+      defaultTab: 'filter',
+      options: () => [],
+    }
+  );
+
+  const emit = defineEmits<{
+    'update:visible': [boolean];
+    apply: [value: string];
+    reset: [];
+    sort: [order: SortOrder];
+  }>();
+
+  const state = reactive({
+    tab: 'filter' as ColumnMenuTab,
+    textOp: 'contains' as FilterOp,
+    textValue: '',
+    enumSelected: [] as string[],
+    numberOp: 'eq' as 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte',
+    numberValue: '',
+    dateStart: '',
+    dateEnd: '',
+    batchText: '',
+    sortOrder: null as SortOrder,
+    openSelect: null as SelectKey | null,
+  });
+
+  const tabs = computed(() => {
+    const list: Array<{ key: ColumnMenuTab; label: string }> = [{ key: 'filter', label: '筛选' }];
+    if (props.sortable) list.push({ key: 'sort', label: '排序' });
+    if (props.multiValue) list.push({ key: 'batch', label: '批量' });
+    return list;
+  });
+
+  const showTabBar = computed(() => tabs.value.length > 1);
+
+  watch(
+    () => [props.visible, props.modelValue, props.filterType, props.sortOrder, props.defaultTab] as const,
+    ([visible]) => {
+      if (!visible) return;
+      const allowed = tabs.value.map((t) => t.key);
+      state.tab = allowed.includes(props.defaultTab) ? props.defaultTab : allowed[0];
+      state.sortOrder = props.sortOrder ?? null;
+      state.openSelect = null;
+
+      const raw = (props.modelValue || '').trim();
+      // 批量：逗号串转多行展示
+      state.batchText = raw
+        ? raw
+            .split(/[,，\n\r]+/)
+            .map((v) => v.trim())
+            .filter(Boolean)
+            .join('\n')
+        : '';
+
+      if (props.filterType === 'enum') {
+        state.enumSelected = raw ? raw.split(',').map((v) => v.trim()).filter(Boolean) : [];
+      } else if (props.filterType === 'number') {
+        const parsed = parseFilterValue(raw);
+        const numOpMap: Record<string, typeof state.numberOp> = {
+          equals: 'eq',
+          contains: 'eq',
+          ne: 'ne',
+          gt: 'gt',
+          gte: 'gte',
+          lt: 'lt',
+          lte: 'lte',
+          empty: 'eq',
+        };
+        state.numberOp = numOpMap[parsed.op] || 'eq';
+        state.numberValue = parsed.value;
+      } else if (props.filterType === 'date') {
+        const parts = raw.split(',');
+        state.dateStart = (parts[0] || '').trim();
+        state.dateEnd = (parts[1] || '').trim();
+      } else {
+        const parsed = parseFilterValue(raw);
+        const allowedText = TEXT_OP_OPTIONS.map((o) => o.value as string);
+        state.textOp = allowedText.includes(parsed.op) ? parsed.op : 'contains';
+        state.textValue = parsed.value;
+      }
+    },
+    { immediate: true }
+  );
+
+  const enumOptions = computed(() => props.options || []);
+
+  const batchCount = computed(() =>
+    state.batchText
+      .split(/[\n\r]+/)
+      .map((v) => v.trim())
+      .filter(Boolean).length
+  );
+
+  const dateRange = computed<string[] | undefined>({
+    get() {
+      if (!state.dateStart && !state.dateEnd) return undefined;
+      return [state.dateStart || '', state.dateEnd || ''];
+    },
+    set(val) {
+      if (!val || (!val[0] && !val[1])) {
+        state.dateStart = '';
+        state.dateEnd = '';
+        return;
+      }
+      state.dateStart = String(val[0] || '').trim();
+      state.dateEnd = String(val[1] || '').trim();
+    },
+  });
+
+  const datePickerTriggerProps = {
+    contentClass: 'ht-col-menu-datepicker-popup',
+  };
+
+  const menuEl = ref<HTMLElement | null>(null);
+
+  function normalizeBatchValue(text: string): string {
+    const lines = text
+      .split(/[\n\r]+/)
+      .flatMap((line) => line.split(/[,，]/))
+      .map((v) => v.trim())
+      .filter(Boolean);
+    return Array.from(new Set(lines)).join(',');
+  }
+
+  function close() {
+    emit('update:visible', false);
+  }
+
+  function onReset() {
+    if (state.tab === 'sort') {
+      state.sortOrder = null;
+      emit('sort', null);
+      close();
+      return;
+    }
+    if (state.tab === 'batch') {
+      state.batchText = '';
+    }
+    emit('reset');
+    close();
+  }
+
+  function onApply() {
+    if (state.tab === 'sort') {
+      emit('sort', state.sortOrder);
+      close();
+      return;
+    }
+    if (state.tab === 'batch') {
+      emit('apply', normalizeBatchValue(state.batchText));
+      close();
+      return;
+    }
+    if (props.filterType === 'enum') {
+      emit('apply', state.enumSelected.join(','));
+    } else if (props.filterType === 'number') {
+      const opMap: Record<typeof state.numberOp, FilterOp> = {
+        eq: 'equals',
+        ne: 'ne',
+        gt: 'gt',
+        gte: 'gte',
+        lt: 'lt',
+        lte: 'lte',
+      };
+      emit('apply', encodeFilterValue(opMap[state.numberOp], state.numberValue));
+    } else if (props.filterType === 'date') {
+      const start = (state.dateStart || '').trim();
+      const end = (state.dateEnd || '').trim();
+      emit('apply', start || end ? `${start},${end}` : '');
+    } else {
+      emit('apply', encodeFilterValue(state.textOp, state.textValue));
+    }
+    close();
+  }
+
+  function toggleEnum(val: string) {
+    const i = state.enumSelected.indexOf(val);
+    if (i >= 0) state.enumSelected.splice(i, 1);
+    else state.enumSelected.push(val);
+  }
+
+  function selectSort(order: SortOrder) {
+    state.sortOrder = order;
+  }
+
+  function onBatchPaste(event: ClipboardEvent) {
+    const pastedText = event.clipboardData?.getData('text') || '';
+    if (!pastedText.includes(',') && !pastedText.includes('，')) return;
+    event.preventDefault();
+    const lines = pastedText
+      .split(/[,，\n\r]+/)
+      .map((v) => v.trim())
+      .filter(Boolean);
+    const textarea = event.target as HTMLTextAreaElement;
+    const start = textarea.selectionStart || 0;
+    const end = textarea.selectionEnd || 0;
+    const text = state.batchText;
+    const insert = lines.join('\n');
+    state.batchText = text.substring(0, start) + insert + text.substring(end);
+  }
+
+  const textOpLabel = computed(
+    () => TEXT_OP_OPTIONS.find((o) => o.value === state.textOp)?.label || '包含'
+  );
+
+  const numberOpLabel = computed(
+    () => NUMBER_OP_OPTIONS.find((o) => o.value === state.numberOp)?.label || '等于'
+  );
+
+  function toggleSelect(key: SelectKey) {
+    state.openSelect = state.openSelect === key ? null : key;
+  }
+
+  function pickTextOp(value: (typeof TEXT_OP_OPTIONS)[number]['value']) {
+    state.textOp = value;
+    state.openSelect = null;
+  }
+
+  function pickNumberOp(value: (typeof NUMBER_OP_OPTIONS)[number]['value']) {
+    state.numberOp = value;
+    state.openSelect = null;
+  }
+
+  function onTabChange(key: ColumnMenuTab) {
+    state.tab = key;
+    state.openSelect = null;
+  }
+
+  const primaryLabel = computed(() => {
+    if (state.tab === 'sort') return '应用排序';
+    return '确定';
+  });
+
+  const resetLabel = computed(() => {
+    if (state.tab === 'sort') return '取消排序';
+    return '重置本列';
+  });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="ht-col-menu-root">
+      <div class="ht-col-menu-mask" @click="close" />
+      <div
+        ref="menuEl"
+        class="ht-col-menu"
+        :style="anchorStyle"
+        role="dialog"
+        :aria-label="title"
+        @mousedown.stop
+      >
+        <div class="ht-col-menu__head">
+          <div class="ht-col-menu__title">{{ title }}</div>
+          <button type="button" class="ht-col-menu__close" aria-label="关闭" @click="close">×</button>
+        </div>
+
+        <div v-if="showTabBar" class="ht-col-menu__tabs" role="tablist">
+          <button
+            v-for="t in tabs"
+            :key="t.key"
+            type="button"
+            role="tab"
+            class="ht-col-menu__tab"
+            :class="{ 'is-active': state.tab === t.key }"
+            :aria-selected="state.tab === t.key"
+            @click="onTabChange(t.key)"
+          >
+            {{ t.label }}
+          </button>
+        </div>
+
+        <div class="ht-col-menu__body" @mousedown="state.openSelect = null">
+          <template v-if="state.tab === 'filter'">
+            <template v-if="filterType === 'text'">
+              <div class="ht-col-menu__field">
+                <label class="ht-col-menu__label">条件</label>
+                <div class="ht-liquid-select" :class="{ 'is-open': state.openSelect === 'textOp' }" @mousedown.stop>
+                  <button
+                    type="button"
+                    class="ht-liquid-select__trigger"
+                    :aria-expanded="state.openSelect === 'textOp'"
+                    @click="toggleSelect('textOp')"
+                  >
+                    <span>{{ textOpLabel }}</span>
+                    <i class="ht-liquid-select__chevron" />
+                  </button>
+                  <div v-if="state.openSelect === 'textOp'" class="ht-liquid-select__panel" role="listbox">
+                    <button
+                      v-for="opt in TEXT_OP_OPTIONS"
+                      :key="opt.value"
+                      type="button"
+                      role="option"
+                      class="ht-liquid-select__option"
+                      :class="{ 'is-active': state.textOp === opt.value }"
+                      :aria-selected="state.textOp === opt.value"
+                      @click="pickTextOp(opt.value)"
+                    >
+                      {{ opt.label }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div v-if="state.textOp !== 'empty'" class="ht-col-menu__field">
+                <label class="ht-col-menu__label">关键词</label>
+                <input
+                  v-model="state.textValue"
+                  class="ht-col-menu__control"
+                  placeholder="输入后确定筛选"
+                  @keydown.enter="onApply"
+                />
+              </div>
+            </template>
+
+            <template v-else-if="filterType === 'enum'">
+              <div class="ht-col-menu__hint">可多选</div>
+              <div class="ht-col-menu__enum">
+                <label
+                  v-for="opt in enumOptions"
+                  :key="String(opt.value)"
+                  class="ht-col-menu__check"
+                >
+                  <input
+                    type="checkbox"
+                    :checked="state.enumSelected.includes(String(opt.value))"
+                    @change="toggleEnum(String(opt.value))"
+                  />
+                  <span>{{ opt.label }}</span>
+                </label>
+                <div v-if="!enumOptions.length" class="ht-col-menu__empty">暂无选项</div>
+              </div>
+            </template>
+
+            <template v-else-if="filterType === 'number'">
+              <div class="ht-col-menu__field">
+                <label class="ht-col-menu__label">条件</label>
+                <div class="ht-liquid-select" :class="{ 'is-open': state.openSelect === 'numberOp' }" @mousedown.stop>
+                  <button
+                    type="button"
+                    class="ht-liquid-select__trigger"
+                    :aria-expanded="state.openSelect === 'numberOp'"
+                    @click="toggleSelect('numberOp')"
+                  >
+                    <span>{{ numberOpLabel }}</span>
+                    <i class="ht-liquid-select__chevron" />
+                  </button>
+                  <div v-if="state.openSelect === 'numberOp'" class="ht-liquid-select__panel" role="listbox">
+                    <button
+                      v-for="opt in NUMBER_OP_OPTIONS"
+                      :key="opt.value"
+                      type="button"
+                      role="option"
+                      class="ht-liquid-select__option"
+                      :class="{ 'is-active': state.numberOp === opt.value }"
+                      :aria-selected="state.numberOp === opt.value"
+                      @click="pickNumberOp(opt.value)"
+                    >
+                      {{ opt.label }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="ht-col-menu__field">
+                <label class="ht-col-menu__label">数值</label>
+                <input
+                  v-model="state.numberValue"
+                  class="ht-col-menu__control"
+                  type="number"
+                  placeholder="输入数值"
+                  @keydown.enter="onApply"
+                />
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="ht-col-menu__field ht-col-menu__field--date">
+                <label class="ht-col-menu__label">日期范围</label>
+                <a-range-picker
+                  v-model="dateRange"
+                  class="ht-liquid-datepicker"
+                  format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD"
+                  allow-clear
+                  :placeholder="['开始日期', '结束日期']"
+                  :trigger-props="datePickerTriggerProps"
+                  :popup-container="menuEl || 'body'"
+                  style="width: 100%"
+                />
+              </div>
+            </template>
+          </template>
+
+          <template v-else-if="state.tab === 'sort'">
+            <div class="ht-col-menu__sort">
+              <button
+                type="button"
+                class="ht-col-menu__sort-item"
+                :class="{ 'is-active': state.sortOrder === 'asc' }"
+                @click="selectSort('asc')"
+              >
+                <span class="ht-col-menu__sort-icon">↑</span>
+                <span>
+                  <strong>升序</strong>
+                  <em>A → Z / 小 → 大</em>
+                </span>
+              </button>
+              <button
+                type="button"
+                class="ht-col-menu__sort-item"
+                :class="{ 'is-active': state.sortOrder === 'desc' }"
+                @click="selectSort('desc')"
+              >
+                <span class="ht-col-menu__sort-icon">↓</span>
+                <span>
+                  <strong>降序</strong>
+                  <em>Z → A / 大 → 小</em>
+                </span>
+              </button>
+              <button
+                type="button"
+                class="ht-col-menu__sort-item"
+                :class="{ 'is-active': state.sortOrder === null }"
+                @click="selectSort(null)"
+              >
+                <span class="ht-col-menu__sort-icon">·</span>
+                <span>
+                  <strong>不排序</strong>
+                  <em>恢复默认顺序</em>
+                </span>
+              </button>
+            </div>
+          </template>
+
+          <template v-else>
+            <div class="ht-col-menu__batch">
+              <div class="ht-col-menu__hint">每行一个；也可粘贴 Excel 一列或逗号分隔</div>
+              <textarea
+                v-model="state.batchText"
+                class="ht-col-menu__textarea"
+                placeholder="粘贴或输入多个值，每行一个"
+                rows="8"
+                @paste="onBatchPaste"
+              />
+              <div v-if="batchCount > 0" class="ht-col-menu__batch-count">共 {{ batchCount }} 个</div>
+            </div>
+          </template>
+        </div>
+
+        <div class="ht-col-menu__footer">
+          <button type="button" class="ht-col-menu__btn" @click="onReset">{{ resetLabel }}</button>
+          <button type="button" class="ht-col-menu__btn is-primary" @click="onApply">{{ primaryLabel }}</button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="less">
+  .ht-col-menu-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    background: transparent;
+  }
+
+  .ht-col-menu {
+    position: fixed;
+    z-index: 10001;
+    width: 320px;
+    background: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.94) 100%);
+    backdrop-filter: blur(16px) saturate(1.2);
+    -webkit-backdrop-filter: blur(16px) saturate(1.2);
+    border: 1px solid rgba(255, 255, 255, 0.85);
+    border-radius: 14px;
+    box-sizing: border-box;
+    overflow: visible;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.98),
+      0 8px 28px rgba(15, 23, 42, 0.1),
+      0 2px 8px rgba(15, 23, 42, 0.04);
+  }
+
+  .ht-col-menu__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 12px 8px;
+  }
+
+  .ht-col-menu__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1d2129;
+    line-height: 22px;
+  }
+
+  .ht-col-menu__close {
+    width: 28px;
+    height: 28px;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    border-radius: 999px;
+    background: linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 247, 248, 0.55) 100%);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 3px rgba(15, 23, 42, 0.04);
+    color: #86909c;
+    font-size: 16px;
+    line-height: 26px;
+    cursor: pointer;
+
+    &:hover {
+      color: #1d2129;
+      background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.7) 100%);
+    }
+  }
+
+  .ht-col-menu__tabs {
+    display: flex;
+    gap: 2px;
+    margin: 0 12px;
+    padding: 3px;
+    background: linear-gradient(180deg, rgba(242, 243, 245, 0.95) 0%, rgba(232, 234, 237, 0.7) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    border-radius: 999px;
+    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
+  }
+
+  .ht-col-menu__tab {
+    flex: 1;
+    height: 28px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: #4e5969;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &.is-active {
+      background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.78) 100%);
+      color: var(--app-primary-color, #007979);
+      font-weight: 500;
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 1),
+        0 1px 3px rgba(15, 23, 42, 0.06);
+    }
+  }
+
+  .ht-col-menu__body {
+    padding: 12px;
+    min-height: 120px;
+    overflow: visible;
+  }
+
+  .ht-col-menu__field {
+    position: relative;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .ht-col-menu__label {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 12px;
+    color: #86909c;
+  }
+
+  // 液态输入
+  .ht-col-menu__control {
+    width: 100%;
+    height: 34px;
+    padding: 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.85);
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #1d2129;
+    background: linear-gradient(
+      165deg,
+      rgba(255, 255, 255, 0.92) 0%,
+      rgba(255, 255, 255, 0.55) 55%,
+      rgba(245, 247, 248, 0.45) 100%
+    );
+    backdrop-filter: blur(12px) saturate(1.15);
+    -webkit-backdrop-filter: blur(12px) saturate(1.15);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.98),
+      inset 0 -1px 1px rgba(15, 23, 42, 0.03),
+      0 1px 2px rgba(15, 23, 42, 0.04),
+      0 2px 6px rgba(15, 23, 42, 0.03);
+    box-sizing: border-box;
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+    caret-color: var(--app-primary-color, #007979);
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+
+    &:hover {
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.96) 0%,
+        rgba(255, 255, 255, 0.68) 55%,
+        rgba(245, 247, 248, 0.52) 100%
+      );
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 1),
+        0 2px 8px rgba(15, 23, 42, 0.06);
+    }
+
+    &:focus {
+      border-color: rgba(0, 121, 121, 0.28);
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.98) 0%,
+        rgba(255, 255, 255, 0.75) 55%,
+        rgba(240, 248, 248, 0.62) 100%
+      );
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 1),
+        inset 0 -1px 0 rgba(0, 121, 121, 0.06),
+        0 0 0 3px rgba(0, 121, 121, 0.12),
+        0 3px 10px rgba(15, 23, 42, 0.06);
+    }
+
+    &::placeholder {
+      color: #c9cdd4;
+      font-weight: 400;
+    }
+  }
+
+  // 液态自定义下拉（替代原生 select，选项面板也可美化）
+  .ht-liquid-select {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+
+    &.is-open {
+      z-index: 20;
+    }
+  }
+
+  .ht-liquid-select__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    height: 34px;
+    padding: 0 12px;
+    border: 1px solid rgba(255, 255, 255, 0.85);
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #1d2129;
+    text-align: left;
+    cursor: pointer;
+    background: linear-gradient(
+      165deg,
+      rgba(255, 255, 255, 0.92) 0%,
+      rgba(255, 255, 255, 0.55) 55%,
+      rgba(245, 247, 248, 0.45) 100%
+    );
+    backdrop-filter: blur(12px) saturate(1.15);
+    -webkit-backdrop-filter: blur(12px) saturate(1.15);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.98),
+      inset 0 -1px 1px rgba(15, 23, 42, 0.03),
+      0 1px 2px rgba(15, 23, 42, 0.04),
+      0 2px 6px rgba(15, 23, 42, 0.03);
+    box-sizing: border-box;
+    outline: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.96) 0%,
+        rgba(255, 255, 255, 0.68) 55%,
+        rgba(245, 247, 248, 0.52) 100%
+      );
+    }
+
+    .ht-liquid-select.is-open & {
+      border-color: rgba(0, 121, 121, 0.28);
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 1),
+        0 0 0 3px rgba(0, 121, 121, 0.12),
+        0 3px 10px rgba(15, 23, 42, 0.06);
+    }
+  }
+
+  .ht-liquid-select__chevron {
+    width: 10px;
+    height: 10px;
+    flex-shrink: 0;
+    border-right: 1.5px solid #86909c;
+    border-bottom: 1.5px solid #86909c;
+    transform: rotate(45deg) translateY(-2px);
+    transition: transform 0.15s ease, border-color 0.15s ease;
+
+    .ht-liquid-select.is-open & {
+      border-color: var(--app-primary-color, #007979);
+      transform: rotate(225deg) translateY(-2px);
+    }
+  }
+
+  .ht-liquid-select__panel {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    right: 0;
+    padding: 6px;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.9);
+    background: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.94) 100%);
+    backdrop-filter: blur(16px) saturate(1.2);
+    -webkit-backdrop-filter: blur(16px) saturate(1.2);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.98),
+      0 10px 28px rgba(15, 23, 42, 0.12),
+      0 2px 8px rgba(15, 23, 42, 0.05);
+    box-sizing: border-box;
+    max-height: 220px;
+    overflow: auto;
+  }
+
+  .ht-liquid-select__option {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 34px;
+    padding: 0 12px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: #4e5969;
+    font-size: 13px;
+    font-weight: 500;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.12s ease, color 0.12s ease;
+
+    &:hover {
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.95) 0%,
+        rgba(240, 248, 248, 0.7) 100%
+      );
+      color: #1d2129;
+    }
+
+    &.is-active {
+      color: var(--app-primary-color, #007979);
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.98) 0%,
+        rgba(232, 247, 247, 0.85) 100%
+      );
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
+    }
+  }
+
+  // Arco RangePicker 液态皮肤
+  .ht-col-menu__field--date {
+    :deep(.ht-liquid-datepicker.arco-picker) {
+      width: 100%;
+      height: 34px;
+      border-radius: 999px;
+      border: 1px solid rgba(255, 255, 255, 0.85);
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.92) 0%,
+        rgba(255, 255, 255, 0.55) 55%,
+        rgba(245, 247, 248, 0.45) 100%
+      );
+      backdrop-filter: blur(12px) saturate(1.15);
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.98),
+        inset 0 -1px 1px rgba(15, 23, 42, 0.03),
+        0 1px 2px rgba(15, 23, 42, 0.04),
+        0 2px 6px rgba(15, 23, 42, 0.03);
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+      &:hover {
+        border-color: rgba(255, 255, 255, 0.95);
+        background: linear-gradient(
+          165deg,
+          rgba(255, 255, 255, 0.96) 0%,
+          rgba(255, 255, 255, 0.68) 55%,
+          rgba(245, 247, 248, 0.52) 100%
+        );
+      }
+
+      &.arco-picker-focused,
+      &:focus-within {
+        border-color: rgba(0, 121, 121, 0.28);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 1),
+          0 0 0 3px rgba(0, 121, 121, 0.12),
+          0 3px 10px rgba(15, 23, 42, 0.06);
+      }
+
+      .arco-picker-input input {
+        font-size: 12px;
+        font-weight: 500;
+        color: #1d2129;
+      }
+
+      .arco-picker-separator {
+        color: #c9cdd4;
+      }
+
+      .arco-picker-suffix,
+      .arco-picker-clear-icon,
+      .arco-picker-icon-hover {
+        color: #86909c;
+      }
+    }
+  }
+
+  .ht-col-menu__hint {
+    font-size: 12px;
+    color: #86909c;
+    margin-bottom: 8px;
+  }
+
+  .ht-col-menu__enum {
+    max-height: 200px;
+    overflow: auto;
+    border: 1px solid rgba(255, 255, 255, 0.85);
+    border-radius: 12px;
+    padding: 6px 10px;
+    background: linear-gradient(
+      165deg,
+      rgba(255, 255, 255, 0.7) 0%,
+      rgba(245, 247, 248, 0.4) 100%
+    );
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.95),
+      inset 0 -1px 1px rgba(15, 23, 42, 0.03);
+  }
+
+  .ht-col-menu__check {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 32px;
+    font-size: 13px;
+    color: #1d2129;
+    cursor: pointer;
+    border-radius: 8px;
+    padding: 0 4px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.65);
+    }
+  }
+
+  .ht-col-menu__empty {
+    padding: 16px 0;
+    text-align: center;
+    font-size: 12px;
+    color: #c9cdd4;
+  }
+
+  .ht-col-menu__sort {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .ht-col-menu__sort-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.85);
+    border-radius: 12px;
+    background: linear-gradient(
+      165deg,
+      rgba(255, 255, 255, 0.9) 0%,
+      rgba(255, 255, 255, 0.5) 100%
+    );
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.95),
+      0 1px 3px rgba(15, 23, 42, 0.04);
+    text-align: left;
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    strong {
+      display: block;
+      font-size: 13px;
+      font-weight: 500;
+      color: #1d2129;
+      font-style: normal;
+    }
+
+    em {
+      display: block;
+      margin-top: 2px;
+      font-size: 12px;
+      color: #86909c;
+      font-style: normal;
+    }
+
+    &:hover {
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.98) 0%,
+        rgba(255, 255, 255, 0.7) 100%
+      );
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 1),
+        0 2px 8px rgba(15, 23, 42, 0.06);
+    }
+
+    &.is-active {
+      border-color: rgba(0, 121, 121, 0.28);
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.95) 0%,
+        rgba(232, 247, 247, 0.75) 100%
+      );
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 1),
+        0 0 0 3px rgba(0, 121, 121, 0.1),
+        0 2px 8px rgba(15, 23, 42, 0.05);
+
+      strong {
+        color: var(--app-primary-color, #007979);
+      }
+
+      .ht-col-menu__sort-icon {
+        background: linear-gradient(165deg, rgba(0, 121, 121, 0.12) 0%, rgba(0, 121, 121, 0.06) 100%);
+        color: var(--app-primary-color, #007979);
+      }
+    }
+  }
+
+  .ht-col-menu__sort-icon {
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(242, 243, 245, 0.8) 100%);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 2px rgba(15, 23, 42, 0.04);
+    color: #4e5969;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    flex-shrink: 0;
+  }
+
+  .ht-col-menu__batch {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .ht-col-menu__textarea {
+    width: 100%;
+    min-height: 160px;
+    padding: 10px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.85);
+    border-radius: 14px;
+    font-size: 13px;
+    line-height: 1.5;
+    font-weight: 500;
+    color: #1d2129;
+    background: linear-gradient(
+      165deg,
+      rgba(255, 255, 255, 0.92) 0%,
+      rgba(255, 255, 255, 0.55) 55%,
+      rgba(245, 247, 248, 0.45) 100%
+    );
+    backdrop-filter: blur(12px) saturate(1.15);
+    -webkit-backdrop-filter: blur(12px) saturate(1.15);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.98),
+      inset 0 -1px 1px rgba(15, 23, 42, 0.03),
+      0 1px 2px rgba(15, 23, 42, 0.04),
+      0 2px 6px rgba(15, 23, 42, 0.03);
+    box-sizing: border-box;
+    outline: none;
+    resize: vertical;
+    font-family: inherit;
+    caret-color: var(--app-primary-color, #007979);
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.96) 0%,
+        rgba(255, 255, 255, 0.68) 55%,
+        rgba(245, 247, 248, 0.52) 100%
+      );
+    }
+
+    &:focus {
+      border-color: rgba(0, 121, 121, 0.28);
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.98) 0%,
+        rgba(255, 255, 255, 0.75) 55%,
+        rgba(240, 248, 248, 0.62) 100%
+      );
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 1),
+        inset 0 -1px 0 rgba(0, 121, 121, 0.06),
+        0 0 0 3px rgba(0, 121, 121, 0.12),
+        0 3px 10px rgba(15, 23, 42, 0.06);
+    }
+
+    &::placeholder {
+      color: #c9cdd4;
+      font-weight: 400;
+    }
+  }
+
+  .ht-col-menu__batch-count {
+    font-size: 12px;
+    color: #86909c;
+    text-align: right;
+  }
+
+  .ht-col-menu__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 10px 12px 12px;
+    border-top: 1px solid rgba(242, 243, 245, 0.9);
+  }
+
+  .ht-col-menu__btn {
+    height: 32px;
+    min-width: 72px;
+    padding: 0 14px;
+    border: 1px solid rgba(255, 255, 255, 0.85);
+    border-radius: 999px;
+    background: linear-gradient(
+      165deg,
+      rgba(255, 255, 255, 0.92) 0%,
+      rgba(245, 247, 248, 0.7) 100%
+    );
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.98),
+      0 1px 3px rgba(15, 23, 42, 0.04);
+    font-size: 13px;
+    color: #4e5969;
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: linear-gradient(
+        165deg,
+        rgba(255, 255, 255, 0.98) 0%,
+        rgba(255, 255, 255, 0.8) 100%
+      );
+      color: #1d2129;
+    }
+
+    &.is-primary {
+      color: #fff;
+      border-color: transparent;
+      background: linear-gradient(
+        165deg,
+        color-mix(in srgb, var(--app-primary-color, #007979) 92%, #fff) 0%,
+        var(--app-primary-color, #007979) 100%
+      );
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.25),
+        0 2px 8px rgba(0, 121, 121, 0.28);
+
+      &:hover {
+        opacity: 0.94;
+      }
+    }
+  }
+</style>
+
+<!-- 非 scoped：日期面板必须压过本弹层遮罩，否则点不到 -->
+<style lang="less">
+  .arco-trigger-popup:has(.ht-col-menu-datepicker-popup) {
+    z-index: 11000 !important;
+  }
+</style>
diff --git a/src/components/HandsontablePro/filterValue.ts b/src/components/HandsontablePro/filterValue.ts
new file mode 100644
index 0000000..fe697ae
--- /dev/null
+++ b/src/components/HandsontablePro/filterValue.ts
@@ -0,0 +1,104 @@
+/** 表头条件过滤值编码：__EMPTY__ / __eq__:x / __ne__:x / __gt__:x / __gte__:x / __lt__:x / __lte__:x / 明文(包含) */
+
+export type FilterOp = 'contains' | 'equals' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte' | 'empty';
+
+const OP_PREFIX_RE = /^__(eq|ne|gt|gte|lt|lte)__:(.*)$/s;
+
+const OP_LABEL: Record<FilterOp, string> = {
+  contains: '包含',
+  equals: '等于',
+  ne: '不等于',
+  gt: '大于',
+  gte: '大于等于',
+  lt: '小于',
+  lte: '小于等于',
+  empty: '为空',
+};
+
+const PREFIX_TO_OP: Record<string, FilterOp> = {
+  eq: 'equals',
+  ne: 'ne',
+  gt: 'gt',
+  gte: 'gte',
+  lt: 'lt',
+  lte: 'lte',
+};
+
+export function encodeFilterValue(op: FilterOp, value = ''): string {
+  const v = (value || '').trim();
+  if (op === 'empty') return '__EMPTY__';
+  if (op === 'contains') return v;
+  if (op === 'equals') return v ? `__eq__:${v}` : '';
+  if (op === 'ne') return v ? `__ne__:${v}` : '';
+  if (op === 'gt') return v ? `__gt__:${v}` : '';
+  if (op === 'gte') return v ? `__gte__:${v}` : '';
+  if (op === 'lt') return v ? `__lt__:${v}` : '';
+  if (op === 'lte') return v ? `__lte__:${v}` : '';
+  return v;
+}
+
+export function parseFilterValue(raw: string): { op: FilterOp; value: string } {
+  const text = (raw || '').trim();
+  if (!text) return { op: 'contains', value: '' };
+  if (text === '__EMPTY__') return { op: 'empty', value: '' };
+  const m = text.match(OP_PREFIX_RE);
+  if (m) {
+    return { op: PREFIX_TO_OP[m[1]] || 'contains', value: m[2] ?? '' };
+  }
+  return { op: 'contains', value: text };
+}
+
+export function formatFilterOpDisplay(raw: string): string {
+  const { op, value } = parseFilterValue(raw);
+  if (op === 'empty') return OP_LABEL.empty;
+  if (!value) return '';
+  if (op === 'contains') return value;
+  return `${OP_LABEL[op]} ${value}`;
+}
+
+/** 是否需要在当前页做本地条件匹配（服务端不支持的运算符） */
+export function needsLocalOpFilter(raw: string): boolean {
+  const { op } = parseFilterValue(raw);
+  return op === 'empty' || op === 'ne' || op === 'gt' || op === 'gte' || op === 'lt' || op === 'lte' || op === 'equals';
+}
+
+/** 提交给后端的明文检索值（高级运算本地处理，不透传编码） */
+export function toServerSearchValue(raw: string): string {
+  const { op, value } = parseFilterValue(raw);
+  if (op === 'contains' || op === 'equals') return value;
+  return '';
+}
+
+function isEmptyCellValue(val: any): boolean {
+  return val == null || String(val).trim() === '';
+}
+
+export function matchFilterValue(cellVal: any, raw: string, asNumber = false): boolean {
+  const { op, value } = parseFilterValue(raw);
+  if (op === 'empty') return isEmptyCellValue(cellVal);
+  if (!value) return true;
+
+  if (asNumber || op === 'gt' || op === 'gte' || op === 'lt' || op === 'lte') {
+    const n = Number(value);
+    const cv = Number(cellVal);
+    if (Number.isNaN(n)) return true;
+    if (Number.isNaN(cv) || isEmptyCellValue(cellVal)) return false;
+    if (op === 'equals' || (asNumber && op === 'contains')) return cv === n;
+    if (op === 'ne') return cv !== n;
+    if (op === 'gt') return cv > n;
+    if (op === 'gte') return cv >= n;
+    if (op === 'lt') return cv < n;
+    if (op === 'lte') return cv <= n;
+  }
+
+  const cell = String(cellVal ?? '');
+  const cellLower = cell.toLowerCase();
+  const needle = value.toLowerCase();
+  if (op === 'equals') return cellLower === needle;
+  if (op === 'ne') return cellLower !== needle;
+  if (op === 'gte') return cellLower >= needle;
+  if (op === 'lte') return cellLower <= needle;
+  if (op === 'gt') return cellLower > needle;
+  if (op === 'lt') return cellLower < needle;
+  return cellLower.includes(needle);
+}
diff --git a/src/components/HandsontablePro/hybridHeader.ts b/src/components/HandsontablePro/hybridHeader.ts
new file mode 100644
index 0000000..b192b28
--- /dev/null
+++ b/src/components/HandsontablePro/hybridHeader.ts
@@ -0,0 +1,96 @@
+import type { ColumnDef, FilterType, HeaderMode } from './types';
+
+/** 操作/展示列：不生成混合表头 */
+const HEADER_NONE_KEY_RE =
+  /^(action|actions|operation|operate|ops|view|retry|cancel|image|avatar|checkbox|settings|config|btn|button)s?$/i;
+
+/** 日期列 */
+const DATE_KEY_RE =
+  /(Time|Date|At)$|^(create|update|modify|pay|ship|sign|receive|finish|bind|eligible|settle|arrival|expected|valid|auth|token|pickup|processed|finished|newestTrack)/i;
+
+/** 更精确的日期字段 */
+const DATE_KEY_STRICT_RE =
+  /(Time|Date|At)$/i;
+
+/** 数值列 */
+const NUMBER_KEY_RE =
+  /(Qty|Count|Amount|Points|Weight|Balance|Rate|Price|Quota|Discount|Span|Sort|Size|Height|Width|Length|Volume)$|^(min|max|total|available|frozen|qty|count|amount|points|weight|balance|quota|sort|retry|fail|extra)/i;
+
+function looksLikeDateKey(key: string): boolean {
+  if (DATE_KEY_STRICT_RE.test(key)) return true;
+  // newestTrackTime 等
+  if (/trackTime|createTime|updateTime|payTime|shipTime/i.test(key)) return true;
+  return false;
+}
+
+function looksLikeNumberKey(key: string): boolean {
+  if (looksLikeDateKey(key)) return false;
+  return NUMBER_KEY_RE.test(key);
+}
+
+/**
+ * 为未配置混合表头的列自动补齐 headerMode / filterType 等。
+ * - 已显式配置 headerMode / searchable / searchField / filterType 的列不覆盖
+ * - 默认 serverFilter=false（当前页过滤）；页面若要走服务端可自行设 serverFilter:true + searchParams/@search
+ */
+export function enrichHybridColumn(col: ColumnDef, enabled: boolean): ColumnDef {
+  if (!enabled || !col?.key) return col;
+
+  // 已手工配置过：只补 searchField，不改模式
+  const alreadyConfigured = !!(
+    col.headerMode ||
+    col.searchable ||
+    col.searchField ||
+    col.filterType ||
+    col.filterable
+  );
+  if (alreadyConfigured) {
+    if ((col.searchable || col.filterable || col.filterType || col.headerMode === 'inline' || col.headerMode === 'icon') && !col.searchField) {
+      return { ...col, searchField: col.key };
+    }
+    return col;
+  }
+
+  if (HEADER_NONE_KEY_RE.test(col.key)) {
+    return { ...col, headerMode: 'none' as HeaderMode };
+  }
+
+  if (looksLikeDateKey(col.key)) {
+    return {
+      ...col,
+      headerMode: 'icon' as HeaderMode,
+      filterType: (col.filterType || 'date') as FilterType,
+      filterable: true,
+      searchable: true,
+      searchField: col.key,
+      sortable: col.sortable !== false,
+      serverFilter: col.serverFilter !== undefined ? col.serverFilter : false,
+    };
+  }
+
+  if (looksLikeNumberKey(col.key)) {
+    return {
+      ...col,
+      headerMode: 'icon' as HeaderMode,
+      filterType: (col.filterType || 'number') as FilterType,
+      filterable: true,
+      searchable: true,
+      searchField: col.key,
+      sortable: col.sortable !== false,
+      serverFilter: col.serverFilter !== undefined ? col.serverFilter : false,
+    };
+  }
+
+  return {
+    ...col,
+    headerMode: 'inline' as HeaderMode,
+    searchable: true,
+    searchField: col.key,
+    sortable: col.sortable !== false,
+    serverFilter: col.serverFilter !== undefined ? col.serverFilter : false,
+  };
+}
+
+export function enrichHybridColumns(columns: ColumnDef[], enabled: boolean): ColumnDef[] {
+  return (columns || []).map((c) => enrichHybridColumn(c, enabled));
+}
diff --git a/src/components/HandsontablePro/index.vue b/src/components/HandsontablePro/index.vue
index 416679f..1dc5429 100644
--- a/src/components/HandsontablePro/index.vue
+++ b/src/components/HandsontablePro/index.vue
@@ -6,6 +6,16 @@
   import Handsontable from 'handsontable';
   import 'handsontable/styles/handsontable.min.css';
   import 'handsontable/styles/ht-theme-classic.min.css';
+  import type { ColumnDef, HeaderMode, FilterType, SortOrder } from './types';
+  import ActiveFilterBar, { type ActiveFilterItem } from './ActiveFilterBar.vue';
+  import HeaderFilterPopover from './HeaderFilterPopover.vue';
+  import {
+    formatFilterOpDisplay,
+    matchFilterValue,
+    needsLocalOpFilter,
+    parseFilterValue,
+  } from './filterValue';
+  import { enrichHybridColumn } from './hybridHeader';
 
   // 注册所有 Handsontable 模块
   registerAllModules();
@@ -23,17 +33,6 @@
     renderer?: any;
   }
 
-  interface ColumnDef {
-    key: string;
-    label: string;
-    width: number;
-    searchable?: boolean;
-    searchField?: string;
-    multiValue?: boolean;
-    renderer?: (row: any, value: any) => string;
-    className?: string;
-  }
-
   interface Props {
     // 列定义
     columns: ColumnDef[];
@@ -99,8 +98,20 @@
     lockedColumnKeys?: string[];
     // 是否启用表头搜索框
     enableHeaderSearch?: boolean;
-    // 是否启用表头筛选/排序下拉
+    /** 未配置 headerMode 的列自动补齐混合表头（默认开启） */
+    autoHybridHeader?: boolean;
+    /** 原生 Handsontable 下拉过滤（本页）；默认关闭，改用自研 Popover */
     enableColumnFilter?: boolean;
+    /** 表头排序箭头 */
+    enableHeaderSort?: boolean;
+    /** 表头筛选 ▾（自研 Popover） */
+    enableHeaderFilter?: boolean;
+    /** 表格上方已筛选条件条 */
+    showActiveFilterBar?: boolean;
+    /** local=排当前页；remote=仅 emit sort-change */
+    sortMode?: 'local' | 'remote';
+    sortField?: string | null;
+    sortOrder?: SortOrder;
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -127,7 +138,14 @@
     persistColumnOrderKey: '',
     lockedColumnKeys: () => [],
     enableHeaderSearch: true,
-    enableColumnFilter: true,
+    autoHybridHeader: true,
+    enableColumnFilter: false,
+    enableHeaderSort: true,
+    enableHeaderFilter: true,
+    showActiveFilterBar: true,
+    sortMode: 'local',
+    sortField: null,
+    sortOrder: null,
   });
 
   // 确保 total 始终是数字类型（用于内部使用）
@@ -148,6 +166,9 @@
     'checkbox-change': [row: any, checked: boolean, rowIndex: number];
     'column-order-change': [order: string[]];
     'open-column-order-config': [columns: Array<{ key: string; label: string }>];
+    'sort-change': [payload: { field: string | null; order: SortOrder }];
+    'filter-apply': [payload: { field: string; value: string; serverFilter: boolean }];
+    'clear-filters': [];
   }>();
 
   const hotContainer = ref<HTMLElement | null>(null);
@@ -185,6 +206,604 @@
   const selectedRowIndicesSet = ref<Set<number>>(new Set());
   const internalColumnOrder = ref<string[]>([]);
 
+  const localSortField = ref<string | null>(null);
+  const localSortOrder = ref<SortOrder>(null);
+  const displayRowIndices = ref<number[]>([]);
+
+  const filterPopover = reactive({
+    visible: false,
+    colKey: '',
+    title: '',
+    filterType: 'text' as FilterType,
+    modelValue: '',
+    options: [] as Array<{ label: string; value: string | number | boolean }>,
+    anchorStyle: {} as Record<string, string>,
+    sortable: false,
+    sortOrder: null as SortOrder,
+    multiValue: false,
+    defaultTab: 'filter' as 'filter' | 'sort' | 'batch',
+  });
+
+  const effectiveSortField = computed(() =>
+    props.sortMode === 'remote' ? (props.sortField ?? null) : localSortField.value
+  );
+  const effectiveSortOrder = computed(() =>
+    props.sortMode === 'remote' ? (props.sortOrder ?? null) : localSortOrder.value
+  );
+
+  function deriveHeaderMode(col: ColumnDef): HeaderMode {
+    if (col.headerMode) return col.headerMode;
+    if (col.filterType && ['enum', 'date', 'number'].includes(col.filterType)) return 'icon';
+    if (col.searchable || col.searchField) return 'inline';
+    return 'none';
+  }
+
+  function resolveSearchField(col: ColumnDef, visualColIndex?: number): string {
+    return col.searchField || (visualColIndex != null ? props.columnToSearchFieldMap[visualColIndex] : undefined) || col.key;
+  }
+
+  function resolveFilterField(col: ColumnDef): string {
+    return col.searchField || col.key;
+  }
+
+  function isColSortable(col: ColumnDef): boolean {
+    return col.sortable === true;
+  }
+
+  function showColumnFilterBtn(col: ColumnDef): boolean {
+    if (!props.enableHeaderFilter) return false;
+    const mode = deriveHeaderMode(col);
+    return !!(col.filterable || col.filterType || mode === 'icon' || col.searchable || col.searchField);
+  }
+
+  function resolveFilterType(col: ColumnDef): FilterType {
+    return col.filterType || 'text';
+  }
+
+  function formatMultiValueDisplay(raw: string): { display: string; title: string } {
+    if (!raw) return { display: '', title: '' };
+    const values = raw.split(',').map((v) => v.trim()).filter((v) => v.length > 0);
+    if (values.length > 1) {
+      const first = values[0].length > 15 ? `${values[0].substring(0, 15)}...` : values[0];
+      return { display: `${first} (+${values.length - 1})`, title: raw };
+    }
+    return { display: values[0] || raw, title: '' };
+  }
+
+  function formatFilterDisplayText(col: ColumnDef, raw: string): string {
+    if (raw === '__EMPTY__' || parseFilterValue(raw).op === 'empty') return '为空';
+    const ft = resolveFilterType(col);
+    if (ft === 'enum' && col.filterOptions?.length) {
+      const vals = raw.split(',').map((v) => v.trim()).filter(Boolean);
+      const labels = vals.map((v) => col.filterOptions!.find((o) => String(o.value) === v)?.label || v);
+      return labels.join('、');
+    }
+    if (ft === 'date') {
+      const [start, end] = raw.split(',');
+      if (start && end) return `${start} ~ ${end}`;
+      return start || end || raw;
+    }
+    if (ft === 'number' || ft === 'text' || !ft) {
+      const labeled = formatFilterOpDisplay(raw);
+      if (labeled) return labeled.length > 28 ? `${labeled.substring(0, 28)}...` : labeled;
+    }
+    return raw.length > 24 ? `${raw.substring(0, 24)}...` : raw;
+  }
+
+  function compareSortValues(a: any, b: any): number {
+    if (isEmptyCellValue(a) && isEmptyCellValue(b)) return 0;
+    if (isEmptyCellValue(a)) return 1;
+    if (isEmptyCellValue(b)) return -1;
+    const na = Number(a);
+    const nb = Number(b);
+    if (!Number.isNaN(na) && !Number.isNaN(nb) && String(a).trim() !== '' && String(b).trim() !== '') {
+      return na - nb;
+    }
+    return String(a).localeCompare(String(b), 'zh-CN');
+  }
+
+  function rowMatchesLocalFilter(row: any, col: ColumnDef, raw: string): boolean {
+    const cellVal = row?.[col.key];
+    const ft = resolveFilterType(col);
+    if (ft === 'enum') {
+      const selected = raw.split(',').map((v) => v.trim()).filter(Boolean);
+      if (!selected.length) return true;
+      return selected.includes(String(cellVal ?? ''));
+    }
+    if (ft === 'date') {
+      const [start, end] = raw.split(',').map((v) => v.trim());
+      const cv = String(cellVal ?? '').slice(0, 10);
+      if (start && cv < start) return false;
+      if (end && cv > end) return false;
+      return true;
+    }
+    return matchFilterValue(cellVal, raw, ft === 'number');
+  }
+
+  function getSortedIndices(): number[] {
+    let indices = props.data.map((_, i) => i);
+    effectiveColumns.value.forEach((col) => {
+      const field = resolveFilterField(col);
+      const raw = (props.searchParams as any)[field];
+      if (raw == null || String(raw).trim() === '') return;
+      const rawStr = String(raw);
+      // 本地列 或 编码运算（等于/不等于/比较/为空）→ 当前页再过滤
+      if (col.serverFilter === false || needsLocalOpFilter(rawStr)) {
+        indices = indices.filter((i) => rowMatchesLocalFilter(props.data[i], col, rawStr));
+      }
+    });
+    const field = effectiveSortField.value;
+    const order = effectiveSortOrder.value;
+    if (field && order) {
+      indices.sort((ia, ib) => {
+        const cmp = compareSortValues(props.data[ia]?.[field], props.data[ib]?.[field]);
+        return order === 'asc' ? cmp : -cmp;
+      });
+    }
+    displayRowIndices.value = [...indices];
+    return indices;
+  }
+
+  function rowAt(rowIndex: number): any {
+    const indices = displayRowIndices.value;
+    if (indices.length > 0 && rowIndex >= 0 && rowIndex < indices.length) {
+      return props.data[indices[rowIndex]];
+    }
+    return props.data[rowIndex];
+  }
+
+  function buildRowDataArray(row: any, visualIndex: number): any[] {
+    const rowData: any[] = [];
+    if (props.showCheckboxColumn) {
+      rowData.push((row as any).checked || false);
+    }
+    if (props.showActionColumn && props.actionColumnPosition === 'start') {
+      rowData.push('');
+    }
+    const serialNo = (props.currentPage - 1) * props.pageSize + visualIndex + 1;
+    rowData.push(serialNo);
+    const dataColCount = effectiveColumns.value.length;
+    effectiveColumns.value.forEach((col, index) => {
+      if (props.showActionColumn && props.actionColumnPosition === 'beforeLast' && index === dataColCount - 1) {
+        rowData.push('');
+      }
+      rowData.push(cellDisplayValue(row, col.key));
+    });
+    if (props.showActionColumn && props.actionColumnPosition === 'end') {
+      rowData.push('');
+    }
+    return rowData;
+  }
+
+  function syncDisplayRows(): any[][] {
+    const indices = getSortedIndices();
+    return indices.map((origIdx, visualIdx) => buildRowDataArray(props.data[origIdx], visualIdx));
+  }
+
+  function getSortBtnLabel(field: string): string {
+    if (effectiveSortField.value !== field) return '↕';
+    if (effectiveSortOrder.value === 'asc') return '↑';
+    if (effectiveSortOrder.value === 'desc') return '↓';
+    return '↕';
+  }
+
+  function cycleColumnSort(col: ColumnDef) {
+    const field = col.key;
+    let nextOrder: SortOrder = 'asc';
+    if (effectiveSortField.value === field) {
+      if (effectiveSortOrder.value === 'asc') nextOrder = 'desc';
+      else if (effectiveSortOrder.value === 'desc') nextOrder = null;
+      else nextOrder = 'asc';
+    }
+    emit('sort-change', { field: nextOrder ? field : null, order: nextOrder });
+    if (props.sortMode === 'local') {
+      localSortField.value = nextOrder ? field : null;
+      localSortOrder.value = nextOrder;
+      if (hotInstance) {
+        hotInstance.loadData(syncDisplayRows());
+        hotInstance.render();
+      }
+    }
+  }
+
+  function openFilterPopover(col: ColumnDef, anchorEl: HTMLElement, defaultTab: 'filter' | 'sort' | 'batch' = 'filter') {
+    const rect = anchorEl.getBoundingClientRect();
+    const searchField = resolveSearchField(col);
+    filterPopover.colKey = col.key;
+    filterPopover.title = col.label;
+    filterPopover.filterType = resolveFilterType(col);
+    filterPopover.modelValue = String((props.searchParams as any)[resolveFilterField(col)] || '');
+    filterPopover.options = col.filterOptions || [];
+    filterPopover.sortable = isColSortable(col);
+    filterPopover.sortOrder =
+      effectiveSortField.value === col.key ? effectiveSortOrder.value : null;
+    filterPopover.multiValue = !!(col.multiValue || props.multiValueFields.includes(searchField));
+    filterPopover.defaultTab = defaultTab;
+    const menuW = 320;
+    const left = Math.min(Math.max(8, rect.left), window.innerWidth - menuW - 8);
+    const top = Math.min(rect.bottom + 6, window.innerHeight - 420);
+    filterPopover.anchorStyle = {
+      top: `${Math.max(8, top)}px`,
+      left: `${left}px`,
+    };
+    filterPopover.visible = true;
+  }
+
+  function applyColumnSort(order: SortOrder) {
+    const col = effectiveColumns.value.find((c) => c.key === filterPopover.colKey);
+    if (!col) return;
+    const field = col.key;
+    emit('sort-change', { field: order ? field : null, order });
+    if (props.sortMode === 'local') {
+      localSortField.value = order ? field : null;
+      localSortOrder.value = order;
+      if (hotInstance) {
+        hotInstance.loadData(syncDisplayRows());
+        hotInstance.render();
+      }
+    }
+    syncHybridHeaders();
+  }
+
+  function onFilterPopoverApply(value: string) {
+    const col = effectiveColumns.value.find((c) => c.key === filterPopover.colKey);
+    if (!col) return;
+    const field = resolveFilterField(col);
+    (props.searchParams as any)[field] = value;
+    if (resolveFilterType(col) === 'date') {
+      const [start, end] = value.split(',');
+      (props.searchParams as any)[`${field}Start`] = (start || '').trim();
+      (props.searchParams as any)[`${field}End`] = (end || '').trim();
+    }
+    const serverFilter = col.serverFilter !== false;
+    emit('filter-apply', { field, value, serverFilter });
+    if (serverFilter) {
+      emit('search');
+    }
+    // 编码运算（等于/不等于/比较/为空）始终在当前页再滤一遍
+    if (hotInstance && (col.serverFilter === false || needsLocalOpFilter(value))) {
+      hotInstance.loadData(syncDisplayRows());
+      hotInstance.render();
+    }
+    syncHybridHeaders();
+  }
+
+  function onFilterPopoverReset() {
+    const col = effectiveColumns.value.find((c) => c.key === filterPopover.colKey);
+    if (!col) return;
+    const field = resolveFilterField(col);
+    (props.searchParams as any)[field] = '';
+    if ((props.searchParams as any)[`${field}Start`] != null) (props.searchParams as any)[`${field}Start`] = '';
+    if ((props.searchParams as any)[`${field}End`] != null) (props.searchParams as any)[`${field}End`] = '';
+    const serverFilter = col.serverFilter !== false;
+    emit('filter-apply', { field, value: '', serverFilter });
+    if (serverFilter) {
+      emit('search');
+    } else if (hotInstance) {
+      hotInstance.loadData(syncDisplayRows());
+      hotInstance.render();
+    }
+    syncHybridHeaders();
+  }
+
+  function onActiveFilterClear(key: string) {
+    if (key === '__sort__') {
+      emit('sort-change', { field: null, order: null });
+      if (props.sortMode === 'local') {
+        localSortField.value = null;
+        localSortOrder.value = null;
+        if (hotInstance) {
+          hotInstance.loadData(syncDisplayRows());
+          hotInstance.render();
+        }
+      }
+      syncHybridHeaders();
+      return;
+    }
+    (props.searchParams as any)[key] = '';
+    emit('filter-apply', { field: key, value: '', serverFilter: true });
+    emit('search');
+    syncHybridHeaders();
+  }
+
+  function onActiveFilterClearAll() {
+    effectiveColumns.value.forEach((col) => {
+      (props.searchParams as any)[resolveFilterField(col)] = '';
+    });
+    emit('sort-change', { field: null, order: null });
+    if (props.sortMode === 'local') {
+      localSortField.value = null;
+      localSortOrder.value = null;
+    }
+    emit('clear-filters');
+    emit('search');
+    if (hotInstance) {
+      hotInstance.loadData(syncDisplayRows());
+      hotInstance.render();
+    }
+    syncHybridHeaders();
+  }
+
+  function onActiveFilterItemClick(key: string) {
+    if (key === '__sort__') return;
+    const col = effectiveColumns.value.find((c) => resolveFilterField(c) === key);
+    if (!col) return;
+    nextTick(() => {
+      const btn = hotContainer.value?.querySelector(
+        `th[data-filter-field="${key}"] .ht-header-hybrid-input, th[data-filter-field="${key}"] .ht-header-hybrid-trigger`
+      ) as HTMLElement | null;
+      if (btn) openFilterPopover(col, btn, 'filter');
+    });
+  }
+
+  function applyLiquidFieldStyle(el: HTMLElement, focused = false) {
+    // 内联 !important 压过浏览器 UA / Handsontable 默认边框（截图里那圈硬黑框）
+    el.style.setProperty('width', '100%', 'important');
+    el.style.setProperty('min-width', '0', 'important');
+    el.style.setProperty('max-width', '100%', 'important');
+    el.style.setProperty('height', '24px', 'important');
+    el.style.setProperty('padding', '0 10px', 'important');
+    el.style.setProperty('margin', '0', 'important');
+    el.style.setProperty('border-width', '1px', 'important');
+    el.style.setProperty('border-style', 'solid', 'important');
+    el.style.setProperty(
+      'border-color',
+      focused ? 'rgba(0, 121, 121, 0.28)' : 'rgba(255, 255, 255, 0.85)',
+      'important'
+    );
+    el.style.setProperty('border-radius', '999px', 'important');
+    el.style.setProperty('outline', 'none', 'important');
+    el.style.setProperty('box-sizing', 'border-box', 'important');
+    el.style.setProperty(
+      'background',
+      focused
+        ? 'linear-gradient(165deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.72) 55%, rgba(240,248,248,0.65) 100%)'
+        : 'linear-gradient(165deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.5) 55%, rgba(245,247,248,0.42) 100%)',
+      'important'
+    );
+    el.style.setProperty('backdrop-filter', 'blur(12px) saturate(1.2)', 'important');
+    el.style.setProperty('-webkit-backdrop-filter', 'blur(12px) saturate(1.2)', 'important');
+    el.style.setProperty(
+      'box-shadow',
+      focused
+        ? 'inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,121,121,0.06), 0 0 0 3px rgba(0,121,121,0.12), 0 3px 10px rgba(15,23,42,0.07)'
+        : 'inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -1px 1px rgba(15,23,42,0.03), 0 1px 2px rgba(15,23,42,0.04), 0 2px 6px rgba(15,23,42,0.03)',
+      'important'
+    );
+    el.style.setProperty('color', focused ? '#1d2129' : '#4e5969', 'important');
+    el.style.setProperty('font-size', '12px', 'important');
+    el.style.setProperty('font-weight', '500', 'important');
+    el.style.setProperty('line-height', '22px', 'important');
+    el.style.setProperty('font-family', 'inherit', 'important');
+    el.style.setProperty('caret-color', 'var(--app-primary-color, #007979)', 'important');
+    el.style.setProperty('-webkit-appearance', 'none', 'important');
+    el.style.setProperty('appearance', 'none', 'important');
+    if (el.tagName === 'BUTTON') {
+      el.style.setProperty('cursor', 'pointer', 'important');
+      el.style.setProperty('text-align', 'left', 'important');
+    }
+  }
+
+  function notifySearch() {
+    emit('search');
+    // 无服务端接线的页面也能靠本地过滤立即生效
+    if (hotInstance) {
+      hotInstance.loadData(syncDisplayRows());
+      hotInstance.render();
+    }
+    syncHybridHeaders();
+  }
+
+  function bindInlineSearchInput(input: HTMLInputElement, colDef: ColumnDef, searchField: string, isMultiValue: boolean) {
+    let focusSnapshot = String((props.searchParams as any)[searchField] || '');
+    applyLiquidFieldStyle(input, false);
+    input.addEventListener('keydown', (e: KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === 'Enter' || e.keyCode === 13) {
+        e.preventDefault();
+        const value = (input.value || '').trim();
+        (props.searchParams as any)[searchField] = value;
+        focusSnapshot = value;
+        notifySearch();
+      }
+    });
+    input.addEventListener('blur', (e: FocusEvent) => {
+      e.stopPropagation();
+      applyLiquidFieldStyle(input, false);
+      const value = (input.value || '').trim();
+      (props.searchParams as any)[searchField] = value;
+      if (isMultiValue && value) {
+        const { display, title } = formatMultiValueDisplay(value);
+        input.value = display;
+        input.title = title || '双击打开筛选';
+      }
+      if (value !== focusSnapshot) {
+        focusSnapshot = value;
+        notifySearch();
+      }
+    });
+    input.addEventListener('focus', () => {
+      applyLiquidFieldStyle(input, true);
+      const raw = String((props.searchParams as any)[searchField] || '');
+      focusSnapshot = raw;
+      input.value = raw;
+      input.title = '双击打开筛选 · 回车搜索';
+    });
+    input.addEventListener('paste', (e: ClipboardEvent) => {
+      e.stopPropagation();
+      const clipboardData = e.clipboardData;
+      if (!clipboardData) return;
+      const pastedText = clipboardData.getData('text');
+      if (!pastedText) return;
+      let processedValue = pastedText.trim();
+      if (pastedText.includes('\n') || pastedText.includes('\r')) {
+        processedValue = pastedText
+          .split(/[\n\r]+/)
+          .map((line) => line.trim())
+          .filter((line) => line.length > 0)
+          .join(',');
+      } else if (pastedText.includes(';')) {
+        processedValue = pastedText
+          .split(';')
+          .map((item) => item.trim())
+          .filter((item) => item.length > 0)
+          .join(',');
+      }
+      setTimeout(() => {
+        input.value = processedValue;
+        (props.searchParams as any)[searchField] = processedValue;
+      }, 0);
+    });
+    input.addEventListener('input', () => {
+      (props.searchParams as any)[searchField] = (input.value || '').trim();
+    });
+    input.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());
+    input.addEventListener('dblclick', (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      openFilterPopover(colDef, input, 'filter');
+    });
+  }
+
+  function buildHybridHeader(col: number, TH: HTMLElement, colDef: ColumnDef) {
+    if (TH.querySelector('.ht-header-hybrid-wrap')) return;
+
+    const searchField = resolveSearchField(colDef, col);
+    const headerMode = deriveHeaderMode(colDef);
+    const filterField = resolveFilterField(colDef);
+    const showMenu = showColumnFilterBtn(colDef) || (props.enableHeaderSort && isColSortable(colDef));
+    const rawSearch = String((props.searchParams as any)[searchField] || '');
+    const isMultiValue = !!(colDef.multiValue || props.multiValueFields.includes(searchField));
+    const filterActive = !!(props.searchParams as any)[filterField];
+
+    TH.innerHTML = '';
+    TH.classList.add('ht-header-hybrid');
+    TH.classList.remove('ht-header-simple');
+    TH.style.padding = '4px 6px';
+    TH.style.position = 'relative';
+    TH.style.verticalAlign = 'middle';
+    TH.style.overflow = 'visible';
+    TH.setAttribute('data-filter-field', filterField);
+
+    const wrap = document.createElement('div');
+    wrap.className = 'ht-header-hybrid-wrap';
+
+    const row = document.createElement('div');
+    row.className = 'ht-header-hybrid-row';
+
+    if (headerMode === 'inline' && props.enableHeaderSearch) {
+      // 列名进 placeholder；双击打开筛选（批量走菜单「批量」Tab）
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.className = 'ht-header-hybrid-input';
+      input.placeholder = colDef.label;
+      input.setAttribute('size', '1');
+      applyLiquidFieldStyle(input, false);
+      if (isMultiValue && rawSearch) {
+        const { display, title } = formatMultiValueDisplay(rawSearch);
+        input.value = display;
+        input.title = title || '双击打开筛选';
+      } else {
+        input.value = rawSearch;
+        input.title = '双击打开筛选 · 回车搜索';
+      }
+      bindInlineSearchInput(input, colDef, searchField, isMultiValue);
+      row.appendChild(input);
+    } else if (headerMode === 'icon' || (showMenu && headerMode === 'none')) {
+      const trigger = document.createElement('button');
+      trigger.type = 'button';
+      trigger.className = 'ht-header-hybrid-trigger' + (filterActive ? ' has-value' : '');
+      applyLiquidFieldStyle(trigger, false);
+      trigger.textContent = filterActive
+        ? formatFilterDisplayText(colDef, String((props.searchParams as any)[filterField]))
+        : colDef.label;
+      trigger.title = `${colDef.label} · 双击打开筛选`;
+      trigger.addEventListener('mousedown', (e) => e.stopPropagation());
+      trigger.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        openFilterPopover(colDef, trigger, 'filter');
+      });
+      trigger.addEventListener('dblclick', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        openFilterPopover(colDef, trigger, 'filter');
+      });
+      row.appendChild(trigger);
+    } else {
+      const label = document.createElement('span');
+      label.className = 'ht-header-hybrid-label';
+      label.textContent = colDef.label;
+      label.title = colDef.label;
+      row.appendChild(label);
+    }
+
+    wrap.appendChild(row);
+    TH.appendChild(wrap);
+  }
+
+  function syncHybridHeaders() {
+    if (!hotContainer.value) return;
+    const headerRows = hotContainer.value.querySelectorAll('.ht_clone_top thead tr, .ht_master thead tr');
+    if (!headerRows.length) return;
+
+    headerRows.forEach((headerRow: Element) => {
+      const headerCells = headerRow.querySelectorAll('th');
+      headerCells.forEach((th: Element, index: number) => {
+        let colOffset = 0;
+        const checkboxColIndex = props.showCheckboxColumn ? colOffset++ : -1;
+        const actionColStartIndex = props.showActionColumn && props.actionColumnPosition === 'start' ? colOffset++ : -1;
+        const serialColIndex = colOffset++;
+        const dataColCount = effectiveColumns.value.length;
+        const actionColEndIndex = props.showActionColumn
+          ? (props.actionColumnPosition === 'end' ? colOffset + dataColCount : props.actionColumnPosition === 'beforeLast' ? colOffset + dataColCount - 1 : -1)
+          : -1;
+
+        if (index === checkboxColIndex || index === actionColStartIndex || index === serialColIndex || index === actionColEndIndex) {
+          return;
+        }
+
+        const dataColIndex = index - colOffset;
+        if (dataColIndex < 0 || dataColIndex >= effectiveColumns.value.length) return;
+
+        const colDef = effectiveColumns.value[dataColIndex];
+        const thEl = th as HTMLElement;
+        const wrap = thEl.querySelector('.ht-header-hybrid-wrap');
+        if (!wrap) return;
+
+        const searchField = resolveSearchField(colDef, index);
+        const filterField = resolveFilterField(colDef);
+        const headerMode = deriveHeaderMode(colDef);
+        const rawSearch = String((props.searchParams as any)[searchField] || '');
+        const isMultiValue = !!(colDef.multiValue || props.multiValueFields.includes(searchField));
+        const filterActive = !!(props.searchParams as any)[filterField];
+
+        const input = thEl.querySelector('.ht-header-hybrid-input') as HTMLInputElement | null;
+        if (input && document.activeElement !== input) {
+          applyLiquidFieldStyle(input, false);
+          input.placeholder = colDef.label;
+          if (isMultiValue && rawSearch) {
+            const { display, title } = formatMultiValueDisplay(rawSearch);
+            input.value = display;
+            input.title = title || '双击打开筛选';
+          } else {
+            input.value = rawSearch;
+            input.title = '双击打开筛选 · 回车搜索';
+          }
+        }
+
+        const trigger = thEl.querySelector('.ht-header-hybrid-trigger') as HTMLElement | null;
+        if (trigger && headerMode === 'icon') {
+          applyLiquidFieldStyle(trigger, false);
+          trigger.classList.toggle('has-value', filterActive);
+          trigger.textContent = filterActive
+            ? formatFilterDisplayText(colDef, String((props.searchParams as any)[filterField]))
+            : colDef.label;
+        }
+      });
+    });
+  }
+
   /** 空值 / 无效数字：不展示 NaN，统一为 '--'（保留 0 / false） */
   function isEmptyCellValue(v: any): boolean {
     if (v === undefined || v === null || v === '') return true;
@@ -226,7 +845,39 @@
   const effectiveColumns = computed<ColumnDef[]>(() => {
     const order = resolvedColumnOrder.value;
     const map = new Map(props.columns.map((c) => [c.key, c]));
-    return order.map((k) => map.get(k)).filter(Boolean) as ColumnDef[];
+    const auto = props.autoHybridHeader && props.enableHeaderSearch;
+    return order
+      .map((k) => map.get(k))
+      .filter(Boolean)
+      .map((c) => enrichHybridColumn(c as ColumnDef, auto)) as ColumnDef[];
+  });
+
+  const activeFilterItems = computed<ActiveFilterItem[]>(() => {
+    const items: ActiveFilterItem[] = [];
+    effectiveColumns.value.forEach((col) => {
+      const field = resolveFilterField(col);
+      const val = (props.searchParams as any)[field];
+      if (val != null && String(val).trim() !== '') {
+        items.push({
+          key: field,
+          label: col.label,
+          text: formatFilterDisplayText(col, String(val)),
+          kind: 'filter',
+        });
+      }
+    });
+    const sf = effectiveSortField.value;
+    const so = effectiveSortOrder.value;
+    if (sf && so) {
+      const col = effectiveColumns.value.find((c) => c.key === sf || c.searchField === sf);
+      items.push({
+        key: '__sort__',
+        label: col?.label || sf,
+        text: so === 'asc' ? '升序' : '降序',
+        kind: 'sort',
+      });
+    }
+    return items;
   });
 
   const updateColumnOrder = (nextOrder: string[]) => {
@@ -363,7 +1014,7 @@
           const checkboxColIndex = props.showCheckboxColumn ? colOffset++ : -1;
           
           if (col === checkboxColIndex) {
-            const rowData = props.data[row];
+            const rowData = rowAt(row);
             if (rowData) {
               (rowData as any).checked = newValue || false;
               emit('checkbox-change', rowData, newValue || false, row);
@@ -374,40 +1025,7 @@
     };
     
     // 准备数据（顺序必须与 columns 的 data 索引一致）
-    const data = props.data.map((row, rowIndex) => {
-      const rowData: any[] = [];
-      
-      // 复选框列
-      if (props.showCheckboxColumn) {
-        rowData.push((row as any).checked || false);
-      }
-      
-      // 操作列（在前面）
-      if (props.showActionColumn && props.actionColumnPosition === 'start') {
-        rowData.push('');
-      }
-      
-      // 序号
-      const serialNo = (props.currentPage - 1) * props.pageSize + rowIndex + 1;
-      rowData.push(serialNo);
-      
-      // 数据列（beforeLast 时在倒数第二列后插入操作列）
-      const dataColCount = effectiveColumns.value.length;
-      effectiveColumns.value.forEach((col, index) => {
-        if (props.showActionColumn && props.actionColumnPosition === 'beforeLast' && index === dataColCount - 1) {
-          rowData.push('');
-        }
-        const value = cellDisplayValue(row, col.key);
-        rowData.push(value);
-      });
-      
-      // 操作列（在后面）
-      if (props.showActionColumn && props.actionColumnPosition === 'end') {
-        rowData.push('');
-      }
-      
-      return rowData;
-    });
+    const data = syncDisplayRows();
 
     try {
       // 未传 height 时使用容器实际高度，使列表高度与容器一致
@@ -638,184 +1256,18 @@
             return;
           }
           
-          // 数据列
+          // 数据列：混合表头（方案 E + P0.5/P1/P2）
           const dataColIndex = col - colOffset;
           if (dataColIndex < 0 || dataColIndex >= effectiveColumns.value.length) {
             return;
           }
-          
-          const colDef = effectiveColumns.value[dataColIndex];
-          const searchField = colDef.searchField || props.columnToSearchFieldMap[col];
-          const headerText = colDef.label;
 
-          if (!props.enableHeaderSearch) {
-            TH.innerHTML = '';
-            TH.classList.add('ht-header-simple');
-            TH.style.textAlign = 'left';
-            const span = document.createElement('span');
-            span.className = 'ht-header-simple-text';
-            span.textContent = headerText;
-            TH.appendChild(span);
+          const colDef = effectiveColumns.value[dataColIndex];
+          if (TH.querySelector('.ht-header-hybrid-wrap')) {
             return;
           }
-          
-          // 检查是否已经创建了搜索框
-          if (TH.querySelector('.header-search-input')) {
-            return;
-          }
-          
-          // 如果支持搜索，获取当前值；否则为空
-          const currentValue = searchField ? ((props.searchParams as any)[searchField] || '') : '';
-          const isMultiValue = searchField && (colDef.multiValue || props.multiValueFields.includes(searchField));
-          
-          // 如果列不支持搜索，仍然显示搜索框，但禁用输入
-          const isSearchable = colDef.searchable || !!searchField;
-          
-          // 设置表头样式
-          TH.style.padding = '4px 6px';
-          TH.style.position = 'relative';
-          TH.style.verticalAlign = 'middle';
-          
-          // 检查是否已经创建了搜索框，避免重复创建
-          if (TH.querySelector('.header-search-wrapper')) {
-            return;
-          }
-          
-          // 创建搜索框容器
-          const searchWrapper = document.createElement('div');
-          searchWrapper.className = 'header-search-wrapper';
-          searchWrapper.style.cssText = `
-            display: flex;
-            align-items: center;
-            width: 99%;
-            position: relative;
-            min-width: 0;
-          `;
-          
-          // 创建搜索输入框
-          const input = document.createElement('input');
-          input.type = 'text';
-          input.className = 'header-search-input';
-          input.placeholder = headerText;
-          input.value = currentValue as string;
-          input.disabled = !isSearchable;
-          
-          input.style.cssText = `
-            flex: 1;
-            min-width: 0;
-            height: 26px;
-            padding: 4px 8px;
-            border: 1px solid #d0d0d0;
-            border-radius: 4px;
-            font-size: 12px;
-            background-color: ${isSearchable ? '#fff' : '#f5f5f5'};
-            outline: none;
-            cursor: ${isSearchable ? 'text' : 'not-allowed'};
-            box-sizing: border-box;
-            line-height: 1.5;
-          `;
-          if (isSearchable && isMultiValue) {
-            input.title = '双击打开批量输入';
-          }
-          
-          // 搜索框事件处理（仅当支持搜索时）
-          if (isSearchable) {
-            input.addEventListener('keydown', (e: KeyboardEvent) => {
-              e.stopPropagation();
-              if (e.key === 'Enter' || e.keyCode === 13) {
-                e.preventDefault();
-                const value = (input.value || '').trim();
-                if (searchField) {
-                  (props.searchParams as any)[searchField] = value;
-                  emit('search');
-                }
-              }
-            });
-            
-            input.addEventListener('blur', (e: FocusEvent) => {
-              e.stopPropagation();
-              const value = (input.value || '').trim();
-              if (searchField) {
-                (props.searchParams as any)[searchField] = value;
-                if (value) {
-                  emit('search');
-                }
-              }
-            });
-            
-            // 粘贴事件处理，支持多数据粘贴（换行符、逗号、分号分隔）
-            input.addEventListener('paste', (e: ClipboardEvent) => {
-              e.stopPropagation();
-              const clipboardData = e.clipboardData;
-              if (clipboardData) {
-                const pastedText = clipboardData.getData('text');
-                if (pastedText) {
-                  // 处理多行数据：换行符、逗号、分号分隔
-                  let processedValue = pastedText.trim();
-                  
-                  // 如果是多行数据，转换为逗号分隔
-                  if (pastedText.includes('\n') || pastedText.includes('\r')) {
-                    processedValue = pastedText
-                      .split(/[\n\r]+/)
-                      .map(line => line.trim())
-                      .filter(line => line.length > 0)
-                      .join(',');
-                  } else if (pastedText.includes(';')) {
-                    // 分号分隔转换为逗号分隔
-                    processedValue = pastedText
-                      .split(';')
-                      .map(item => item.trim())
-                      .filter(item => item.length > 0)
-                      .join(',');
-                  }
-                  
-                  // 更新输入框值
-                  setTimeout(() => {
-                    input.value = processedValue;
-                    if (searchField) {
-                      (props.searchParams as any)[searchField] = processedValue;
-                    }
-                  }, 0);
-                }
-              }
-            });
-            
-            // 输入事件处理，确保数据实时保存并一直显示
-            input.addEventListener('input', (e: Event) => {
-              const value = (input.value || '').trim();
-              if (searchField) {
-                (props.searchParams as any)[searchField] = value;
-              }
-            });
-          }
-          
-          input.addEventListener('mousedown', (e: MouseEvent) => {
-            e.stopPropagation();
-          });
-          
-          // 多值字段支持：双击打开批量输入（仅当支持搜索时）
-          if (isSearchable && isMultiValue) {
-            input.addEventListener('dblclick', (e: MouseEvent) => {
-              e.preventDefault();
-              e.stopPropagation();
-              if (props.onOpenMultiValueModal) {
-                props.onOpenMultiValueModal(searchField, headerText);
-              }
-            });
-          }
-          
-          searchWrapper.appendChild(input);
-          
-          // 清空表头，添加搜索框
-          // Handsontable 会在后续渲染中自动添加筛选图标，我们在 afterRender 中处理
-          TH.innerHTML = '';
-          TH.appendChild(searchWrapper);
-          
-          // 确保表头可以显示筛选图标
-          TH.style.overflow = 'visible';
-          
-          // 标记这个表头已经添加了搜索框
-          TH.setAttribute('data-has-search', 'true');
+
+          buildHybridHeader(col, TH, colDef);
         },
         cells: function(row: number, col: number) {
           const cellProperties: any = {};
@@ -835,7 +1287,7 @@
             
             // 复选框列
             if (col === checkboxColIndex && row >= 0 && row < props.data.length) {
-              const rowData = props.data[row];
+              const rowData = rowAt(row);
               const checked = (rowData as any)?.checked || false;
               td.innerHTML = `<input type="checkbox" ${checked ? 'checked' : ''} data-row-index="${row}" style="cursor: pointer;">`;
               return;
@@ -846,7 +1298,7 @@
               td.classList.add('ht-action-cell');
               td.style.textAlign = 'center';
               td.style.overflow = 'visible';
-              const rowData = props.data[row];
+              const rowData = rowAt(row);
               if (props.actionRenderer) {
                 td.innerHTML = props.actionRenderer(rowData, row);
               } else {
@@ -873,7 +1325,7 @@
               td.classList.add('ht-action-cell');
               td.style.textAlign = 'center';
               td.style.overflow = 'visible';
-              const rowData = props.data[row];
+              const rowData = rowAt(row);
               if (props.actionRenderer) {
                 td.innerHTML = props.actionRenderer(rowData, row);
               } else {
@@ -888,7 +1340,7 @@
             const dataColIndex = col - colOffset;
             if (dataColIndex >= 0 && dataColIndex < effectiveColumns.value.length) {
               const colDef = effectiveColumns.value[dataColIndex];
-              const rowData = props.data[row];
+              const rowData = rowAt(row);
               
               // 自定义渲染器
               if (props.customCellRenderer) {
@@ -933,7 +1385,7 @@
 
           selectedRowIndicesSet.value = selectedRowIndices;
           selectedRows.value = Array.from(selectedRowIndices)
-            .map(index => props.data[index])
+            .map(index => rowAt(index))
             .filter(Boolean);
 
           emit('update:selectedRows', selectedRows.value);
@@ -967,7 +1419,7 @@
             if (target.type === 'checkbox') {
               const rowIndex = parseInt(target.getAttribute('data-row-index'));
               if (rowIndex >= 0 && rowIndex < props.data.length) {
-                const row = props.data[rowIndex];
+                const row = rowAt(rowIndex);
                 const checked = target.checked;
                 (row as any).checked = checked;
                 emit('checkbox-change', row, checked, rowIndex);
@@ -988,7 +1440,7 @@
             const rowIndex =
               rowIndexAttr != null && rowIndexAttr !== '' ? parseInt(rowIndexAttr, 10) : coords.row;
             if (rowIndex >= 0 && rowIndex < props.data.length) {
-              const row = props.data[rowIndex];
+              const row = rowAt(rowIndex);
               emit('action-click', row, rowIndex, action);
             }
           }
@@ -1006,7 +1458,7 @@
             const rowIndex =
               rowIndexAttr != null && rowIndexAttr !== '' ? parseInt(rowIndexAttr, 10) : coords.row;
             if (rowIndex >= 0 && rowIndex < props.data.length) {
-              const row = props.data[rowIndex];
+              const row = rowAt(rowIndex);
               emit('action-click', row, rowIndex, action);
             }
           }
@@ -1025,7 +1477,7 @@
             colIndex !== actionColEndIndex &&
             colIndex !== serialColIndex
           ) {
-            const row = props.data[rowIndex];
+            const row = rowAt(rowIndex);
             if (row) {
               emit('action-click', row, rowIndex);
             }
@@ -1060,7 +1512,7 @@
             }
             if (dataColIndex >= 0 && dataColIndex < effectiveColumns.value.length) {
               const colDef = effectiveColumns.value[dataColIndex];
-              const row = props.data[rowIndex];
+              const row = rowAt(rowIndex);
               if (colDef?.key && row) {
                 emit('cell-click', {
                   row,
@@ -1100,69 +1552,7 @@
             });
           };
           removeFilterIconFromColumns();
-          
-          // 更新已存在的搜索框的值
-          const headerRow = hotContainer.value?.querySelector('.ht_clone_top thead tr') as HTMLElement;
-          if (!headerRow) return;
-          
-          const headerCells = headerRow.querySelectorAll('th');
-          headerCells.forEach((th: HTMLElement, index: number) => {
-            let colOffset = 0;
-            const checkboxColIndex = props.showCheckboxColumn ? colOffset++ : -1;
-            const actionColStartIndex = props.showActionColumn && props.actionColumnPosition === 'start' ? colOffset++ : -1;
-            const serialColIndex = colOffset++;
-            const dataColCount = effectiveColumns.value.length;
-            const actionColEndIndex = props.showActionColumn
-              ? (props.actionColumnPosition === 'end' ? colOffset + dataColCount : props.actionColumnPosition === 'beforeLast' ? colOffset + dataColCount - 1 : -1)
-              : -1;
-            
-            // 跳过复选框列、操作列和序号列
-            if (index === checkboxColIndex || index === actionColStartIndex || index === serialColIndex || index === actionColEndIndex) {
-              return;
-            }
-            
-            // 数据列
-            const dataColIndex = index - colOffset;
-            if (dataColIndex < 0 || dataColIndex >= effectiveColumns.value.length) {
-              return;
-            }
-            
-            const colDef = effectiveColumns.value[dataColIndex];
-            const searchField = colDef.searchField || props.columnToSearchFieldMap[index];
-            const isSearchable = colDef.searchable || !!searchField;
-            const currentValue = searchField ? ((props.searchParams as any)[searchField] || '') : '';
-            const input = th.querySelector('.header-search-input') as HTMLInputElement;
-            
-            if (input) {
-              if (isSearchable && searchField) {
-                const isMultiValue = colDef.multiValue || props.multiValueFields.includes(searchField);
-                
-                // 更新搜索框的值
-                if (isMultiValue && currentValue) {
-                  const values = currentValue.split(',').map((v: string) => v.trim()).filter((v: string) => v.length > 0);
-                  if (values.length > 1) {
-                    const displayValue = values[0].length > 15 ? values[0].substring(0, 15) + '...' : values[0];
-                    input.value = `${displayValue} (+${values.length - 1})`;
-                    input.title = currentValue;
-                  } else if (values.length === 1) {
-                    input.value = values[0];
-                    input.title = '';
-                  } else {
-                    input.value = '';
-                    input.title = '';
-                  }
-                } else {
-                  input.value = currentValue as string;
-                  input.title = '';
-                }
-              } else {
-                // 不支持搜索的列，清空搜索框
-                input.value = '';
-                input.title = '';
-              }
-            }
-            
-          });
+          syncHybridHeaders();
         }
       };
       
@@ -1393,41 +1783,13 @@
       return;
     }
     if (!props.data.length) {
+      displayRowIndices.value = [];
       hotInstance.loadData([]);
       hotInstance.render();
       return;
     }
 
-    const data = props.data.map((row, rowIndex) => {
-      const rowData: any[] = [];
-
-      // 复选框列
-      if (props.showCheckboxColumn) {
-        rowData.push((row as any).checked || false);
-      }
-
-      // 操作列（在前面）
-      if (props.showActionColumn && props.actionColumnPosition === 'start') {
-        rowData.push('');
-      }
-
-      // 序号
-      const serialNo = (props.currentPage - 1) * props.pageSize + rowIndex + 1;
-      rowData.push(serialNo);
-
-      // 数据列
-      effectiveColumns.value.forEach((col) => {
-        const value = cellDisplayValue(row, col.key);
-        rowData.push(value);
-      });
-
-      // 操作列（在后面）
-      if (props.showActionColumn && props.actionColumnPosition === 'end') {
-        rowData.push('');
-      }
-
-      return rowData;
-    });
+    const data = syncDisplayRows();
     
     hotInstance.loadData(data);
     hotInstance.render();
@@ -1480,6 +1842,26 @@
     });
   };
 
+  // 监听搜索参数变化，同步混合表头展示
+  watch(
+    () => props.searchParams,
+    () => {
+      syncHybridHeaders();
+    },
+    { deep: true }
+  );
+
+  watch(
+    [() => props.sortField, () => props.sortOrder],
+    () => {
+      if (props.sortMode === 'remote' && hotInstance) {
+        hotInstance.loadData(syncDisplayRows());
+        hotInstance.render();
+      }
+      syncHybridHeaders();
+    }
+  );
+
   // 监听数据变化
   watch(() => props.data, () => {
     if (hotInstance) {
@@ -1668,6 +2050,13 @@
 
 <template>
   <div ref="containerRef" class="handsontable-pro-container">
+    <ActiveFilterBar
+      v-if="showActiveFilterBar"
+      :items="activeFilterItems"
+      @clear="onActiveFilterClear"
+      @clear-all="onActiveFilterClearAll"
+      @item-click="onActiveFilterItemClick"
+    />
     <div ref="hotContainer" class="handsontable-wrapper ht-theme-classic"></div>
     <div
       v-show="customScrollbar.visible"
@@ -1703,6 +2092,21 @@
         @mousedown.stop.prevent="onVerticalScrollbarThumbMouseDown"
       ></div>
     </div>
+    <HeaderFilterPopover
+      v-model:visible="filterPopover.visible"
+      :title="filterPopover.title"
+      :filter-type="filterPopover.filterType"
+      :model-value="filterPopover.modelValue"
+      :options="filterPopover.options"
+      :anchor-style="filterPopover.anchorStyle"
+      :sortable="filterPopover.sortable"
+      :sort-order="filterPopover.sortOrder"
+      :multi-value="filterPopover.multiValue"
+      :default-tab="filterPopover.defaultTab"
+      @apply="onFilterPopoverApply"
+      @reset="onFilterPopoverReset"
+      @sort="applyColumnSort"
+    />
   </div>
 </template>
 <style scoped lang="less">
@@ -1850,6 +2254,14 @@
             color: #1d2129;
             text-align: left !important;
 
+            // 混合搜索列表头：去掉格线，和表头融成一整块
+            &.ht-header-hybrid {
+              border-right: none !important;
+              border-bottom: none !important;
+              border-top: none !important;
+              border-left: none !important;
+            }
+
             // 操作列表头强制居中（覆盖全局 th left）
             &.ht-header-action {
               text-align: center !important;
@@ -1971,7 +2383,147 @@
           background: transparent;
         }
         
-        // 搜索框容器样式（搜索框与筛选图标占比 9.9:0.1）
+        // 混合表头：浅灰底托住液态胶囊
+        :deep(.ht-header-hybrid) {
+          padding: 4px 6px !important;
+          vertical-align: middle;
+          overflow: hidden;
+          box-sizing: border-box;
+          background: linear-gradient(180deg, #f7f8f9 0%, #f0f2f4 100%) !important;
+          border: none !important;
+        }
+
+        :deep(.ht_clone_top th.ht-header-hybrid),
+        :deep(.ht_master th.ht-header-hybrid),
+        :deep(.ht_clone_top_left_corner th.ht-header-hybrid) {
+          border: none !important;
+          border-right: none !important;
+          border-bottom: none !important;
+        }
+
+        :deep(.ht-header-hybrid-wrap) {
+          display: block;
+          width: 100%;
+          max-width: 100%;
+          min-width: 0;
+          box-sizing: border-box;
+        }
+
+        :deep(.ht-header-hybrid-row) {
+          display: flex;
+          align-items: center;
+          gap: 0;
+          min-height: 28px;
+          width: 100%;
+          max-width: 100%;
+          min-width: 0;
+          box-sizing: border-box;
+        }
+
+        :deep(.ht-header-hybrid-label) {
+          flex: 1 1 auto;
+          width: 100%;
+          min-width: 0;
+          font-size: 12px;
+          font-weight: 500;
+          color: #4e5969;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding: 0 2px;
+        }
+
+        :deep(.ht-header-hybrid-input),
+        :deep(.ht-header-hybrid-trigger) {
+          flex: 1 1 auto;
+          width: 100% !important;
+          min-width: 0 !important;
+          max-width: 100%;
+          height: 24px !important;
+          padding: 0 10px !important;
+          border-radius: 999px !important;
+          border-width: 1px !important;
+          border-style: solid !important;
+          border-color: rgba(255, 255, 255, 0.85) !important;
+          background: linear-gradient(
+            165deg,
+            rgba(255, 255, 255, 0.88) 0%,
+            rgba(255, 255, 255, 0.5) 55%,
+            rgba(245, 247, 248, 0.42) 100%
+          ) !important;
+          backdrop-filter: blur(12px) saturate(1.2);
+          -webkit-backdrop-filter: blur(12px) saturate(1.2);
+          box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.98),
+            inset 0 -1px 1px rgba(15, 23, 42, 0.03),
+            0 1px 2px rgba(15, 23, 42, 0.04),
+            0 2px 6px rgba(15, 23, 42, 0.03) !important;
+          font-size: 12px !important;
+          font-weight: 500 !important;
+          line-height: 22px !important;
+          color: #4e5969 !important;
+          outline: none !important;
+          box-sizing: border-box !important;
+          text-align: left;
+          caret-color: var(--app-primary-color, #007979);
+          -webkit-appearance: none !important;
+          appearance: none !important;
+        }
+
+        :deep(.ht-header-hybrid-input) {
+          &:hover {
+            background: linear-gradient(
+              165deg,
+              rgba(255, 255, 255, 0.94) 0%,
+              rgba(255, 255, 255, 0.62) 55%,
+              rgba(245, 247, 248, 0.5) 100%
+            ) !important;
+            box-shadow:
+              inset 0 1px 0 rgba(255, 255, 255, 1),
+              0 2px 8px rgba(15, 23, 42, 0.06) !important;
+          }
+
+          &:focus,
+          &:focus-visible {
+            color: #1d2129 !important;
+            border-color: rgba(0, 121, 121, 0.28) !important;
+            background: linear-gradient(
+              165deg,
+              rgba(255, 255, 255, 0.98) 0%,
+              rgba(255, 255, 255, 0.72) 55%,
+              rgba(240, 248, 248, 0.65) 100%
+            ) !important;
+            box-shadow:
+              inset 0 1px 0 rgba(255, 255, 255, 1),
+              inset 0 -1px 0 rgba(0, 121, 121, 0.06),
+              0 0 0 3px rgba(0, 121, 121, 0.12),
+              0 3px 10px rgba(15, 23, 42, 0.07) !important;
+          }
+
+          &::placeholder {
+            color: #86909c !important;
+            font-weight: 500;
+            opacity: 1;
+          }
+        }
+
+        :deep(.ht-header-hybrid-trigger) {
+          cursor: pointer;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #86909c !important;
+
+          &.has-value {
+            color: #4e5969 !important;
+          }
+
+          &:hover {
+            color: #4e5969 !important;
+          }
+        }
+
+        // 搜索框容器样式（legacy native filter 兼容）
         :deep(.ht_clone_top th .header-search-wrapper),
         :deep(.ht_master th .header-search-wrapper) {
           width: 99%;
@@ -2003,11 +2555,11 @@
           }
           
           .filter-ok-btn {
-            color: #1890ff;
-            border-color: #1890ff;
+            color: var(--app-primary-color, #007979);
+            border-color: var(--app-primary-color, #007979);
             
             &:hover {
-              background-color: #1890ff;
+              background-color: var(--app-primary-color, #007979);
               color: #fff;
             }
           }
diff --git a/src/components/HandsontablePro/types.ts b/src/components/HandsontablePro/types.ts
index 261281a..fd8fc95 100644
--- a/src/components/HandsontablePro/types.ts
+++ b/src/components/HandsontablePro/types.ts
@@ -1,10 +1,23 @@
+export type HeaderMode = 'inline' | 'icon' | 'none';
+export type FilterType = 'text' | 'enum' | 'number' | 'date';
+export type SortOrder = 'asc' | 'desc' | null;
+export type SortMode = 'local' | 'remote';
+
 export interface ColumnDef {
   key: string;
   label: string;
   width: number;
+  /** 混合表头：内嵌输入 / 仅图标 / 纯展示；未设时由 searchable + filterType 推导 */
+  headerMode?: HeaderMode;
   searchable?: boolean;
   searchField?: string;
   multiValue?: boolean;
+  filterable?: boolean;
+  filterType?: FilterType;
+  filterOptions?: Array<{ label: string; value: string | number | boolean }>;
+  sortable?: boolean;
+  /** 默认 true；false 表示仅本页过滤 */
+  serverFilter?: boolean;
   renderer?: (row: any, value: any) => string;
   className?: string;
   type?: string;
@@ -33,4 +46,19 @@ export interface HandsontableProProps {
   persistColumnOrderKey?: string;
   lockedColumnKeys?: string[];
   enableColumnOrderConfig?: boolean;
+  enableHeaderSearch?: boolean;
+  /** 未配置 headerMode 的列自动补齐混合表头；默认 true */
+  autoHybridHeader?: boolean;
+  /** 原生 Handsontable 下拉过滤（本页）；默认关闭，改用自研 Popover */
+  enableColumnFilter?: boolean;
+  /** 表头排序箭头 */
+  enableHeaderSort?: boolean;
+  /** 表头筛选 ▾（自研 Popover） */
+  enableHeaderFilter?: boolean;
+  /** 表格上方已筛选条件条 */
+  showActiveFilterBar?: boolean;
+  /** local=排当前页；remote=仅 emit sort-change */
+  sortMode?: SortMode;
+  sortField?: string | null;
+  sortOrder?: SortOrder;
 }
diff --git a/src/router/guard/userLoginInfo.ts b/src/router/guard/userLoginInfo.ts
index 6d588f2..47b3011 100644
--- a/src/router/guard/userLoginInfo.ts
+++ b/src/router/guard/userLoginInfo.ts
@@ -76,7 +76,7 @@ export default function setupUserLoginInfoGuard(router: Router) {
           typeof to.query.redirect === 'string' ? to.query.redirect : '';
         const target = resolveCustomerEntryPath(redirect || CUSTOMER_H5_HOME_PATH);
         next({
-          path: isLogin() ? target : '/h5/me',
+          path: isLogin() ? target : '/h5/login',
           query: !isLogin() && redirect ? { redirect: target } : {},
           replace: true,
         });
@@ -111,7 +111,7 @@ export default function setupUserLoginInfoGuard(router: Router) {
           console.error('客户门户 SSO 登录失败', error);
         }
         next({
-          path: preferH5Portal() ? '/h5/me' : '/',
+          path: preferH5Portal() ? '/h5/login' : '/',
           query: {},
           replace: true,
         });
@@ -148,11 +148,11 @@ export default function setupUserLoginInfoGuard(router: Router) {
       return;
     }
 
-    // H5 客户中心：未登录统一引导到「我的」（含微信注册/绑定），避免跳 PC 登录大页
+    // H5 客户中心：未登录统一引导到 /h5/login，避免「我的」再套一套登录页
     if (!isLogin() && String(to.path || '').startsWith('/h5')) {
       NProgress.done();
       next({
-        path: '/h5/me',
+        path: '/h5/login',
         query: { redirect: to.fullPath },
         replace: true,
       });
diff --git a/src/router/index.ts b/src/router/index.ts
index 4bb6962..0d22b11 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,7 +64,7 @@ const router = createRouter({
             const token =
               localStorage.getItem('rbac_access_token') ||
               localStorage.getItem('token');
-            return token ? '/h5/orders' : '/h5/me';
+            return token ? '/h5/orders' : '/h5/login';
           },
         },
         {
@@ -111,7 +111,7 @@ const router = createRouter({
           name: 'H5Me',
           component: () => import('@/views/h5/customer-center/me/index.vue'),
           meta: {
-            requiresAuth: false,
+            requiresAuth: true,
             locale: 'h5.tab.me',
             h5HideHeader: true,
           },
@@ -190,7 +190,7 @@ const router = createRouter({
             const token =
               localStorage.getItem('rbac_access_token') ||
               localStorage.getItem('token');
-            return token ? '/h5/orders' : '/h5/me';
+            return token ? '/h5/orders' : '/h5/login';
           },
         },
       ],
diff --git a/src/utils/login-portal.ts b/src/utils/login-portal.ts
index 57a64ae..da8d1da 100644
--- a/src/utils/login-portal.ts
+++ b/src/utils/login-portal.ts
@@ -206,11 +206,11 @@ export function resolvePostLogoutLogin(options?: {
     routeName = resolveLoginRouteNameFromPath(path)
   }
 
-  // 手机/微信客户：回 H5「我的」登录引导，不进 PC 登录大页
+  // 手机/微信客户：回 H5 登录页，不进 PC 登录大页
   if (routeName === CUSTOMER_LOGIN_ROUTE_NAME && preferH5Portal()) {
     return {
       name: CUSTOMER_LOGIN_ROUTE_NAME,
-      path: '/h5/me',
+      path: '/h5/login',
       query: path.startsWith('/h5')
         ? { redirect: path }
         : { redirect: resolveCustomerEntryPath(path) },
diff --git a/src/views/api/requestLog/index.vue b/src/views/api/requestLog/index.vue
index 736e360..63db390 100644
--- a/src/views/api/requestLog/index.vue
+++ b/src/views/api/requestLog/index.vue
@@ -1,60 +1,263 @@
 <script lang="ts" setup>
-  import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick, unref } from 'vue';
+  import { ref, reactive, computed, onMounted, nextTick } from 'vue';
   import { useI18n } from 'vue-i18n';
   import xmlFormat from 'xml-formatter';
-  import dayjs from 'dayjs';
   import { $baseMessage } from '@/utils';
   import useModal from '@/components/ModalPro/useModal';
-  import { useContentHeight } from '@/composables';
   import { getLogGetById, getLogGetList } from '@/api/ApplicationServices/log';
-  import { IconEye, IconCopy } from '@arco-design/web-vue/es/icon';
+  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';
 
   const { t } = useI18n();
 
   defineOptions({
     name: 'RequestLog',
   });
-  const tableRef = ref();
-  const tableHeight = ref(200);
-  const { contentHeight } = useContentHeight(tableRef, true, 12);
-  const tableBodyRef = ref<HTMLElement>();
-  const tableHeaderRef = ref<HTMLElement>();
 
-  // 自定义列表与分页状态
+  const { tableContainerRef, tableHeight } = useTableContainerHeight();
+  const handsontableHeight = computed(() => Math.max(tableHeight.value || 0, 400));
+
   const tableData = ref<any[]>([]);
   const totalCount = ref(0);
   const currentPage = ref(1);
   const pageSize = ref(50);
+  const listLoading = ref(false);
 
-  // 表头搜索参数
+  /** 表头搜索（与 HandsontablePro 双向绑定） */
   const searchParams = reactive({
     requestId: '',
     requestTime: '',
-    type: undefined as number | undefined,
+    requestTimeStart: '',
+    requestTimeEnd: '',
+    type: '',
     name: '',
     interfaceName: '',
     interfaceCode: '',
     clientIP: '',
     address: '',
     cost: '',
-    isSuccess: undefined as boolean | undefined,
+    isSuccess: '',
   });
 
-  // 加载数据（与分页联动）
+  const columns = computed<ColumnDef[]>(() => [
+    {
+      key: 'requestId',
+      label: t('system.log.table.requestId'),
+      width: 280,
+      searchable: true,
+      searchField: 'requestId',
+      headerMode: 'inline',
+      serverFilter: true,
+    },
+    {
+      key: 'requestTime',
+      label: t('system.log.table.requestTime'),
+      width: 200,
+      searchable: true,
+      searchField: 'requestTime',
+      headerMode: 'icon',
+      filterType: 'date',
+      filterable: true,
+      sortable: true,
+      serverFilter: true,
+    },
+    {
+      key: 'isAppLabel',
+      label: t('system.log.table.appOrProvider'),
+      width: 120,
+      searchable: true,
+      searchField: 'type',
+      headerMode: 'icon',
+      filterType: 'enum',
+      filterable: true,
+      serverFilter: true,
+      filterOptions: [
+        { label: t('system.log.options.app'), value: '1' },
+        { label: t('system.log.options.provider'), value: '2' },
+      ],
+    },
+    {
+      key: 'name',
+      label: t('system.log.table.name'),
+      width: 140,
+      searchable: true,
+      searchField: 'name',
+      headerMode: 'inline',
+      serverFilter: true,
+    },
+    {
+      key: 'interfaceName',
+      label: t('system.log.table.interfaceName'),
+      width: 160,
+      searchable: true,
+      searchField: 'interfaceName',
+      headerMode: 'inline',
+      serverFilter: true,
+    },
+    {
+      key: 'interfaceCode',
+      label: t('system.log.table.interfaceCode'),
+      width: 140,
+      searchable: true,
+      searchField: 'interfaceCode',
+      headerMode: 'inline',
+      serverFilter: false,
+    },
+    {
+      key: 'cost',
+      label: t('system.log.table.cost'),
+      width: 110,
+      searchable: true,
+      searchField: 'cost',
+      headerMode: 'icon',
+      filterType: 'number',
+      filterable: true,
+      sortable: true,
+      serverFilter: true,
+    },
+    {
+      key: 'isSuccessLabel',
+      label: t('system.log.table.isSuccess'),
+      width: 110,
+      searchable: true,
+      searchField: 'isSuccess',
+      headerMode: 'icon',
+      filterType: 'enum',
+      filterable: true,
+      serverFilter: true,
+      filterOptions: [
+        { label: 'true', value: 'true' },
+        { label: 'false', value: 'false' },
+      ],
+      renderer: (row: any) => {
+        const ok = !!row.isSuccess;
+        const color = ok ? '#00b42a' : '#f53f3f';
+        return `<span style="color:${color};font-weight:500;">${ok ? 'true' : 'false'}</span>`;
+      },
+    },
+    {
+      key: 'clientIP',
+      label: t('system.log.table.clientIP'),
+      width: 140,
+      searchable: true,
+      searchField: 'clientIP',
+      headerMode: 'inline',
+      serverFilter: false,
+    },
+    {
+      key: 'address',
+      label: t('system.log.table.address'),
+      width: 360,
+      searchable: true,
+      searchField: 'address',
+      headerMode: 'inline',
+      serverFilter: false,
+    },
+  ]);
+
+  function actionRenderer(_row: any, rowIndex: number) {
+    const title = t('system.log.modal.viewDetail');
+    return `
+      <div class="action-buttons" style="display:flex;align-items:center;justify-content:center;">
+        <span data-action="view" data-row-index="${rowIndex}" title="${title}"
+          style="cursor:pointer;color:#8c8c8c;padding:4px;border-radius:4px;display:inline-flex;align-items:center;">
+          <svg width="16" height="16" viewBox="0 0 48 48" fill="none">
+            <path d="M24 14C14 14 6.5 22 6.5 24s7.5 10 17.5 10 17.5-8 17.5-10S34 14 24 14z" stroke="currentColor" stroke-width="3"/>
+            <circle cx="24" cy="24" r="6" stroke="currentColor" stroke-width="3"/>
+          </svg>
+        </span>
+      </div>
+    `;
+  }
+
+  const processedTableData = computed(() =>
+    tableData.value.map((row) => ({
+      ...row,
+      isAppLabel: row.isApp ? t('system.log.options.app') : t('system.log.options.provider'),
+      isSuccessLabel: row.isSuccess ? 'true' : 'false',
+      cost: row.cost ?? row.cost === 0 ? row.cost : '',
+      address: row.address || '',
+      clientIP: row.clientIP || '',
+      requestId: row.requestId || '',
+      requestTime: row.requestTime || '',
+      name: row.name || '',
+      interfaceName: row.interfaceName || '',
+      interfaceCode: row.interfaceCode || '',
+    }))
+  );
+
+  function buildListParams() {
+    const requestId = toServerSearchValue(searchParams.requestId || '');
+    const name = toServerSearchValue(searchParams.name || '');
+    const interfaceName = toServerSearchValue(searchParams.interfaceName || '');
+
+    const typeRaw = String(searchParams.type || '').trim();
+    const typeNum = typeRaw === '1' || typeRaw === '2' ? Number(typeRaw) : undefined;
+
+    const successRaw = String(searchParams.isSuccess || '').trim();
+    let isSuccess: boolean | undefined;
+    if (successRaw === 'true') isSuccess = true;
+    else if (successRaw === 'false') isSuccess = false;
+
+    const costParsed = parseFilterValue(String(searchParams.cost || ''));
+    let costStart: number | undefined;
+    let costEnd: number | undefined;
+    if (costParsed.value !== '' && !Number.isNaN(Number(costParsed.value))) {
+      const n = Number(costParsed.value);
+      if (costParsed.op === 'equals' || costParsed.op === 'contains') {
+        costStart = n;
+        costEnd = n;
+      } else if (costParsed.op === 'gte' || costParsed.op === 'gt') {
+        costStart = n;
+      } else if (costParsed.op === 'lte' || costParsed.op === 'lt') {
+        costEnd = n;
+      }
+    }
+
+    const start =
+      (searchParams.requestTimeStart || '').trim() ||
+      (searchParams.requestTime || '').split(',')[0]?.trim() ||
+      '';
+    const end =
+      (searchParams.requestTimeEnd || '').trim() ||
+      (searchParams.requestTime || '').split(',')[1]?.trim() ||
+      '';
+
+    return {
+      RequestId: requestId || undefined,
+      Name: name || undefined,
+      InterfaceName: interfaceName || undefined,
+      Type: typeNum as API.LogListInputTypeEnum | undefined,
+      IsSuccess: isSuccess,
+      RequestStartTime: start || undefined,
+      RequestEndTime: end || undefined,
+      CostStart: costStart,
+      CostEnd: costEnd,
+      PageIndex: currentPage.value,
+      PageSize: pageSize.value,
+    };
+  }
+
   async function loadTableData() {
     try {
-      const params: any = {
-        ...searchParams,
-        pageIndex: currentPage.value,
-        pageSize: pageSize.value,
-      };
-      const res: any = await getLogGetList(params);
-      tableData.value = res?.items || res?.list || res || [];
-      totalCount.value = Number(res?.totalCount ?? res?.pagination?.total ?? res?.length ?? 0);
+      listLoading.value = true;
+      const res: any = await getLogGetList(buildListParams());
+      const data = res?.data || res;
+      tableData.value = data?.items || data?.list || (Array.isArray(data) ? data : []) || [];
+      totalCount.value = Number(
+        data?.totalCount ?? data?.pagination?.total ?? tableData.value.length ?? 0
+      );
     } catch (e) {
       $baseMessage(t('system.log.message.loadFailed'), 'error');
+      tableData.value = [];
+      totalCount.value = 0;
+    } finally {
+      listLoading.value = false;
     }
   }
 
@@ -63,10 +266,6 @@
     loadTableData();
   }
 
-  function handleHeaderBlur() {
-    handleHeaderSearch();
-  }
-
   function handlePageChange(page: number) {
     currentPage.value = page;
     loadTableData();
@@ -78,151 +277,49 @@
     loadTableData();
   }
 
-  const tableProps = computed(() => {
-    return {
-      showPager: true,
-      immediate: false,
-      tableConfig: {
-        columns: [
-          {
-            field: 'requestId',
-            sortable: true,
-            title: t('system.log.table.requestId'),
-          },
-          {
-            field: 'requestTime',
-            sortable: true,
-            title: t('system.log.table.requestTime'),
-          },
-          {
-            field: 'isApp',
-            sortable: true,
-            title: t('system.log.table.appOrProvider'),
-            slots: {
-              default: 'isApp_default',
-            },
-          },
-          { field: 'name', sortable: true, title: t('system.log.table.name') },
-          { field: 'interfaceName', sortable: true, title: t('system.log.table.interfaceName') },
-          { field: 'interfaceCode', sortable: true, title: t('system.log.table.interfaceCode') },
-          {
-            field: 'clientIP',
-            sortable: true,
-            title: t('system.log.table.clientIP'),
-          },
-          { field: 'address', sortable: true, title: t('system.log.table.address') },
-
-          {
-            field: 'cost',
-            sortable: true,
-            title: t('system.log.table.cost'),
-          },
-
-          {
-            field: 'isSuccess',
-            sortable: true,
-            title: t('system.log.table.isSuccess'),
-            slots: {
-              default: 'isSuccess_edit',
-            },
-          },
-          {
-            title: t('system.log.table.actions'),
-            slots: {
-              default: 'action',
-            },
-            width: 120,
-            fixed: 'right',
-          },
-        ],
-        height: tableHeight.value,
-      },
-      autoHeight: false,
-      formLayout: 'vertical',
-      api: getLogGetList,
-      useForm: false,
-      tableClassName: 'pt-16px',
-    };
-  });
+  function handleActionClick(row: any) {
+    changeRow(row);
+  }
 
   const [register, { openModal }] = useModal() as any;
 
-  // 查看响应结果
   const dialogVisible = ref(false);
-
   const response = ref('');
   const response2 = ref('');
   const headers = ref('');
   const content = ref('');
-  const responseType = ref('');
-  const responseType2 = ref('');
-  const headersType = ref('');
-  const contentType = ref('');
-  const exception = ref('');
   const exceptionType = ref('');
-
-
-  watch(
-    contentHeight,
-    (value) => {
-      tableHeight.value = value;
-
-      unref(tableRef)?.setHeight(value);
-    },
-    { deep: true }
-  );
-
-
+  const activeName = ref('first');
 
   async function changeRow(row: any) {
     try {
-      // 先清空数据
       response.value = '';
       response2.value = '';
       headers.value = '';
       content.value = '';
-      exception.value = '';
-      responseType.value = '';
-      responseType2.value = '';
-      headersType.value = '';
-      contentType.value = '';
       exceptionType.value = '';
-      
-      // 打开弹窗
+
       openModal();
       dialogVisible.value = true;
-      
-      // 等待DOM更新
       await nextTick();
 
-      // 获取数据
       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 || '');
-      exception.value = String(data.exception || '');
-      responseType.value = data.response!;
-      responseType2.value = data.response2!;
-      headersType.value = data.headers;
-      contentType.value = data.content;
       exceptionType.value = String(data.exception || '');
-      
     } catch (error) {
       $baseMessage(t('system.log.message.loadDetailFailed'), 'error');
     }
   }
-  const activeName = ref('first');
 
-  // 处理tab切换
-  const handleTabChange = (key: string) => {
+  function handleTabChange(key: string) {
     activeName.value = key;
-  };
+  }
 
-  // 复制当前激活tab的内容到剪贴板
-  const copyCurrentTabContent = async () => {
+  async function copyCurrentTabContent() {
     try {
       let contentToCopy = '';
       switch (activeName.value) {
@@ -244,7 +341,7 @@
         default:
           contentToCopy = '';
       }
-      
+
       if (contentToCopy) {
         await navigator.clipboard.writeText(contentToCopy);
         $baseMessage(t('system.log.message.copySuccess'), 'success');
@@ -254,47 +351,26 @@
     } catch (error) {
       $baseMessage(t('system.log.message.copyFailed'), 'error');
     }
-  };
-
-  // 搜索表单数据
-  const searchForm = reactive({
-    requestId: '',
-    Type: undefined,
-    name: '',
-    InterfaceName: '',
-    RequestTime: [],
-    IsSuccess: undefined,
-    Response: '',
-    CostStart: '',
-    CostEnd: '',
-    Content: ''
-  });
-
-  const namePlaceholder = computed(() => {
-    if (searchForm.Type === 0) return t('system.log.placeholder.appName');
-    if (searchForm.Type === 1) return t('system.log.placeholder.providerName');
-    return t('system.log.placeholder.appOrProviderName');
-  });
+  }
 
   function isJSON(str: string) {
     if (!str || typeof str !== 'string') return false;
     try {
       JSON.parse(str);
       return true;
-    } catch (error) {
+    } catch {
       return false;
     }
   }
-  
+
   function isXML(str: string) {
     if (!str || typeof str !== 'string') return false;
     return str.trim().startsWith('<?xml') || str.trim().startsWith('<');
   }
-  
+
   function formatContent(str: string): string {
     if (!str) return '';
     const strValue = String(str);
-    
     if (isJSON(strValue)) {
       try {
         return JSON.stringify(JSON.parse(strValue), null, 2);
@@ -302,7 +378,6 @@
         return strValue;
       }
     }
-    
     if (isXML(strValue)) {
       try {
         return xmlFormat(strValue);
@@ -310,203 +385,66 @@
         return strValue;
       }
     }
-    
     return strValue;
   }
-  
+
   function getContentLanguage(str: string): string {
     if (!str || typeof str !== 'string') return 'text';
-    const strValue = String(str);
-    
-    if (isJSON(strValue)) return 'json';
-    if (isXML(strValue)) return 'xml';
+    if (isJSON(str)) return 'json';
+    if (isXML(str)) return 'xml';
     return 'text';
   }
-  
-  function analysis(str: string) {
-    const type = str?.slice(0, 2);
-    if (type?.includes('<?')) return xmlFormat(str);
 
-    if (isJSON(str)) return JSON.parse(str);
-
-    return str;
-  }
-
-
-  function submit() {
-    unref(tableRef).reload(searchForm);
-  }
-
-  function resetSearch() {
-    // 重置搜索表单
-    Object.assign(searchForm, {
-      requestId: '',
-      Type: undefined,
-      name: '',
-      InterfaceName: '',
-      RequestTime: [
-        dayjs(
-          new Date(
-            new Date().getFullYear(),
-            new Date().getMonth(),
-            new Date().getDate(),
-            0,
-            0,
-            0
-          )
-        ).format('YYYY-MM-DD HH:mm:ss'),
-        dayjs(
-          new Date(
-            new Date().getFullYear(),
-            new Date().getMonth(),
-            new Date().getDate(),
-            23,
-            59,
-            59
-          )
-        ).format('YYYY-MM-DD HH:mm:ss'),
-      ],
-      IsSuccess: undefined,
-      Response: '',
-      CostStart: '',
-      CostEnd: '',
-      Content: ''
-    });
-    
-    // 重新加载表格
-    unref(tableRef).reload(searchForm);
-  }
-
-  // 同步表头和内容的横向滚动
-  function handleTableBodyScroll(event: Event) {
-    const target = event.target as HTMLElement;
-    if (tableHeaderRef.value) {
-      tableHeaderRef.value.scrollLeft = target.scrollLeft;
-    }
-  }
-
-  onMounted(async () => {
-    await loadTableData();
-    // 监听表格内容区域的横向滚动
-    if (tableBodyRef.value) {
-      tableBodyRef.value.addEventListener('scroll', handleTableBodyScroll);
-    }
-  });
-
-  onUnmounted(() => {
-    if (tableBodyRef.value) {
-      tableBodyRef.value.removeEventListener('scroll', handleTableBodyScroll);
-    }
+  onMounted(() => {
+    loadTableData();
   });
 </script>
 
 <template>
   <div class="request-log-container">
     <div class="content-card">
-    <!-- 工具栏与分页 -->
-    <div class="table-toolbar">
-      <div class="toolbar-left">
-        <div class="custom-buttons">
-          <!-- 预留按钮位，如需后续新增操作按钮可放置于此 -->
+      <div class="table-toolbar">
+        <div class="toolbar-left">
+          <div class="custom-buttons"></div>
+        </div>
+        <div class="toolbar-right">
+          <div class="pagination-controls">
+            <PaginationPro
+              :total-count="totalCount"
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              @page-change="handlePageChange"
+              @page-size-change="handlePageSizeChange"
+            />
+          </div>
         </div>
       </div>
-      <div class="toolbar-right">
-        <div class="pagination-controls">
-          <PaginationPro
-            :total-count="totalCount"
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            @page-change="handlePageChange"
-            @page-size-change="handlePageSizeChange"
+
+      <a-spin class="list-spin" :loading="listLoading">
+        <div ref="tableContainerRef" class="list-wrap">
+          <HandsontablePro
+            :columns="columns"
+            :data="processedTableData"
+            :total="Number(totalCount) || 0"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :search-params="searchParams"
+            :height="handsontableHeight"
+            :show-action-column="true"
+            action-column-position="start"
+            :action-column-width="52"
+            :action-column-header="t('system.log.table.actions')"
+            :serial-no-header="t('system.log.table.index')"
+            :action-renderer="actionRenderer"
+            :read-only="true"
+            :stretch-columns="true"
+            @search="handleHeaderSearch"
+            @action-click="handleActionClick"
           />
         </div>
-      </div>
+      </a-spin>
     </div>
 
-    <!-- 自定义表格：表头支持输入回车搜索 -->
-    <div class="custom-table-container">
-      <div class="custom-table-header" ref="tableHeaderRef">
-        <div class="header-row">
-          <div class="header-cell action-cell">{{ $t('system.log.table.actions') }}</div>
-          <div class="header-cell index-cell">{{ $t('system.log.table.index') }}</div>
-          <div class="header-cell">
-            <a-input v-model="searchParams.requestId" :placeholder="$t('system.log.placeholder.requestId')" @keyup.enter="handleHeaderSearch" @blur="handleHeaderBlur" />
-          </div>
-          <div class="header-cell">
-            <a-input v-model="searchParams.requestTime" :placeholder="$t('system.log.placeholder.requestTime')" @keyup.enter="handleHeaderSearch" @blur="handleHeaderBlur" />
-          </div>
-          <div class="header-cell">
-            <a-select 
-              v-model="searchParams.type" 
-              :placeholder="$t('system.log.placeholder.appOrProvider')" 
-              allow-clear
-              @change="handleHeaderSearch"
-            >
-              <a-option :value="0">{{ $t('system.log.options.app') }}</a-option>
-              <a-option :value="1">{{ $t('system.log.options.provider') }}</a-option>
-            </a-select>
-          </div>
-          <div class="header-cell">
-            <a-input v-model="searchParams.name" :placeholder="$t('system.log.placeholder.name')" @keyup.enter="handleHeaderSearch" @blur="handleHeaderBlur" />
-          </div>
-          <div class="header-cell">
-            <a-input v-model="searchParams.interfaceName" :placeholder="$t('system.log.placeholder.interfaceName')" @keyup.enter="handleHeaderSearch" @blur="handleHeaderBlur" />
-          </div>
-          <div class="header-cell">
-            <a-input v-model="searchParams.cost" :placeholder="$t('system.log.placeholder.cost')" @keyup.enter="handleHeaderSearch" @blur="handleHeaderBlur" />
-          </div>
-          <div class="header-cell">
-            <a-select 
-              v-model="searchParams.isSuccess" 
-              :placeholder="$t('system.log.placeholder.isSuccess')" 
-              allow-clear
-              @change="handleHeaderSearch"
-            >
-              <a-option :value="true">true</a-option>
-              <a-option :value="false">false</a-option>
-            </a-select>
-          </div>
-          <div class="header-cell">
-            <a-input v-model="searchParams.clientIP" :placeholder="$t('system.log.placeholder.clientIP')" @keyup.enter="handleHeaderSearch" @blur="handleHeaderBlur" />
-          </div>
-          <div class="header-cell">
-            <a-input v-model="searchParams.address" :placeholder="$t('system.log.placeholder.address')" @keyup.enter="handleHeaderSearch" @blur="handleHeaderBlur" />
-          </div>
-        </div>
-      </div>
-
-      <div class="custom-table-body" ref="tableBodyRef">
-        <div
-          v-for="(row, index) in tableData"
-          :key="row.id || index"
-          class="table-row"
-        >
-          <div class="table-cell action-cell">
-            <div class="action-buttons">
-              <a-button type="text" size="small" class="detail-btn" @click="changeRow(row)"><IconEye /></a-button>
-            </div>
-          </div>
-          <div class="table-cell index-cell">{{ (currentPage - 1) * pageSize + index + 1 }}</div>
-          <div class="table-cell">{{ row.requestId || '--' }}</div>
-          <div class="table-cell request-time-cell">{{ row.requestTime || '--' }}</div>
-          <div class="table-cell">{{ row.isApp ? $t('system.log.options.app') : $t('system.log.options.provider') }}</div>
-          <div class="table-cell">{{ row.name || '--' }}</div>
-          <div class="table-cell">{{ row.interfaceName || '--' }}</div>
-          <div class="table-cell">{{ row.cost ?? row.cost === 0 ? row.cost : '--' }}</div>
-          <div class="table-cell">
-            <a-tag v-if="row.isSuccess" color="green">true</a-tag>
-            <a-tag v-else color="red">false</a-tag>
-          </div>
-          <div class="table-cell">{{ row.clientIP || '--' }}</div>
-          <div class="table-cell address-cell">
-            <a-tooltip :content="row.address || '--'">
-              <span class="ellipsis-text">{{ row.address || '--' }}</span>
-            </a-tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-    </div>
     <ModalPro
       :title="$t('system.log.modal.viewDetail')"
       width="40%"
@@ -613,12 +551,12 @@
           </a-tab-pane>
         </a-tabs>
         <div class="tabs-actions">
-          <a-button 
-            type="text" 
-            size="small" 
+          <a-button
+            type="text"
+            size="small"
             class="copy-btn"
-            @click="copyCurrentTabContent"
             :title="$t('system.log.actions.copyCurrentTab')"
+            @click="copyCurrentTabContent"
           >
             <icon-copy />
             {{ $t('system.log.actions.copy') }}
@@ -633,18 +571,81 @@
   .request-log-container {
     padding: 16px;
     background-color: #f0f3f4;
-    min-height: 100%;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    width: 100%;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
   }
 
   .content-card {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     background: #fff;
     border-radius: 8px;
     padding: 16px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-sizing: border-box;
+  }
+
+  .table-toolbar {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+
+    .toolbar-left {
+      flex: 1;
+
+      .custom-buttons {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+    }
+
+    .toolbar-right {
+      .pagination-controls {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .list-spin {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    :deep(.arco-spin-children) {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .list-wrap {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
   }
 
+  .list-wrap :deep(.handsontable-pro-container) {
+    flex: 1;
+    min-height: 0;
+  }
+
   .json-content {
     height: 400px;
     border: 1px solid #e5e6eb;
@@ -663,7 +664,7 @@
     right: 0;
     z-index: 10;
     padding: 8px 12px;
-    
+
     .copy-btn {
       color: var(--app-primary-color);
       font-size: 12px;
@@ -672,224 +673,11 @@
       display: flex;
       align-items: center;
       gap: 4px;
-      
+
       &:hover {
         background-color: rgba(45, 140, 140, 0.1);
         color: var(--app-primary-color);
       }
     }
   }
-
-  .table-toolbar {
-    margin-bottom: 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    
-    .toolbar-left {
-      flex: 1;
-      
-      .custom-buttons {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-      }
-    }
-
-    .toolbar-right {
-      .pagination-controls {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  .content-card :deep(.arco-input:focus-within),
-  .content-card :deep(.arco-input-number:focus-within),
-  .content-card :deep(.arco-select-view-open) {
-    border-color: var(--app-primary-color);
-    box-shadow: 0 0 0 1px var(--app-primary-color);
-  }
-
-  .custom-table-container {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 86px - 120px); /* 减去导航栏、工具栏和分页的高度 */
-    max-height: calc(100vh - 86px - 120px);
-    border: 1px solid #e5e6eb;
-    border-radius: 8px;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .custom-table-header {
-    background: #f7f8fa;
-    border-bottom: 1px solid #e5e6eb;
-    flex-shrink: 0;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    
-    .header-row {
-      display: flex;
-      align-items: center;
-      min-height: 20px;
-      min-width: max-content;
-    }
-    
-    .header-cell {
-      padding: 4px 8px;
-      border-right: 1px solid #e5e6eb;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      
-      &:last-child {
-        border-right: none;
-      }
-      
-      &.index-cell {
-        flex: 0 0 40px;
-        justify-content: center;
-        color: #999999;
-        font-size: 12px;
-        font-weight: 500;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      
-      &.action-cell {
-        flex: 0 0 120px;
-        color: #999999;
-        font-size: 12px;
-        font-weight: 500;
-        justify-content: flex-end;
-        /* 固定在右侧，随横向滚动可见 */
-        position: sticky;
-        right: 0;
-        background: #f7f8fa;
-        z-index: 10;
-        border-left: 2px solid #e5e6eb;
-      }
-      
-      // 宽度分配（首列为操作，第二列为序号，第三列开始为数据列）
-      &:nth-child(1) { flex: 0 0 52px; } // 操作稍加宽，避免两行
-      &:nth-child(2) { flex: 0 0 40px; } // 序号
-      &:nth-child(3) { flex: 0 0 280px; } // 请求ID (加倍)
-      &:nth-child(4) { flex: 0 0 240px; } // 请求时间（调大一半）
-      &:nth-child(5) { flex: 0 0 110px; } // 应用/服务商
-      &:nth-child(6) { flex: 0 0 140px; } // 名称
-      &:nth-child(7) { flex: 0 0 160px; } // 接口名称
-      &:nth-child(8) { flex: 0 0 100px; } // 响应耗时（移动到接口名称后）
-      &:nth-child(9) { flex: 0 0 100px; } // 是否成功（移动到接口名称后）
-      &:nth-child(10) { flex: 0 0 140px; } // 请求IP
-      &:nth-child(11) { flex: 0 0 660px; } // 请求地址 (加倍再增加一半)
-    }
-  }
-
-  .custom-table-body {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: auto;
-    min-height: 0;
-    
-    .table-row {
-      display: flex;
-      align-items: center;
-      min-height: 20px;
-      border-bottom: 1px solid #e5e6eb;
-      min-width: max-content;
-      transition: all 0.3s ease;
-      
-      &:hover {
-        background: #f7f8fa;
-      }
-      
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-    
-    .table-cell {
-      padding: 4px 8px;
-      border-right: 1px solid #e5e6eb;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      color: #1d2129;
-      word-break: break-all;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      
-      &:last-child {
-        border-right: none;
-      }
-      
-      &.index-cell {
-        flex: 0 0 40px;
-        justify-content: center;
-        color: #4e5969;
-        font-size: 12px;
-        font-weight: 500;
-      }
-      
-      &.action-cell {
-        flex: 0 0 120px;
-        justify-content: flex-end; /* 操作列靠右 */
-        position: sticky; /* 固定 */
-        right: 0;
-        background: #fff;
-        z-index: 10;
-        border-left: 2px solid #e5e6eb;
-        
-        .action-buttons {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end; /* 内部也靠右 */
-          gap: 4px;
-          
-          .detail-btn {
-            color: #8c8c8c;
-            font-size: 10px;
-            padding: 1px 3px;
-            min-width: auto;
-            
-            &:hover { color: var(--app-primary-color); }
-          }
-        }
-      }
-
-      /* 请求地址列：左对齐 + 文本省略 + 悬浮气泡 */
-      &.address-cell {
-        justify-content: flex-start;
-      }
-
-      .ellipsis-text {
-        max-width: 100%;
-        display: inline-block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      
-      // 宽度分配与表头一致
-      &:nth-child(1) { flex: 0 0 52px; } /* 操作稍加宽，避免两行 */
-      &:nth-child(2) { flex: 0 0 40px; } /* 序号 */
-      &:nth-child(3) { flex: 0 0 280px; } /* 请求ID加倍 */
-      &:nth-child(4) { flex: 0 0 240px; } /* 请求时间（调大一半） */
-      &:nth-child(5) { flex: 0 0 110px; } /* 应用/服务商 */
-      &:nth-child(6) { flex: 0 0 140px; } /* 名称 */
-      &:nth-child(7) { flex: 0 0 160px; } /* 接口名称 */
-      &:nth-child(8) { flex: 0 0 100px; } /* 响应耗时 */
-      &:nth-child(9) { flex: 0 0 100px; } /* 是否成功 */
-      &:nth-child(10) { flex: 0 0 140px; } /* 请求IP */
-      &:nth-child(11) { flex: 0 0 660px; } /* 请求地址加倍再增加一半 */
-    }
-  }
 </style>
diff --git a/src/views/channel/components/ChannelConfigHotTable.vue b/src/views/channel/components/ChannelConfigHotTable.vue
index 914d0fe..de4013a 100644
--- a/src/views/channel/components/ChannelConfigHotTable.vue
+++ b/src/views/channel/components/ChannelConfigHotTable.vue
@@ -16,6 +16,7 @@
       :stretch-columns="true"
       :height="handsontableHeight"
       :enable-header-search="false"
+      :auto-hybrid-header="false"
       :enable-column-filter="false"
       @action-click="handleActionClick"
     />
diff --git a/src/views/h5/customer-center/components/H5PlaceOrderSheet.vue b/src/views/h5/customer-center/components/H5PlaceOrderSheet.vue
index e0279cc..de41975 100644
--- a/src/views/h5/customer-center/components/H5PlaceOrderSheet.vue
+++ b/src/views/h5/customer-center/components/H5PlaceOrderSheet.vue
@@ -551,6 +551,15 @@
         >
           {{ t('h5.placeOrder.prev') }}
         </button>
+        <button
+          v-if="step === 1"
+          type="button"
+          class="h5-po__btn is-ai"
+          :disabled="submitting"
+          @click="openReceiverAiParse"
+        >
+          {{ t('h5.placeOrder.aiParse') }}
+        </button>
         <button
           v-if="step < 2"
           type="button"
@@ -573,6 +582,56 @@
     </div>
   </a-drawer>
 
+  <a-modal
+    v-model:visible="receiverAiVisible"
+    :title="t('h5.placeOrder.aiParseTitle')"
+    :footer="false"
+    unmount-on-close
+    width="92%"
+    :mask-closable="!receiverParseLoading"
+  >
+    <div class="h5-po-ai">
+      <p class="h5-po-ai__hint">{{ t('h5.placeOrder.aiParseHint') }}</p>
+      <a-textarea
+        v-model="receiverPasteText"
+        class="h5-po-ai__textarea"
+        :auto-size="{ minRows: 5, maxRows: 10 }"
+        :placeholder="t('h5.placeOrder.aiParsePlaceholder')"
+        :disabled="receiverParseLoading"
+      />
+      <p
+        v-if="receiverParseTip"
+        class="h5-po-ai__tip"
+        :class="`is-${receiverParseTip.tone}`"
+      >
+        {{ receiverParseTip.text }}
+      </p>
+      <div class="h5-po-ai__actions">
+        <button
+          type="button"
+          class="h5-po__btn is-ghost"
+          :disabled="receiverParseLoading"
+          @click="receiverAiVisible = false"
+        >
+          {{ t('h5.placeOrder.aiParseCancel') }}
+        </button>
+        <button
+          type="button"
+          class="h5-po__btn is-primary"
+          :disabled="receiverParseLoading"
+          @click="handleReceiverAiParse"
+        >
+          <span v-if="receiverParseLoading" class="h5-po__loading" aria-hidden="true" />
+          {{
+            receiverParseLoading
+              ? t('h5.placeOrder.aiParseLoading')
+              : t('h5.placeOrder.aiParseConfirm')
+          }}
+        </button>
+      </div>
+    </div>
+  </a-modal>
+
   <a-modal
     v-model:visible="createFailVisible"
     :title="
@@ -658,7 +717,7 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { Message, Modal } from '@arco-design/web-vue';
 import { IconClose } from '@arco-design/web-vue/es/icon';
-import { postOrderDelete, postOrderParcelCreate } from '@/api/order';
+import { postOrderDelete, postOrderParcelCreate, postOrderReceiverParseAddress } from '@/api/order';
 import { createSenderAddress, getSenderAddressList } from '@/api/order/senderAddress';
 import { getSalesProductList } from '@/api/channel/salesProduct';
 import { getDictListAll } from '@/api/system/dict';
@@ -708,6 +767,10 @@ const senderLoading = ref(false);
 const showSenderForm = ref(false);
 const savingSender = ref(false);
 const showReceiverMore = ref(false);
+const receiverAiVisible = ref(false);
+const receiverPasteText = ref('');
+const receiverParseLoading = ref(false);
+const receiverParseTip = ref<{ tone: 'ok' | 'warn' | 'danger'; text: string } | null>(null);
 /** 申报品「更多」展开状态，按 item._key */
 const openItemMoreKeys = ref<Set<string>>(new Set());
 const senderForm = reactive({
@@ -1062,6 +1125,107 @@ function goNext() {
   step.value += 1;
 }
 
+function openReceiverAiParse() {
+  receiverParseTip.value = null;
+  receiverAiVisible.value = true;
+}
+
+function applyParsedReceiver(parsed: Record<string, string | undefined>) {
+  const assignKeys = [
+    'recipientsName',
+    'companyName',
+    'phone',
+    'telePhone',
+    'email',
+    'countryCode',
+    'province',
+    'city',
+    'streetNumber',
+    'streetAddress1',
+    'streetAddress2',
+    'streetAddress3',
+    'zipCode',
+  ] as const;
+  for (const key of assignKeys) {
+    const val = trim(parsed[key] || '');
+    if (val) {
+      (form.receiver as Record<string, string>)[key] = val;
+    }
+  }
+  const needMore = Boolean(
+    trim(parsed.companyName || '') ||
+      trim(parsed.telePhone || '') ||
+      trim(parsed.email || '') ||
+      trim(parsed.streetNumber || '') ||
+      trim(parsed.streetAddress2 || '') ||
+      trim(parsed.streetAddress3 || ''),
+  );
+  if (needMore) {
+    showReceiverMore.value = true;
+  }
+}
+
+function buildReceiverParseTip(result: {
+  isComplete: boolean;
+  missingRequired: string[];
+  missingRecommended: string[];
+  warnings: string[];
+}) {
+  const parts: string[] = [];
+  if (result.missingRequired.length) {
+    parts.push(`${t('h5.placeOrder.aiParseMissingRequired')}${result.missingRequired.join('、')}`);
+  }
+  if (result.missingRecommended.length) {
+    parts.push(`${t('h5.placeOrder.aiParseMissingRecommended')}${result.missingRecommended.join('、')}`);
+  }
+  if (result.warnings.length) {
+    parts.push(result.warnings.slice(0, 2).join('；'));
+  }
+  if (result.isComplete && !result.missingRecommended.length && !result.warnings.length) {
+    receiverParseTip.value = { tone: 'ok', text: t('h5.placeOrder.aiParseComplete') };
+    return;
+  }
+  if (result.isComplete) {
+    receiverParseTip.value = {
+      tone: 'warn',
+      text: parts.length ? `${t('h5.placeOrder.aiParseRequiredOk')}${parts.join('。')}` : t('h5.placeOrder.aiParseRequiredOkShort'),
+    };
+    return;
+  }
+  receiverParseTip.value = {
+    tone: 'danger',
+    text: parts.length ? parts.join('。') : t('h5.placeOrder.aiParseIncomplete'),
+  };
+}
+
+async function handleReceiverAiParse() {
+  const raw = receiverPasteText.value.trim();
+  if (!raw) {
+    Message.warning(t('h5.placeOrder.aiParseEmpty'));
+    return;
+  }
+  if (receiverParseLoading.value) return;
+  receiverParseLoading.value = true;
+  receiverParseTip.value = null;
+  try {
+    const result = await postOrderReceiverParseAddress({ rawText: raw });
+    applyParsedReceiver(result.receiver);
+    buildReceiverParseTip(result);
+    Message.success(t('h5.placeOrder.aiParseSuccess'));
+    if (result.isComplete) {
+      receiverAiVisible.value = false;
+    }
+  } catch (e: any) {
+    receiverParseTip.value = {
+      tone: 'danger',
+      text: e?.message || t('h5.placeOrder.aiParseFailed'),
+    };
+    Message.error(e?.message || t('h5.placeOrder.aiParseFailed'));
+  } finally {
+    receiverParseLoading.value = false;
+  }
+}
+
 function goToStep(idx: number) {
   if (idx === step.value || submitting.value) return;
   if (idx < step.value) {
@@ -1558,6 +1722,10 @@ watch(
       submitting.value = false;
       showSenderForm.value = false;
       resetSenderForm();
+      receiverAiVisible.value = false;
+      receiverPasteText.value = '';
+      receiverParseTip.value = null;
+      receiverParseLoading.value = false;
       return;
     }
     resetForm();
@@ -2046,7 +2214,7 @@ watch(
   gap: 8px;
 
   &.is-ghost {
-    flex: 0 0 96px;
+    flex: 0 0 88px;
     background: #f2f3f5;
     color: #4e5969;
 
@@ -2055,6 +2223,20 @@ watch(
     }
   }
 
+  &.is-ai {
+    flex: 0 0 auto;
+    min-width: 88px;
+    padding: 0 12px;
+    background: color-mix(in srgb, var(--app-primary-color) 12%, #fff);
+    color: var(--app-primary-color);
+    border: 1px solid color-mix(in srgb, var(--app-primary-color) 35%, #e5e6eb);
+    box-shadow: none;
+
+    &:active:not(:disabled) {
+      background: color-mix(in srgb, var(--app-primary-color) 18%, #fff);
+    }
+  }
+
   &.is-primary {
     background: var(--app-primary-color);
     color: #fff;
@@ -2075,6 +2257,58 @@ watch(
   }
 }
 
+.h5-po-ai {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.h5-po-ai__hint {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.45;
+  color: #86909c;
+}
+
+.h5-po-ai__textarea {
+  :deep(textarea) {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+}
+
+.h5-po-ai__tip {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+
+  &.is-ok {
+    color: #00a870;
+  }
+
+  &.is-warn {
+    color: #d48806;
+  }
+
+  &.is-danger {
+    color: #f53f3f;
+  }
+}
+
+.h5-po-ai__actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 4px;
+
+  .h5-po__btn {
+    height: 44px;
+  }
+
+  .is-ghost {
+    flex: 0 0 88px;
+  }
+}
+
 .h5-po__loading {
   width: 16px;
   height: 16px;
diff --git a/src/views/h5/customer-center/components/WechatOAuthLoginButton.vue b/src/views/h5/customer-center/components/WechatOAuthLoginButton.vue
index 993536e..a119337 100644
--- a/src/views/h5/customer-center/components/WechatOAuthLoginButton.vue
+++ b/src/views/h5/customer-center/components/WechatOAuthLoginButton.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { Message } from '@arco-design/web-vue';
 import { IconWechat } from '@arco-design/web-vue/es/icon';
 import { isWeChatBrowser } from '@/utils/device';
 import { redirectToWeChatOAuth } from '@/utils/wechatOAuth';
@@ -12,11 +13,13 @@ const props = withDefaults(
     afterLoginPath?: string;
     long?: boolean;
     size?: 'mini' | 'small' | 'medium' | 'large';
+    disabled?: boolean;
   }>(),
   {
     afterLoginPath: '/h5/orders',
-    long: true,
+    long: false,
     size: 'large',
+    disabled: false,
   },
 );
 
@@ -25,8 +28,11 @@ const jumping = ref(false);
 const inWeChat = computed(() => isWeChatBrowser());
 
 function handleClick() {
-  if (jumping.value) return;
-  if (!inWeChat.value) return;
+  if (jumping.value || props.disabled) return;
+  if (!inWeChat.value) {
+    Message.warning(t('h5.login.openInWechat'));
+    return;
+  }
   jumping.value = true;
   redirectToWeChatOAuth('login', null, { afterLoginPath: props.afterLoginPath });
 }
@@ -35,37 +41,35 @@ function handleClick() {
 <template>
   <div class="wx-oauth-login">
     <a-button
-      v-if="inWeChat"
-      type="primary"
       class="wx-oauth-login__btn"
       :long="long"
       :size="size"
       :loading="jumping"
+      :disabled="disabled || (!inWeChat && !jumping)"
       @click="handleClick"
     >
       <template #icon><icon-wechat /></template>
       {{ jumping ? t('h5.login.oauthRedirecting') : t('h5.login.oauthLogin') }}
     </a-button>
-    <template v-else>
-      <p class="wx-oauth-login__tip">{{ t('h5.login.openInWechat') }}</p>
-      <a-button type="primary" class="wx-oauth-login__btn" :long="long" :size="size" disabled>
-        <template #icon><icon-wechat /></template>
-        {{ t('h5.login.oauthLogin') }}
-      </a-button>
-    </template>
+    <p v-if="!inWeChat" class="wx-oauth-login__tip">{{ t('h5.login.openInWechat') }}</p>
   </div>
 </template>
 
 <style lang="less" scoped>
 .wx-oauth-login {
   width: 100%;
-  padding: 8px 0 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .wx-oauth-login__btn {
-  height: 44px;
-  border-radius: 10px;
+  width: 50%;
+  min-width: 148px;
+  height: 48px;
+  border-radius: 999px;
   font-weight: 600;
+  color: #fff !important;
   background: #07c160 !important;
   border-color: #07c160 !important;
 
@@ -74,12 +78,18 @@ function handleClick() {
     background: #06ad56 !important;
     border-color: #06ad56 !important;
   }
+
+  &:disabled {
+    color: #fff !important;
+    background: #94d3ad !important;
+    border-color: #94d3ad !important;
+  }
 }
 
 .wx-oauth-login__tip {
-  margin: 0 0 12px;
+  margin: 10px 0 0;
   text-align: center;
-  font-size: 13px;
+  font-size: 12px;
   line-height: 1.5;
   color: #86909c;
 }
diff --git a/src/views/h5/customer-center/locale/en-US.ts b/src/views/h5/customer-center/locale/en-US.ts
index 27d15ec..fb0fff6 100644
--- a/src/views/h5/customer-center/locale/en-US.ts
+++ b/src/views/h5/customer-center/locale/en-US.ts
@@ -163,16 +163,18 @@ export default {
   'h5.wxQr.success': 'Signed in',
 
   'h5.login.title': 'Sign in',
-  'h5.login.brand': 'Customer Center',
+  'h5.login.brand': 'IDE Customer Center',
+  'h5.login.heroSub': 'Sign in with account password, or authorize in WeChat',
   'h5.login.tab.wechat': 'WeChat',
   'h5.login.tab.password': 'Account',
   'h5.login.switchPassword': 'Sign in with password',
   'h5.login.switchWechat': 'WeChat authorize sign-in',
+  'h5.login.or': 'or',
   'h5.login.oauthLogin': 'Sign in with WeChat',
   'h5.login.oauthRedirecting': 'Opening WeChat authorization…',
   'h5.login.oauthLoggingIn': 'Authorized. Signing you in…',
   'h5.login.oauthFailed': 'WeChat sign-in failed. Please retry.',
-  'h5.login.openInWechat': 'Open this page in WeChat, then tap the button below to authorize.',
+  'h5.login.openInWechat': 'Open this page in WeChat to use WeChat authorize sign-in',
   'h5.login.accountPlaceholder': 'Phone / email / customer code',
   'h5.login.passwordPlaceholder': 'Enter password',
   'h5.login.accountRequired': 'Please enter account',
@@ -307,6 +309,24 @@ export default {
   'h5.placeOrder.err.itemLine': 'Item {n}: {msg}',
   'h5.placeOrder.prev': 'Back',
   'h5.placeOrder.next': 'Next',
+  'h5.placeOrder.aiParse': 'AI parse',
+  'h5.placeOrder.aiParseTitle': 'Paste address · AI parse',
+  'h5.placeOrder.aiParseHint':
+    'Paste name, phone, address and ZIP together — we will fill the recipient fields',
+  'h5.placeOrder.aiParsePlaceholder':
+    'e.g. John Smith, +1 310-555-0199, 1001 Sunset Blvd, Los Angeles, CA 90001, USA',
+  'h5.placeOrder.aiParseCancel': 'Close',
+  'h5.placeOrder.aiParseConfirm': 'AI parse',
+  'h5.placeOrder.aiParseLoading': 'Parsing…',
+  'h5.placeOrder.aiParseEmpty': 'Paste an address first',
+  'h5.placeOrder.aiParseSuccess': 'Recipient fields updated',
+  'h5.placeOrder.aiParseFailed': 'Failed to parse address',
+  'h5.placeOrder.aiParseComplete': 'Address looks complete and was filled in',
+  'h5.placeOrder.aiParseRequiredOk': 'Required fields OK. ',
+  'h5.placeOrder.aiParseRequiredOkShort': 'Required fields OK — please double-check details',
+  'h5.placeOrder.aiParseIncomplete': 'Still incomplete — please fill remaining fields',
+  'h5.placeOrder.aiParseMissingRequired': 'Missing required: ',
+  'h5.placeOrder.aiParseMissingRecommended': 'Suggested: ',
   'h5.placeOrder.submit': 'Submit order',
   'h5.placeOrder.submitting': 'Submitting…',
   'h5.placeOrder.successTitle': 'Order created',
diff --git a/src/views/h5/customer-center/locale/zh-CN.ts b/src/views/h5/customer-center/locale/zh-CN.ts
index a43108b..161935f 100644
--- a/src/views/h5/customer-center/locale/zh-CN.ts
+++ b/src/views/h5/customer-center/locale/zh-CN.ts
@@ -162,16 +162,18 @@ export default {
   'h5.wxQr.success': '登录成功',
 
   'h5.login.title': '登录',
-  'h5.login.brand': '客户中心',
+  'h5.login.brand': 'IDE客户中心',
+  'h5.login.heroSub': '使用账号密码登录，或在微信内一键授权',
   'h5.login.tab.wechat': '微信登录',
   'h5.login.tab.password': '账号登录',
   'h5.login.switchPassword': '账号密码登录',
   'h5.login.switchWechat': '微信授权登录',
+  'h5.login.or': '或',
   'h5.login.oauthLogin': '微信授权登录',
   'h5.login.oauthRedirecting': '正在打开微信授权…',
   'h5.login.oauthLoggingIn': '授权成功，正在登录…',
   'h5.login.oauthFailed': '微信授权登录失败，请重试',
-  'h5.login.openInWechat': '请在微信内打开本页，点击下方按钮一键授权登录',
+  'h5.login.openInWechat': '请在微信内打开本页，即可使用微信授权登录',
   'h5.login.accountPlaceholder': '手机号 / 邮箱 / 客户编号',
   'h5.login.passwordPlaceholder': '请输入密码',
   'h5.login.accountRequired': '请输入账号',
@@ -306,6 +308,23 @@ export default {
   'h5.placeOrder.err.itemLine': '第 {n} 条：{msg}',
   'h5.placeOrder.prev': '上一步',
   'h5.placeOrder.next': '下一步',
+  'h5.placeOrder.aiParse': 'AI解析',
+  'h5.placeOrder.aiParseTitle': '粘贴地址 · AI 解析',
+  'h5.placeOrder.aiParseHint': '把姓名、电话、地址、邮编整段粘贴进来，解析后自动填入收件信息',
+  'h5.placeOrder.aiParsePlaceholder':
+    '例：John Smith, +1 310-555-0199, 1001 Sunset Blvd, Los Angeles, CA 90001, USA\n或：张三 13800138000 广东省深圳市南山区科技园南路 XX 号 518000',
+  'h5.placeOrder.aiParseCancel': '关闭',
+  'h5.placeOrder.aiParseConfirm': 'AI解析',
+  'h5.placeOrder.aiParseLoading': '解析中…',
+  'h5.placeOrder.aiParseEmpty': '请先粘贴收件人地址文本',
+  'h5.placeOrder.aiParseSuccess': '已解析并填入收件人信息',
+  'h5.placeOrder.aiParseFailed': '地址解析失败，请稍后重试',
+  'h5.placeOrder.aiParseComplete': '地址信息完整，已填入表单',
+  'h5.placeOrder.aiParseRequiredOk': '必填已齐。',
+  'h5.placeOrder.aiParseRequiredOkShort': '必填已齐，请确认地址细节',
+  'h5.placeOrder.aiParseIncomplete': '解析后仍不完整，请手动补全',
+  'h5.placeOrder.aiParseMissingRequired': '仍缺必填：',
+  'h5.placeOrder.aiParseMissingRecommended': '建议补全：',
   'h5.placeOrder.submit': '提交下单',
   'h5.placeOrder.submitting': '提交中…',
   'h5.placeOrder.successTitle': '下单成功',
diff --git a/src/views/h5/customer-center/login/index.vue b/src/views/h5/customer-center/login/index.vue
index 2643dc7..b8ea8de 100644
--- a/src/views/h5/customer-center/login/index.vue
+++ b/src/views/h5/customer-center/login/index.vue
@@ -15,90 +15,65 @@
       </section>
 
       <section class="h5-login-card">
-        <div class="h5-login-tabs" role="tablist">
-          <button
-            type="button"
-            role="tab"
-            class="h5-login-tab"
-            :class="{ 'is-active': activeTab === 'wechat' }"
-            :aria-selected="activeTab === 'wechat'"
-            @click="switchToWechat"
-          >
-            {{ t('h5.login.tab.wechat') }}
-          </button>
-          <button
-            type="button"
-            role="tab"
-            class="h5-login-tab"
-            :class="{ 'is-active': activeTab === 'password' }"
-            :aria-selected="activeTab === 'password'"
-            @click="switchToPassword"
-          >
-            {{ t('h5.login.tab.password') }}
-          </button>
+        <div v-if="oauthLoading" class="h5-login-oauth-banner">
+          <a-spin :size="18" />
+          <span>{{ t('h5.login.oauthLoggingIn') }}</span>
         </div>
 
-        <div class="h5-login-stage" :data-mode="activeTab">
-          <div
-            class="h5-login-pane"
-            :class="{ 'is-active': activeTab === 'wechat' }"
-            :aria-hidden="activeTab !== 'wechat'"
+        <form class="h5-login-form" @submit.prevent="handleSubmit">
+          <a-input
+            v-model="form.account"
+            size="large"
+            allow-clear
+            class="h5-login-input"
+            :placeholder="t('h5.login.accountPlaceholder')"
+            autocomplete="username"
+          />
+          <a-input-password
+            v-model="form.password"
+            size="large"
+            allow-clear
+            class="h5-login-input"
+            :placeholder="t('h5.login.passwordPlaceholder')"
+            autocomplete="current-password"
+          />
+
+          <p v-if="errorBox" class="h5-login-error">{{ errorBox }}</p>
+
+          <a-checkbox v-model="agreementChecked" class="h5-login-agree">
+            <span>
+              {{ t('h5.login.agreePrefix') }}
+              <a class="h5-login-link" @click.prevent="openAgreement('privacy')">
+                {{ t('h5.login.privacy') }}
+              </a>
+              {{ t('h5.login.and') }}
+              <a class="h5-login-link" @click.prevent="openAgreement('terms')">
+                {{ t('h5.login.terms') }}
+              </a>
+            </span>
+          </a-checkbox>
+
+          <a-button
+            type="primary"
+            html-type="submit"
+            long
+            size="large"
+            class="h5-login-submit"
+            :loading="loading"
+            :disabled="oauthLoading"
           >
-            <WechatOAuthLoginButton :after-login-path="resolveRedirectPath()" />
-            <p v-if="oauthLoading" class="h5-login-oauth-status">{{ t('h5.login.oauthLoggingIn') }}</p>
-            <p v-else-if="errorBox && activeTab === 'wechat'" class="h5-login-error">{{ errorBox }}</p>
-          </div>
+            {{ loading ? t('h5.login.submitting') : t('h5.login.submit') }}
+          </a-button>
+        </form>
 
-          <form
-            class="h5-login-pane h5-login-form"
-            :class="{ 'is-active': activeTab === 'password' }"
-            :aria-hidden="activeTab !== 'password'"
-            @submit.prevent="handleSubmit"
-          >
-            <a-input
-              v-model="form.account"
-              size="large"
-              allow-clear
-              class="h5-login-input"
-              :placeholder="t('h5.login.accountPlaceholder')"
-              autocomplete="username"
-            />
-            <a-input-password
-              v-model="form.password"
-              size="large"
-              allow-clear
-              class="h5-login-input"
-              :placeholder="t('h5.login.passwordPlaceholder')"
-              autocomplete="current-password"
-            />
-
-            <p v-if="errorBox" class="h5-login-error">{{ errorBox }}</p>
-
-            <a-checkbox v-model="agreementChecked" class="h5-login-agree">
-              <span>
-                {{ t('h5.login.agreePrefix') }}
-                <a class="h5-login-link" @click.prevent="openAgreement('privacy')">
-                  {{ t('h5.login.privacy') }}
-                </a>
-                {{ t('h5.login.and') }}
-                <a class="h5-login-link" @click.prevent="openAgreement('terms')">
-                  {{ t('h5.login.terms') }}
-                </a>
-              </span>
-            </a-checkbox>
-
-            <a-button
-              type="primary"
-              html-type="submit"
-              long
-              size="large"
-              class="h5-login-submit"
-              :loading="loading"
-            >
-              {{ loading ? t('h5.login.submitting') : t('h5.login.submit') }}
-            </a-button>
-          </form>
+        <div class="h5-login-divider">
+          <span>{{ t('h5.login.or') }}</span>
         </div>
+
+        <WechatOAuthLoginButton
+          :after-login-path="resolveRedirectPath()"
+          :disabled="loading || oauthLoading"
+        />
       </section>
 
       <div class="h5-login-extra">
@@ -130,7 +105,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+import { nextTick, onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { Message } from '@arco-design/web-vue';
@@ -157,7 +132,6 @@ const route = useRoute();
 const router = useRouter();
 const rbacUserStore = useRbacUserStore();
 
-const activeTab = ref<'wechat' | 'password'>('wechat');
 const form = reactive({ account: '', password: '' });
 const agreementChecked = ref(false);
 const loading = ref(false);
@@ -177,26 +151,12 @@ const termsText = `一、使用须知
 二、服务说明
 系统展示的运费、时效为估算或报价结果，最终以订单确认与仓库计费为准。异常订单请及时联系客服或使用 AI 顾问。`;
 
-function switchToWechat() {
-  errorBox.value = '';
-  activeTab.value = 'wechat';
-  if (route.query.tab === 'password') {
-    const { tab: _tab, ...rest } = route.query;
-    router.replace({ path: route.path, query: rest });
-  }
-}
-
-function switchToPassword() {
-  errorBox.value = '';
-  activeTab.value = 'password';
-}
-
 function goBack() {
   if (window.history.length > 1) {
     router.back();
     return;
   }
-  router.replace('/h5/me');
+  router.replace('/h5/orders');
 }
 
 function goRegister() {
@@ -261,7 +221,7 @@ async function finishLogin() {
 async function consumeOAuthCode(code: string) {
   if (oauthLoading.value) return;
   oauthLoading.value = true;
-  activeTab.value = 'wechat';
+  errorBox.value = '';
   try {
     const result = await wxOAuthLogin(code);
     const ok = await rbacUserStore.loginByWxResult(result);
@@ -283,7 +243,7 @@ async function consumeOAuthCode(code: string) {
 }
 
 async function handleSubmit() {
-  if (loading.value) return;
+  if (loading.value || oauthLoading.value) return;
   errorBox.value = '';
 
   if (!agreementChecked.value) {
@@ -322,20 +282,6 @@ async function handleSubmit() {
   }
 }
 
-watch(
-  () => route.query.tab,
-  (tab) => {
-    if (tab === 'password') {
-      activeTab.value = 'password';
-      errorBox.value = '';
-      return;
-    }
-    activeTab.value = 'wechat';
-    errorBox.value = '';
-  },
-  { immediate: true },
-);
-
 onMounted(async () => {
   if (isLogin()) {
     router.replace(resolveRedirectPath());
@@ -348,7 +294,6 @@ onMounted(async () => {
     return;
   }
 
-  // 微信内且未带 code：可一键拉起授权（用户点按钮亦可）
   if (isWeChatBrowser() && route.query.auto === '1') {
     redirectToWeChatOAuth('login', null, { afterLoginPath: resolveRedirectPath() });
   }
@@ -417,17 +362,17 @@ onMounted(async () => {
   width: 100%;
   max-width: 420px;
   margin: 0 auto;
-  padding: 20px 16px calc(28px + env(safe-area-inset-bottom, 0px));
+  padding: 12px 16px calc(28px + env(safe-area-inset-bottom, 0px));
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   animation: h5-login-rise 0.48s var(--login-ease) both;
 }
 
 .h5-login-hero {
   text-align: center;
-  padding: 0 8px 14px;
+  padding: 8px 8px 16px;
 }
 
 .h5-login-hero__logo {
@@ -457,87 +402,28 @@ onMounted(async () => {
 .h5-login-card {
   background: #fff;
   border-radius: 22px;
-  padding: 14px 18px 20px;
+  padding: 22px 18px 20px;
   box-shadow:
     0 1px 0 rgba(255, 255, 255, 0.8) inset,
     0 12px 32px rgba(15, 23, 42, 0.06);
 }
 
-.h5-login-tabs {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 4px;
-  margin-bottom: 16px;
-  padding: 4px;
-  border-radius: 12px;
-  background: #f2f3f5;
-}
-
-.h5-login-tab {
-  height: 36px;
-  border: none;
+.h5-login-oauth-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: -6px 0 14px;
+  padding: 10px 12px;
   border-radius: 10px;
-  background: transparent;
-  color: #86909c;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    background 0.2s var(--login-ease),
-    color 0.2s var(--login-ease),
-    box-shadow 0.2s var(--login-ease);
-
-  &.is-active {
-    background: #fff;
-    color: var(--app-primary-color);
-    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
-  }
-
-  &:active:not(.is-active) {
-    color: #4e5969;
-  }
-}
-
-.h5-login-stage {
-  position: relative;
-  display: grid;
-  min-height: 360px;
-}
-
-.h5-login-pane {
-  grid-area: 1 / 1;
-  width: 100%;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transform: translate3d(16px, 0, 0) scale(0.985);
-  transition:
-    opacity 0.34s var(--login-ease),
-    transform 0.34s var(--login-ease),
-    visibility 0.34s;
-
-  &.is-active {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-
-.h5-login-stage[data-mode='password'] .h5-login-pane:not(.is-active) {
-  transform: translate3d(-16px, 0, 0) scale(0.985);
-}
-
-.h5-login-stage[data-mode='wechat'] .h5-login-pane:not(.is-active) {
-  transform: translate3d(16px, 0, 0) scale(0.985);
+  background: #f2f3f5;
+  color: #4e5969;
+  font-size: 13px;
 }
 
 .h5-login-form {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  min-height: 100%;
-  box-sizing: border-box;
 }
 
 .h5-login-input {
@@ -575,13 +461,6 @@ onMounted(async () => {
   animation: h5-login-rise 0.28s var(--login-ease) both;
 }
 
-.h5-login-oauth-status {
-  margin: 12px 0 0;
-  text-align: center;
-  font-size: 13px;
-  color: #86909c;
-}
-
 .h5-login-agree {
   margin: 4px 0 0;
   align-items: flex-start;
@@ -597,9 +476,9 @@ onMounted(async () => {
 
 .h5-login-submit {
   margin-top: 16px;
-  height: 50px !important;
-  border-radius: 14px !important;
-  font-size: 17px;
+  height: 48px !important;
+  border-radius: 12px !important;
+  font-size: 16px;
   font-weight: 600;
   box-shadow: 0 8px 18px color-mix(in srgb, var(--app-primary-color) 26%, transparent);
   transition: transform 0.2s var(--login-ease), box-shadow 0.2s var(--login-ease) !important;
@@ -609,6 +488,27 @@ onMounted(async () => {
   }
 }
 
+.h5-login-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 18px 0 10px;
+  color: #c9cdd4;
+  font-size: 12px;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #e5e6eb;
+  }
+
+  span {
+    flex-shrink: 0;
+  }
+}
+
 .h5-login-extra {
   margin-top: 20px;
   text-align: center;
@@ -683,17 +583,11 @@ onMounted(async () => {
 
 @media (prefers-reduced-motion: reduce) {
   .h5-login-main,
-  .h5-login-pane,
-  .h5-login-tab,
   .h5-login-text-btn,
   .h5-login-error,
   .h5-login-submit {
     animation: none !important;
     transition: none !important;
   }
-
-  .h5-login-pane {
-    transform: none;
-  }
 }
 </style>
diff --git a/src/views/h5/customer-center/me/index.vue b/src/views/h5/customer-center/me/index.vue
index aaabe03..4f9fe01 100644
--- a/src/views/h5/customer-center/me/index.vue
+++ b/src/views/h5/customer-center/me/index.vue
@@ -1,92 +1,42 @@
 <template>
-  <div class="h5-me-page" :class="{ 'h5-me-page--guest': !loggedIn }">
-    <!-- 访客：微信授权登录（无二维码）；新用户走注册/绑定 -->
-    <template v-if="!loggedIn">
-      <section class="h5-me-guest h5-enter">
-        <div class="h5-me-guest__brand">
-          <img :src="logoImg" alt="" class="h5-me-guest__logo" />
-          <h2 class="h5-me-guest__title">{{ t('h5.login.brand') }}</h2>
-        </div>
+  <div class="h5-me-page">
+    <a-spin :loading="loading" class="h5-me-spin">
+      <div v-if="loading && !profile.id" class="h5-me-skel">
+        <div class="h5-me-skel__hero" />
+        <div class="h5-me-skel__card" />
+        <div class="h5-me-skel__card h5-me-skel__card--short" />
+      </div>
 
-        <div class="h5-me-guest__card">
-          <div class="h5-me-guest__tabs" role="tablist">
-            <button
-              type="button"
-              role="tab"
-              class="h5-me-guest__tab is-active"
-              aria-selected="true"
-            >
-              {{ t('h5.login.tab.wechat') }}
-            </button>
-            <button
-              type="button"
-              role="tab"
-              class="h5-me-guest__tab"
-              aria-selected="false"
-              @click="goPasswordLogin"
-            >
-              {{ t('h5.login.tab.password') }}
-            </button>
-          </div>
-          <WechatOAuthLoginButton :after-login-path="resolvePostLoginPath()" />
-          <p v-if="route.query.redirect" class="h5-me-tip">{{ t('h5.me.needLogin') }}</p>
-        </div>
+      <template v-else>
+        <section class="h5-me-hero h5-enter" :class="{ 'is-low': isLowBalance }">
+          <span v-if="levelBadge" class="h5-me-vip">{{ levelBadge }}</span>
 
-        <div class="h5-me-guest__extra">
-          <p class="h5-me-guest__hint">{{ t('h5.login.newUserHint') }}</p>
-          <div class="h5-me-guest__actions">
-            <button type="button" class="h5-me-text-btn is-primary" @click="goWechatRegister">
-              <icon-user-add :size="18" />
-              <span>{{ t('h5.login.goRegister') }}</span>
-            </button>
-            <button type="button" class="h5-me-text-btn" @click="goWechatBind">
-              <icon-link :size="18" />
-              <span>{{ t('h5.login.goBind') }}</span>
-            </button>
-          </div>
-        </div>
-      </section>
-    </template>
-
-    <!-- 已登录 -->
-    <template v-else>
-      <a-spin :loading="loading" class="h5-me-spin">
-        <div v-if="loading && !profile.id" class="h5-me-skel">
-          <div class="h5-me-skel__hero" />
-          <div class="h5-me-skel__card" />
-          <div class="h5-me-skel__card h5-me-skel__card--short" />
-        </div>
-
-        <template v-else>
-          <section class="h5-me-hero h5-enter" :class="{ 'is-low': isLowBalance }">
-            <span v-if="levelBadge" class="h5-me-vip">{{ levelBadge }}</span>
-
-            <div class="h5-me-hero__top">
-              <img :src="displayAvatar" alt="" class="h5-me-avatar" />
-              <div class="h5-me-hero__text">
-                <div class="h5-me-hero__name-row">
-                  <h2 class="h5-me-name">{{ displayName }}</h2>
-                  <span class="h5-me-greet">{{ greetText }}</span>
-                </div>
-                <div class="h5-me-hero__meta">
-                  <button
-                    v-if="profile.customerCode"
-                    type="button"
-                    class="h5-me-code"
-                    @click="copyText(profile.customerCode)"
-                  >
-                    {{ t('h5.me.customerCode') }} {{ profile.customerCode }}
-                    <icon-copy />
-                  </button>
-                  <span v-if="profile.customerCode" class="h5-me-hero__dot" aria-hidden="true">·</span>
-                  <span class="h5-me-balance__label">{{ t('h5.me.balance') }}</span>
-                  <strong class="h5-me-balance__value">￥{{ formatMoney(accountBalance) }}</strong>
-                  <button type="button" class="h5-me-recharge" @click="goRecharge">
-                    {{ t('h5.me.recharge') }}
-                  </button>
-                </div>
+          <div class="h5-me-hero__top">
+            <img :src="displayAvatar" alt="" class="h5-me-avatar" />
+            <div class="h5-me-hero__text">
+              <div class="h5-me-hero__name-row">
+                <h2 class="h5-me-name">{{ displayName }}</h2>
+                <span class="h5-me-greet">{{ greetText }}</span>
+              </div>
+              <div class="h5-me-hero__meta">
+                <button
+                  v-if="profile.customerCode"
+                  type="button"
+                  class="h5-me-code"
+                  @click="copyText(profile.customerCode)"
+                >
+                  {{ t('h5.me.customerCode') }} {{ profile.customerCode }}
+                  <icon-copy />
+                </button>
+                <span v-if="profile.customerCode" class="h5-me-hero__dot" aria-hidden="true">·</span>
+                <span class="h5-me-balance__label">{{ t('h5.me.balance') }}</span>
+                <strong class="h5-me-balance__value">￥{{ formatMoney(accountBalance) }}</strong>
+                <button type="button" class="h5-me-recharge" @click="goRecharge">
+                  {{ t('h5.me.recharge') }}
+                </button>
               </div>
             </div>
+          </div>
 
             <div v-if="memberOverview" class="h5-me-hero__points">
               <div class="h5-me-hero__points-head">
@@ -221,14 +171,13 @@
       <H5PasswordSheet v-model:visible="pwdVisible" @success="onPasswordChanged" />
       <H5AddressSheet v-model:visible="addressVisible" />
       <H5PickupOrdersSheet v-model:visible="pickupVisible" @loaded="onPickupLoaded" />
-    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
 import { preloadInvitePosterBg } from '@/utils/invitePoster';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { Message, Modal } from '@arco-design/web-vue';
 import {
@@ -237,8 +186,6 @@ import {
   IconEdit,
   IconLock,
   IconLocation,
-  IconUserAdd,
-  IconLink,
   IconLanguage,
   IconWechat,
 } from '@arco-design/web-vue/es/icon';
@@ -249,18 +196,15 @@ import { getMyCoupons, getMemberOverview } from '@/api/marketing/portal';
 import { isLogin } from '@/utils/auth';
 import { resolveAvatarUrl } from '@/utils/avatar';
 import { getMapIdFromAccessToken } from '@/utils/jwt';
-import { h5Navigate, isWeChatBrowser } from '@/utils/device';
-import { redirectToWeChatOAuth } from '@/utils/wechatOAuth';
+import { h5Navigate } from '@/utils/device';
 import { jumpToWechatOfficialAccount } from '@/utils/wechatFollowJump';
 import { useUserStore } from '@/store';
 import { useRbacUserStore } from '@/store/modules/rbac-user';
 import useLocale from '@/hooks/locale';
-import logoImg from '@/assets/logo2.png';
 import iconServiceCoupon from '@/assets/icons/h5/service-coupon.svg?url';
 import iconServiceInvite from '@/assets/icons/h5/service-invite.svg?url';
 import iconServiceCommission from '@/assets/icons/h5/service-commission.svg?url';
 import iconOrderPickup from '@/assets/icons/h5/order-pickup.svg?url';
-import WechatOAuthLoginButton from '../components/WechatOAuthLoginButton.vue';
 import H5JourneyGuide from '../components/H5JourneyGuide.vue';
 import H5CreateOrderFlow from '../components/H5CreateOrderFlow.vue';
 import H5RechargeSheet from '../components/H5RechargeSheet.vue';
@@ -278,12 +222,10 @@ const LOW_BALANCE_THRESHOLD = 100;
 
 const { t, locale } = useI18n();
 const { changeLocale } = useLocale();
-const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 const rbacUserStore = useRbacUserStore();
 
-const loggedIn = ref(isLogin());
 const loading = ref(false);
 const profile = ref<CustomerDto>({});
 const couponCount = ref(0);
@@ -439,35 +381,6 @@ async function copyText(text?: string) {
   }
 }
 
-function resolvePostLoginPath() {
-  const redirect = route.query.redirect;
-  if (typeof redirect === 'string' && redirect.startsWith('/h5')) {
-    return redirect;
-  }
-  return '/h5/orders';
-}
-
-function goWechatRegister() {
-  if (isWeChatBrowser()) {
-    redirectToWeChatOAuth('register');
-    return;
-  }
-  h5Navigate(router, '/wechat/register');
-}
-
-function goWechatBind() {
-  if (isWeChatBrowser()) {
-    redirectToWeChatOAuth('bind');
-    return;
-  }
-  h5Navigate(router, '/wechat/bind');
-}
-
-function goPasswordLogin() {
-  const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/h5/orders';
-  h5Navigate(router, { path: '/h5/login', query: { redirect, tab: 'password' } });
-}
-
 function goRecharge() {
   rechargeVisible.value = true;
 }
@@ -479,8 +392,7 @@ function onProfileSaved(payload: { customerName: string; phone: string; email: s
 async function onPasswordChanged() {
   await userStore.logout();
   rbacUserStore.logout();
-  loggedIn.value = false;
-  router.replace('/h5/me');
+  router.replace('/h5/login');
 }
 
 function toggleLocale() {
@@ -508,8 +420,7 @@ function handleLogout() {
     onOk: async () => {
       await userStore.logout();
       rbacUserStore.logout();
-      loggedIn.value = false;
-      router.replace('/h5/me');
+      router.replace('/h5/login');
     },
   });
 }
@@ -547,7 +458,7 @@ async function loadExtras() {
 }
 
 async function loadProfile() {
-  if (!loggedIn.value) return;
+  if (!isLogin()) return;
   loading.value = true;
   try {
     const mapId = getMapIdFromAccessToken(rbacUserStore.accessToken);
@@ -562,7 +473,10 @@ async function loadProfile() {
 }
 
 onMounted(() => {
-  loggedIn.value = isLogin();
+  if (!isLogin()) {
+    router.replace({ path: '/h5/login', query: { redirect: '/h5/me' } });
+    return;
+  }
   void loadProfile();
   void preloadInvitePosterBg();
 });
@@ -578,10 +492,6 @@ onMounted(() => {
   padding: 20px 16px 28px;
   box-sizing: border-box;
   background: linear-gradient(180deg, color-mix(in srgb, var(--me-teal) 12%, #f3f6f7) 0%, #f3f6f7 180px);
-
-  &--guest {
-    padding-top: 16px;
-  }
 }
 
 .h5-me-spin {
@@ -1121,133 +1031,6 @@ onMounted(() => {
   font-size: 16px;
 }
 
-/* 访客（对齐 /h5/login） */
-.h5-me-guest {
-  --me-login-ease: cubic-bezier(0.22, 1, 0.36, 1);
-  padding: 8px 0 12px;
-  max-width: 420px;
-  margin: 0 auto;
-}
-
-.h5-me-guest__brand {
-  padding: 12px 8px 14px;
-  text-align: center;
-}
-
-.h5-me-guest__logo {
-  display: block;
-  width: 56px;
-  height: 56px;
-  margin: 0 auto 10px;
-  object-fit: contain;
-  border-radius: 16px;
-  background: #fff;
-  box-shadow: 0 8px 22px color-mix(in srgb, var(--me-teal) 18%, transparent);
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-  -webkit-user-drag: none;
-  pointer-events: none;
-}
-
-.h5-me-guest__title {
-  margin: 0;
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--me-ink);
-  letter-spacing: 0.02em;
-}
-
-.h5-me-guest__card {
-  background: #fff;
-  border-radius: 22px;
-  padding: 14px 18px 20px;
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.8) inset,
-    0 12px 32px rgba(15, 23, 42, 0.06);
-}
-
-.h5-me-guest__tabs {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 4px;
-  margin-bottom: 16px;
-  padding: 4px;
-  border-radius: 12px;
-  background: #f2f3f5;
-}
-
-.h5-me-guest__tab {
-  height: 36px;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-  color: #86909c;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-
-  &.is-active {
-    background: #fff;
-    color: var(--me-teal);
-    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
-  }
-}
-
-.h5-me-guest__extra {
-  margin-top: 18px;
-  text-align: center;
-}
-
-.h5-me-guest__hint {
-  margin: 0 0 12px;
-  font-size: 13px;
-  color: #86909c;
-  line-height: 1.4;
-}
-
-.h5-me-guest__actions {
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  gap: 10px;
-}
-
-.h5-me-text-btn {
-  flex: 1;
-  max-width: 168px;
-  min-height: 44px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 12px;
-  border: 1px solid #e5e6eb;
-  border-radius: 12px;
-  background: #fff;
-  color: #4e5969;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-
-  &:active {
-    transform: scale(0.98);
-  }
-
-  &.is-primary {
-    border-color: color-mix(in srgb, var(--me-teal) 35%, #e5e6eb);
-    background: color-mix(in srgb, var(--me-teal) 10%, #fff);
-    color: var(--me-teal);
-  }
-}
-
-.h5-me-tip {
-  margin: 14px 0 0;
-  font-size: 12px;
-  color: var(--me-accent);
-  text-align: center;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .h5-me-skel__hero,
   .h5-me-skel__card {
diff --git a/src/views/order/placeOrder/index.vue b/src/views/order/placeOrder/index.vue
index 7c78e70..c58fef1 100644
--- a/src/views/order/placeOrder/index.vue
+++ b/src/views/order/placeOrder/index.vue
@@ -17,6 +17,7 @@
     deleteOrderTemplateCustom,
     postOrderUpload,
     getOrderBatchJob,
+    postOrderReceiverParseAddress,
   } from '@/api/order';
   import { getSenderAddressList } from '@/api/order/senderAddress';
   import { getSalesProductList } from '@/api/channel/salesProduct';
@@ -65,6 +66,13 @@
   const singleShowFieldErrors = ref(false);
   /** 收件人选填字段默认折叠 */
   const showRecipientOptional = ref(false);
+  /** 粘贴地址 → AI 解析 */
+  const receiverPasteText = ref('');
+  const receiverParseLoading = ref(false);
+  const receiverParseTip = ref<{
+    tone: 'ok' | 'warn' | 'danger';
+    text: string;
+  } | null>(null);
   /** 申报表滚动面板高度（可拖拽调节） */
   const declarationPanelHeight = ref(280);
   const DECLARATION_PANEL_MIN = 160;
@@ -901,6 +909,108 @@
     return true;
   }
 
+  function applyParsedReceiver(parsed: Record<string, string | undefined>) {
+    const assignKeys = [
+      'recipientsName',
+      'companyName',
+      'phone',
+      'telePhone',
+      'email',
+      'countryCode',
+      'province',
+      'city',
+      'streetNumber',
+      'streetAddress1',
+      'streetAddress2',
+      'streetAddress3',
+      'zipCode',
+    ] as const;
+    for (const key of assignKeys) {
+      const val = formTrim(parsed[key] || '');
+      if (val) {
+        ;(singleForm.receiver as Record<string, string>)[key] = val;
+      }
+    }
+    const needOptional = Boolean(
+      formTrim(parsed.companyName || '') ||
+        formTrim(parsed.telePhone || '') ||
+        formTrim(parsed.email || '') ||
+        formTrim(parsed.province || '') ||
+        formTrim(parsed.city || '') ||
+        formTrim(parsed.streetNumber || '') ||
+        formTrim(parsed.streetAddress2 || '') ||
+        formTrim(parsed.streetAddress3 || ''),
+    );
+    if (needOptional) {
+      showRecipientOptional.value = true;
+    }
+  }
+
+  function buildReceiverParseTip(result: {
+    isComplete: boolean;
+    missingRequired: string[];
+    missingRecommended: string[];
+    warnings: string[];
+  }) {
+    const parts: string[] = [];
+    if (result.missingRequired.length) {
+      parts.push(`仍缺必填：${result.missingRequired.join('、')}`);
+    }
+    if (result.missingRecommended.length) {
+      parts.push(`建议补全：${result.missingRecommended.join('、')}`);
+    }
+    if (result.warnings.length) {
+      parts.push(result.warnings.slice(0, 2).join('；'));
+    }
+    if (result.isComplete && !result.missingRecommended.length && !result.warnings.length) {
+      receiverParseTip.value = { tone: 'ok', text: '地址信息完整，已填入下方字段，请确认后下单' };
+      return;
+    }
+    if (result.isComplete) {
+      receiverParseTip.value = {
+        tone: 'warn',
+        text: parts.length ? `必填已齐。${parts.join('。')}` : '必填已齐，请确认地址细节',
+      };
+      return;
+    }
+    receiverParseTip.value = {
+      tone: 'danger',
+      text: parts.length ? parts.join('。') : '解析后仍不完整，请手动补全',
+    };
+  }
+
+  async function handleReceiverAiParse() {
+    const raw = receiverPasteText.value.trim();
+    if (!raw) {
+      Message.warning('请先粘贴收件人地址文本');
+      return;
+    }
+    if (receiverParseLoading.value) return;
+    receiverParseLoading.value = true;
+    receiverParseTip.value = null;
+    try {
+      const result = await postOrderReceiverParseAddress({ rawText: raw });
+      applyParsedReceiver(result.receiver);
+      buildReceiverParseTip(result);
+      Message.success('已解析并填入收件人信息');
+    } catch (e: any) {
+      receiverParseTip.value = {
+        tone: 'danger',
+        text: e?.message || '地址解析失败，请稍后重试',
+      };
+      Message.error(e?.message || '地址解析失败');
+    } finally {
+      receiverParseLoading.value = false;
+    }
+  }
+
+  function onReceiverPasteKeydown(e: KeyboardEvent) {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      void handleReceiverAiParse();
+    }
+  }
+
   function isSingleDeclarationComplete() {
     const lines = singleForm.items || [];
     if (!lines.length) return false;
@@ -2677,94 +2787,139 @@
                 </section>
 
                 <section
-                  class="single-info-card liquid-card"
+                  class="single-info-card liquid-card single-info-card--recipient"
                   :ref="(el) => (singlePanelRefs.recipient = (el as HTMLElement | null))"
                 >
                   <header class="single-info-card__header">
                     <span class="single-section-index">3</span>
                     <span class="single-section-title">{{ t('order.placeOrder.single.stepRecipient') }}</span>
                   </header>
-                  <div class="single-form-grid single-form-grid--compact">
-                    <a-form-item
-                      label="收件人名称"
-                      required
-                      :validate-status="fieldValidateStatus('receiver.recipientsName')"
-                      :help="fieldHelp('receiver.recipientsName')"
-                    >
-                      <a-input v-model="singleForm.receiver.recipientsName" />
-                    </a-form-item>
-                    <a-form-item
-                      label="收件人手机"
-                      required
-                      :validate-status="fieldValidateStatus('receiver.phone')"
-                      :help="fieldHelp('receiver.phone')"
-                    >
-                      <a-input v-model="singleForm.receiver.phone" />
-                    </a-form-item>
-                    <a-form-item
-                      label="国家"
-                      required
-                      :validate-status="fieldValidateStatus('receiver.countryCode')"
-                      :help="fieldHelp('receiver.countryCode')"
-                    >
-                      <a-select
-                        v-model="singleForm.receiver.countryCode"
-                        allow-search
-                        placeholder="请选择"
-                        :loading="singleReferenceLoading"
-                      >
-                        <a-option
-                          v-for="opt in singleCountryOptions"
-                          :key="opt.value"
-                          :value="opt.value"
+
+                  <div class="receiver-split">
+                    <aside class="receiver-split__paste">
+                      <div class="receiver-ai-paste">
+                        <div class="receiver-ai-paste__head">
+                          <span class="receiver-ai-paste__title">粘贴地址 · AI 解析</span>
+                          <span class="receiver-ai-paste__hint">中/英整段粘贴，Ctrl+Enter 解析</span>
+                        </div>
+                        <a-textarea
+                          v-model="receiverPasteText"
+                          class="receiver-ai-paste__textarea"
+                          :auto-size="{ minRows: 8, maxRows: 16 }"
+                          placeholder="例：John Smith, +1 310-555-0199, 1001 Sunset Blvd, Los Angeles, CA 90001, USA&#10;或：张三 13800138000 广东省深圳市南山区科技园南路 XX 号 518000"
+                          @keydown="onReceiverPasteKeydown"
+                        />
+                        <div class="receiver-ai-paste__actions">
+                          <a-button
+                            type="primary"
+                            size="small"
+                            :loading="receiverParseLoading"
+                            @click="handleReceiverAiParse"
+                          >
+                            AI解析
+                          </a-button>
+                          <a-button
+                            v-if="receiverPasteText"
+                            size="small"
+                            @click="receiverPasteText = ''; receiverParseTip = null"
+                          >
+                            清空
+                          </a-button>
+                        </div>
+                        <p
+                          v-if="receiverParseTip"
+                          class="receiver-ai-paste__tip"
+                          :class="`is-${receiverParseTip.tone}`"
                         >
-                          {{ opt.label }}
-                        </a-option>
-                      </a-select>
-                    </a-form-item>
-                    <a-form-item
-                      label="邮编"
-                      required
-                      :validate-status="fieldValidateStatus('receiver.zipCode')"
-                      :help="fieldHelp('receiver.zipCode')"
-                    >
-                      <a-input v-model="singleForm.receiver.zipCode" />
-                    </a-form-item>
-                    <a-form-item
-                      class="span-2"
-                      label="地址1"
-                      required
-                      :validate-status="fieldValidateStatus('receiver.streetAddress1')"
-                      :help="fieldHelp('receiver.streetAddress1')"
-                    >
-                      <a-input v-model="singleForm.receiver.streetAddress1" />
-                    </a-form-item>
-                  </div>
-                  <div class="recipient-optional-toggle">
-                    <button
-                      type="button"
-                      class="declaration-extra-btn"
-                      @click="showRecipientOptional = !showRecipientOptional"
-                    >
-                      {{
-                        showRecipientOptional
-                          ? t('order.placeOrder.single.hideRecipientOptional')
-                          : t('order.placeOrder.single.showRecipientOptional')
-                      }}
-                    </button>
-                  </div>
-                  <div
-                    v-show="showRecipientOptional"
-                    class="single-form-grid single-form-grid--compact recipient-optional-grid"
-                  >
-                    <a-form-item label="收件人公司"><a-input v-model="singleForm.receiver.companyName" /></a-form-item>
-                    <a-form-item label="收件人电话"><a-input v-model="singleForm.receiver.telePhone" /></a-form-item>
-                    <a-form-item label="收件人邮箱"><a-input v-model="singleForm.receiver.email" /></a-form-item>
-                    <a-form-item label="省/州"><a-input v-model="singleForm.receiver.province" /></a-form-item>
-                    <a-form-item label="城市"><a-input v-model="singleForm.receiver.city" /></a-form-item>
-                    <a-form-item label="门牌号"><a-input v-model="singleForm.receiver.streetNumber" /></a-form-item>
-                    <a-form-item label="地址2"><a-input v-model="singleForm.receiver.streetAddress2" /></a-form-item>
-                    <a-form-item label="地址3"><a-input v-model="singleForm.receiver.streetAddress3" /></a-form-item>
+                          {{ receiverParseTip.text }}
+                        </p>
+                      </div>
+                    </aside>
+
+                    <div class="receiver-split__form">
+                      <div class="single-form-grid single-form-grid--compact">
+                        <a-form-item
+                          label="收件人名称"
+                          required
+                          :validate-status="fieldValidateStatus('receiver.recipientsName')"
+                          :help="fieldHelp('receiver.recipientsName')"
+                        >
+                          <a-input v-model="singleForm.receiver.recipientsName" />
+                        </a-form-item>
+                        <a-form-item
+                          label="收件人手机"
+                          required
+                          :validate-status="fieldValidateStatus('receiver.phone')"
+                          :help="fieldHelp('receiver.phone')"
+                        >
+                          <a-input v-model="singleForm.receiver.phone" />
+                        </a-form-item>
+                        <a-form-item
+                          label="国家"
+                          required
+                          :validate-status="fieldValidateStatus('receiver.countryCode')"
+                          :help="fieldHelp('receiver.countryCode')"
+                        >
+                          <a-select
+                            v-model="singleForm.receiver.countryCode"
+                            allow-search
+                            placeholder="请选择"
+                            :loading="singleReferenceLoading"
+                          >
+                            <a-option
+                              v-for="opt in singleCountryOptions"
+                              :key="opt.value"
+                              :value="opt.value"
+                            >
+                              {{ opt.label }}
+                            </a-option>
+                          </a-select>
+                        </a-form-item>
+                        <a-form-item
+                          label="邮编"
+                          required
+                          :validate-status="fieldValidateStatus('receiver.zipCode')"
+                          :help="fieldHelp('receiver.zipCode')"
+                        >
+                          <a-input v-model="singleForm.receiver.zipCode" />
+                        </a-form-item>
+                        <a-form-item
+                          class="span-2"
+                          label="地址1"
+                          required
+                          :validate-status="fieldValidateStatus('receiver.streetAddress1')"
+                          :help="fieldHelp('receiver.streetAddress1')"
+                        >
+                          <a-input v-model="singleForm.receiver.streetAddress1" />
+                        </a-form-item>
+                      </div>
+                      <div class="recipient-optional-toggle">
+                        <button
+                          type="button"
+                          class="declaration-extra-btn"
+                          @click="showRecipientOptional = !showRecipientOptional"
+                        >
+                          {{
+                            showRecipientOptional
+                              ? t('order.placeOrder.single.hideRecipientOptional')
+                              : t('order.placeOrder.single.showRecipientOptional')
+                          }}
+                        </button>
+                      </div>
+                      <div
+                        v-show="showRecipientOptional"
+                        class="single-form-grid single-form-grid--compact recipient-optional-grid"
+                      >
+                        <a-form-item label="收件人公司"><a-input v-model="singleForm.receiver.companyName" /></a-form-item>
+                        <a-form-item label="收件人电话"><a-input v-model="singleForm.receiver.telePhone" /></a-form-item>
+                        <a-form-item label="收件人邮箱"><a-input v-model="singleForm.receiver.email" /></a-form-item>
+                        <a-form-item label="省/州"><a-input v-model="singleForm.receiver.province" /></a-form-item>
+                        <a-form-item label="城市"><a-input v-model="singleForm.receiver.city" /></a-form-item>
+                        <a-form-item label="门牌号"><a-input v-model="singleForm.receiver.streetNumber" /></a-form-item>
+                        <a-form-item label="地址2"><a-input v-model="singleForm.receiver.streetAddress2" /></a-form-item>
+                        <a-form-item label="地址3"><a-input v-model="singleForm.receiver.streetAddress3" /></a-form-item>
+                      </div>
+                    </div>
                   </div>
                 </section>
               </div>
@@ -3669,6 +3824,72 @@
     border-top: 1px dashed rgba(45, 140, 140, 0.18);
   }
 
+  .receiver-ai-paste {
+    height: 100%;
+    margin: 0;
+    padding: 12px;
+    border-radius: 10px;
+    border: 1px dashed color-mix(in srgb, var(--app-primary-color) 35%, #e5e6eb);
+    background: color-mix(in srgb, var(--app-primary-color) 6%, #fff);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .receiver-ai-paste__head {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-bottom: 8px;
+  }
+
+  .receiver-ai-paste__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1d2129;
+  }
+
+  .receiver-ai-paste__hint {
+    font-size: 12px;
+    color: #86909c;
+  }
+
+  .receiver-ai-paste__textarea {
+    flex: 1;
+
+    :deep(textarea) {
+      min-height: 160px;
+      font-size: 13px;
+      line-height: 1.5;
+      background: #fff;
+    }
+  }
+
+  .receiver-ai-paste__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+  }
+
+  .receiver-ai-paste__tip {
+    margin: 8px 0 0;
+    font-size: 12px;
+    line-height: 1.45;
+
+    &.is-ok {
+      color: #00a870;
+    }
+
+    &.is-warn {
+      color: #d48806;
+    }
+
+    &.is-danger {
+      color: #f53f3f;
+    }
+  }
+
   .declaration-card {
     min-width: 0;
     overflow: hidden;
@@ -4757,7 +4978,7 @@
 
   .single-cards-row {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
     gap: 12px;
     align-items: stretch;
   }
@@ -4768,6 +4989,27 @@
     min-width: 0;
   }
 
+  .single-info-card--recipient {
+    margin-top: 0;
+  }
+
+  .receiver-split {
+    display: grid;
+    grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.2fr);
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .receiver-split__paste,
+  .receiver-split__form {
+    min-width: 0;
+  }
+
+  .receiver-split__form {
+    display: flex;
+    flex-direction: column;
+  }
+
   .single-info-card__header {
     display: flex;
     align-items: center;
@@ -5340,11 +5582,21 @@
       grid-template-columns: 1fr;
     }
 
+    .receiver-split {
+      grid-template-columns: 1fr;
+    }
+
     .single-form-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
+  @media (max-width: 1100px) {
+    .receiver-split {
+      grid-template-columns: 1fr;
+    }
+  }
+
   @media (max-width: 768px) {
     .single-form-grid {
       grid-template-columns: 1fr;
diff --git a/src/views/system/announcement/index.vue b/src/views/system/announcement/index.vue
index 8c31d02..c8c8d6f 100644
--- a/src/views/system/announcement/index.vue
+++ b/src/views/system/announcement/index.vue
@@ -81,7 +81,6 @@
           :stretch-columns="true"
           :height="handsontableHeight"
           :read-only="true"
-          :enable-header-search="false"
           :enable-column-filter="false"
           :serial-no-header="t('system.announcement.table.index')"
           :action-column-header="t('system.announcement.table.actions')"
diff --git a/src/views/track/trackContent/index.vue b/src/views/track/trackContent/index.vue
index 0e64c42..166a702 100644
--- a/src/views/track/trackContent/index.vue
+++ b/src/views/track/trackContent/index.vue
@@ -38,6 +38,7 @@
     app: userStore.appKey,
   });
   const searchKeyword = ref('');
+  const headerSearchParams = reactive<Record<string, any>>({});
 
   const tableData = ref<any[]>([]);
   const totalCount = ref(0);
@@ -498,7 +499,7 @@
         :total="totalCount"
         :current-page="currentPage"
         :page-size="pageSize"
-        :search-params="{}"
+        :search-params="headerSearchParams"
         :show-action-column="true"
         :action-column-position="'end'"
         :action-column-width="110"
diff --git a/src/views/track/trackFlag/index.vue b/src/views/track/trackFlag/index.vue
index fa28547..cf3b3c4 100644
--- a/src/views/track/trackFlag/index.vue
+++ b/src/views/track/trackFlag/index.vue
@@ -33,6 +33,7 @@
     app: userStore.appKey,
   });
   const searchKeyword = ref('');
+  const headerSearchParams = reactive<Record<string, any>>({});
 
   const tableData = ref<any[]>([]);
   const totalCount = ref(0);
@@ -345,7 +346,7 @@
         :total="totalCount"
         :current-page="currentPage"
         :page-size="pageSize"
-        :search-params="{}"
+        :search-params="headerSearchParams"
         :show-action-column="true"
         :action-column-position="'end'"
         :action-column-width="110"
diff --git a/src/views/track/trackOrder/components/TrackOrderDetailDrawer.vue b/src/views/track/trackOrder/components/TrackOrderDetailDrawer.vue
index ee221ef..955fbca 100644
--- a/src/views/track/trackOrder/components/TrackOrderDetailDrawer.vue
+++ b/src/views/track/trackOrder/components/TrackOrderDetailDrawer.vue
@@ -67,6 +67,11 @@
               :columns="detailColumns"
               :data="detailTableData"
               :height="tableHeight"
+              :enable-header-search="false"
+              :auto-hybrid-header="false"
+              :enable-header-filter="false"
+              :enable-header-sort="false"
+              :show-active-filter-bar="false"
               @selection-change="handleDetailSelectionChange"
             />
           </div>
@@ -80,6 +85,11 @@
               :columns="pushRecordColumns"
               :data="pushRecordTableData"
               :height="tableHeight"
+              :enable-header-search="false"
+              :auto-hybrid-header="false"
+              :enable-header-filter="false"
+              :enable-header-sort="false"
+              :show-active-filter-bar="false"
             />
           </div>
         </div>
@@ -93,6 +103,11 @@
               :data="logTableData"
               :height="tableHeight"
               :stretch-columns="true"
+              :enable-header-search="false"
+              :auto-hybrid-header="false"
+              :enable-header-filter="false"
+              :enable-header-sort="false"
+              :show-active-filter-bar="false"
             />
           </div>
         </div>
@@ -106,6 +121,11 @@
                 :columns="pullConfigColumns"
                 :data="pullConfigTableData"
                 :height="pullConfigHandsontableHeight"
+                :enable-header-search="false"
+                :auto-hybrid-header="false"
+                :enable-header-filter="false"
+                :enable-header-sort="false"
+                :show-active-filter-bar="false"
               />
               <a-empty
                 v-else-if="!pullConfigLoading"
diff --git a/src/views/track/trackOrder/composables/useTrackOrderData.ts b/src/views/track/trackOrder/composables/useTrackOrderData.ts
index 9759547..6546cfb 100644
--- a/src/views/track/trackOrder/composables/useTrackOrderData.ts
+++ b/src/views/track/trackOrder/composables/useTrackOrderData.ts
@@ -2,7 +2,8 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { $baseMessage } from '@/utils';
 import { postGetTrackOrderList } from '@/api/TrackOrder/trackOrder';
-import { convertToTime } from '../utils';
+  import { convertToTime } from '../utils';
+  import { toServerSearchValue } from '@/components/HandsontablePro/filterValue';
 
 export function useTrackOrderData(options: {
   userStore: any;
@@ -37,8 +38,9 @@ export function useTrackOrderData(options: {
       // 合并searchInfo和searchParams，优先使用searchParams中的值
       // 处理客户单号：如果是逗号分隔的字符串，转换为数组
       let orderNos: string[] = [];
-      if (searchParams.orderNumber) {
-        orderNos = searchParams.orderNumber.split(',').map(v => v.trim()).filter(Boolean);
+      const orderNumberPlain = toServerSearchValue(searchParams.orderNumber || '');
+      if (orderNumberPlain) {
+        orderNos = orderNumberPlain.split(',').map((v: string) => v.trim()).filter(Boolean);
       } else if ((searchInfo as any).orderNos && Array.isArray((searchInfo as any).orderNos)) {
         orderNos = (searchInfo as any).orderNos;
       }
@@ -50,24 +52,24 @@ export function useTrackOrderData(options: {
         // 优先使用表头搜索的客户单号（已转换为数组），否则使用表单的客户单号
         orderNos: orderNos,
         trackOrderType: trackOrderType,
-        customer: searchParams.customer || '',
+        customer: toServerSearchValue(searchParams.customer || ''),
         // 添加所有新的搜索字段（尾程单号和其他单号保持逗号分隔的字符串格式）
-        trackNo: searchParams.trackNo || '',
-        otherNo: searchParams.otherNo || '',
-        product: searchParams.product || '',
-        channel: searchParams.channel || '',
-        apiCode: searchParams.apiCode || '',
-        countryCode: searchParams.countryCode || '',
-        province: searchParams.province || '',
-        city: searchParams.city || '',
-        postcode: searchParams.postcode || '',
-        email: searchParams.email || '',
-        newestTrackStatus: searchParams.newestTrackStatus || '',
-        newestTrackContent: searchParams.newestTrackContent || '',
-        newestTrackEnContent: searchParams.newestTrackEnContent || '',
+        trackNo: toServerSearchValue(searchParams.trackNo || ''),
+        otherNo: toServerSearchValue(searchParams.otherNo || ''),
+        product: toServerSearchValue(searchParams.product || ''),
+        channel: toServerSearchValue(searchParams.channel || ''),
+        apiCode: toServerSearchValue(searchParams.apiCode || ''),
+        countryCode: toServerSearchValue(searchParams.countryCode || ''),
+        province: toServerSearchValue(searchParams.province || ''),
+        city: toServerSearchValue(searchParams.city || ''),
+        postcode: toServerSearchValue(searchParams.postcode || ''),
+        email: toServerSearchValue(searchParams.email || ''),
+        newestTrackStatus: toServerSearchValue(searchParams.newestTrackStatus || ''),
+        newestTrackContent: toServerSearchValue(searchParams.newestTrackContent || ''),
+        newestTrackEnContent: toServerSearchValue(searchParams.newestTrackEnContent || ''),
         newestTrackTime: searchParams.newestTrackTime || '',
-        newestTrackTimeZone: searchParams.newestTrackTimeZone || '',
-        newestTrackPlace: searchParams.newestTrackPlace || '',
+        newestTrackTimeZone: toServerSearchValue(searchParams.newestTrackTimeZone || ''),
+        newestTrackPlace: toServerSearchValue(searchParams.newestTrackPlace || ''),
         isFinish: searchParams.isFinish !== '' ? searchParams.isFinish : undefined,
         createTimeStart: (searchParams as any).createTimeStart || (searchInfo as any).createTimeStart || '',
         createTimeEnd: (searchParams as any).createTimeEnd || (searchInfo as any).createTimeEnd || '',
diff --git a/src/views/track/trackOrder/config/tableColumns.ts b/src/views/track/trackOrder/config/tableColumns.ts
index cf048bf..6213a1d 100644
--- a/src/views/track/trackOrder/config/tableColumns.ts
+++ b/src/views/track/trackOrder/config/tableColumns.ts
@@ -4,29 +4,63 @@ import { useI18n } from 'vue-i18n';
 export function useTableColumns() {
   const { t } = useI18n();
 
+  // headerMode：inline 内嵌搜 / icon 仅图标(条件面板) / none 纯展示
   const columns = computed(() => [
-    { key: 'customer', label: t('track.order.table.customerShortName'), width: 120, searchable: true, searchField: 'customer' },
-    { key: 'orderNumber', label: t('track.order.table.orderNo'), width: 180, searchable: true, searchField: 'orderNumber', multiValue: true },
-    { key: 'trackNo', label: t('track.order.table.trackNo'), width: 180, searchable: true, searchField: 'trackNo', multiValue: true },
-    { key: 'otherNo', label: t('track.order.table.otherNo'), width: 180, searchable: true, searchField: 'otherNo', multiValue: true },
-    { key: 'product', label: t('track.order.table.product'), width: 150, searchable: true, searchField: 'product' },
-    { key: 'channel', label: t('track.order.table.channel'), width: 150, searchable: true, searchField: 'channel' },
-    { key: 'apiCode', label: t('track.order.table.apiCode'), width: 150, searchable: true, searchField: 'apiCode' },
-    { key: 'countryCode', label: t('track.order.table.countryCode'), width: 100, searchable: true, searchField: 'countryCode' },
-    { key: 'isFinish', label: t('track.order.table.isComplete'), width: 100, searchable: true, searchField: 'isFinish' },
-    { key: 'newestTrackStatus', label: t('track.order.table.latestTrajectoryStatus'), width: 150, searchable: true, searchField: 'newestTrackStatus' },
-    { key: 'newestTrackContent', label: t('track.order.table.latestTrajectoryContent'), width: 250, searchable: true, searchField: 'newestTrackContent' },
-    { key: 'newestTrackEnContent', label: t('track.order.table.latestTrajectoryContentEn'), width: 250, searchable: true, searchField: 'newestTrackEnContent' },
-    { key: 'newestTrackTime', label: t('track.order.table.latestTrajectoryTime'), width: 180, searchable: true, searchField: 'newestTrackTime' },
-    { key: 'newestTrackTimeZone', label: t('track.order.table.latestTrajectoryTimezone'), width: 120, searchable: true, searchField: 'newestTrackTimeZone' },
-    { key: 'newestTrackPlace', label: t('track.order.table.latestTrajectoryLocation'), width: 200, searchable: true, searchField: 'newestTrackPlace' },
-    { key: 'province', label: t('track.order.table.province'), width: 120, searchable: true, searchField: 'province' },
-    { key: 'city', label: t('track.order.table.city'), width: 120, searchable: true, searchField: 'city' },
-    { key: 'postcode', label: t('track.order.table.postcode'), width: 100, searchable: true, searchField: 'postcode' },
-    { key: 'email', label: t('track.order.table.email'), width: 200, searchable: true, searchField: 'email' },
-    { key: 'estimatedDeliveryDate', label: t('track.order.table.estimatedDeliveryTime'), width: 180, searchable: false },
-    { key: 'destinationTimeZone', label: t('track.order.table.deliveryTimezone'), width: 120, searchable: false },
-    { key: 'createTime', label: t('track.order.table.createTime'), width: 180, searchable: true, searchField: 'createTime' },
+    { key: 'customer', label: t('track.order.table.customerShortName'), width: 140, searchable: true, searchField: 'customer', headerMode: 'inline' as const },
+    { key: 'orderNumber', label: t('track.order.table.orderNo'), width: 200, searchable: true, searchField: 'orderNumber', multiValue: true, headerMode: 'inline' as const },
+    { key: 'trackNo', label: t('track.order.table.trackNo'), width: 200, searchable: true, searchField: 'trackNo', multiValue: true, headerMode: 'inline' as const },
+    { key: 'otherNo', label: t('track.order.table.otherNo'), width: 200, searchable: true, searchField: 'otherNo', multiValue: true, headerMode: 'inline' as const },
+    { key: 'product', label: t('track.order.table.product'), width: 150, searchable: true, searchField: 'product', headerMode: 'inline' as const },
+    { key: 'channel', label: t('track.order.table.channel'), width: 150, searchable: true, searchField: 'channel', headerMode: 'inline' as const },
+    { key: 'apiCode', label: t('track.order.table.apiCode'), width: 150, searchable: true, searchField: 'apiCode', headerMode: 'inline' as const },
+    { key: 'countryCode', label: t('track.order.table.countryCode'), width: 110, searchable: true, searchField: 'countryCode', headerMode: 'inline' as const },
+    {
+      key: 'isFinish',
+      label: t('track.order.table.isComplete'),
+      width: 110,
+      searchable: true,
+      searchField: 'isFinish',
+      headerMode: 'icon' as const,
+      filterType: 'enum' as const,
+      filterable: true,
+      filterOptions: [
+        { label: '是', value: 'true' },
+        { label: '否', value: 'false' },
+      ],
+    },
+    { key: 'newestTrackStatus', label: t('track.order.table.latestTrajectoryStatus'), width: 150, searchable: true, searchField: 'newestTrackStatus', headerMode: 'inline' as const },
+    { key: 'newestTrackContent', label: t('track.order.table.latestTrajectoryContent'), width: 250, searchable: true, searchField: 'newestTrackContent', headerMode: 'inline' as const },
+    { key: 'newestTrackEnContent', label: t('track.order.table.latestTrajectoryContentEn'), width: 250, searchable: true, searchField: 'newestTrackEnContent', headerMode: 'inline' as const },
+    {
+      key: 'newestTrackTime',
+      label: t('track.order.table.latestTrajectoryTime'),
+      width: 180,
+      searchable: true,
+      searchField: 'newestTrackTime',
+      headerMode: 'icon' as const,
+      filterType: 'date' as const,
+      filterable: true,
+      sortable: true,
+    },
+    { key: 'newestTrackTimeZone', label: t('track.order.table.latestTrajectoryTimezone'), width: 120, searchable: true, searchField: 'newestTrackTimeZone', headerMode: 'inline' as const },
+    { key: 'newestTrackPlace', label: t('track.order.table.latestTrajectoryLocation'), width: 200, searchable: true, searchField: 'newestTrackPlace', headerMode: 'inline' as const },
+    { key: 'province', label: t('track.order.table.province'), width: 120, searchable: true, searchField: 'province', headerMode: 'inline' as const },
+    { key: 'city', label: t('track.order.table.city'), width: 120, searchable: true, searchField: 'city', headerMode: 'inline' as const },
+    { key: 'postcode', label: t('track.order.table.postcode'), width: 100, searchable: true, searchField: 'postcode', headerMode: 'inline' as const },
+    { key: 'email', label: t('track.order.table.email'), width: 200, searchable: true, searchField: 'email', headerMode: 'inline' as const },
+    { key: 'estimatedDeliveryDate', label: t('track.order.table.estimatedDeliveryTime'), width: 180, searchable: false, headerMode: 'none' as const, sortable: true },
+    { key: 'destinationTimeZone', label: t('track.order.table.deliveryTimezone'), width: 120, searchable: false, headerMode: 'none' as const },
+    {
+      key: 'createTime',
+      label: t('track.order.table.createTime'),
+      width: 180,
+      searchable: true,
+      searchField: 'createTime',
+      headerMode: 'icon' as const,
+      filterType: 'date' as const,
+      filterable: true,
+      sortable: true,
+    },
   ]);
 
   return {
diff --git a/src/views/track/trackState/index.vue b/src/views/track/trackState/index.vue
index 29c544c..b6d1579 100644
--- a/src/views/track/trackState/index.vue
+++ b/src/views/track/trackState/index.vue
@@ -33,6 +33,7 @@
     app: userStore.appKey,
   });
   const searchKeyword = ref('');
+  const headerSearchParams = reactive<Record<string, any>>({});
 
   const tableData = ref<any[]>([]);
   const totalCount = ref(0);
@@ -383,7 +384,7 @@
         :total="totalCount"
         :current-page="currentPage"
         :page-size="pageSize"
-        :search-params="{}"
+        :search-params="headerSearchParams"
         :show-action-column="true"
         :action-column-position="'end'"
         :action-column-width="110"