diff --git a/.cursor/rules/Code-Standards.mdc b/.cursor/rules/Code-Standards.mdc
index ced6a183..28434c60 100644
--- a/.cursor/rules/Code-Standards.mdc
+++ b/.cursor/rules/Code-Standards.mdc
@@ -44,6 +44,26 @@ alwaysApply: true
 - HTTP 请求统一用 `requestClient`（来自 `#/api/request`），**禁止直接 axios / fetch**
 - 行操作和工具栏按钮统一用 `<TableAction>` 组件（来自 `#/components/table-action`）
 - 业务选择器（员工、医生、门店、推广员、地区等）必须复用 `#/components/form/components/*-picker.vue`，不要重写
+- **卡片统一用液态玻璃组件**：新增/改动的卡片一律用 `GlassCard`（`#/components/glass-card`），禁止再手写一套 `backdrop-filter` 玻璃样式或新起 antd `Card`；历史页面暂不强制回改
+- 列表页需要「列表/卡片」双视图时：`useViewMode` + `ViewModeSwitch`（`#/components/view-mode-switch`）切换，卡片模式用 `GlassCardList`（分页拉数）+ `#card` 插槽里放 `GlassCard`；搜索表单抽到页面顶部两种视图共用（参考 `business/order/product-order/index.vue`）
+- **GlassCard 底部操作按钮（强制）**：统一用 `CardActions`（`#/components/table-action`），默认即玻璃胶囊（`variant` 默认 `glass`：半透明底 + blur + 1px 同色系边框微光；主操作 primary、危险 destructive）；布局默认 `layout="fill"` 等分沾满 footer，需要居中时显式 `layout="center"`；尺寸用 `size`：`xs` 超级小 / `sm` 小 / `md` 中(默认) / `lg` 大 / `half` 沾满一半 / `full` 沾满整行。放在 `GlassCard` 的 `#footer` 插槽里，**禁止**再在卡片里用 antd `Button` / `TableAction` 的 link 文字链或灰框 default 按钮；禁止包一层 `flex justify-end` 把按钮挤到一角。示例：
+
+  ```vue
+  <GlassCard ...>
+    <!-- 内容 -->
+    <template #footer>
+      <CardActions
+        size="md"
+        :max-visible="3"
+        :actions="[
+          { label: '绑定等级', icon: 'lucide:link-2', onClick: ... },
+          { label: '编辑', icon: 'lucide:pencil', onClick: ... },
+          { label: '删除', icon: 'lucide:trash-2', danger: true, popConfirm: ... },
+        ]"
+      />
+    </template>
+  </GlassCard>
+  ```
 
 ## API 层规范
 
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index e1f3ed36..7cd20076 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/desktop",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": true,
   "description": "萧康云医 PC 桌面端（Electron 壳，打包加载 web-antd 生产构建产物）",
   "author": "萧康云医",
diff --git a/apps/web-antd/src/api/core/file-gallery.ts b/apps/web-antd/src/api/core/file-gallery.ts
index 480f6850..52cb757c 100644
--- a/apps/web-antd/src/api/core/file-gallery.ts
+++ b/apps/web-antd/src/api/core/file-gallery.ts
@@ -30,9 +30,26 @@ export interface FileTypeItem {
   sort: number;
 }
 
+/** 扫描写入的引用位置（详情展示，含表/字段注释） */
+export interface FileGalleryRefLoc {
+  connection: string;
+  connection_text: string;
+  table: string;
+  /** 表 COMMENT，可能为空 */
+  table_comment?: string;
+  column: string;
+  /** 字段 COMMENT，可能为空 */
+  column_comment?: string;
+  count: number;
+  label: string;
+}
+
 export interface FileGalleryDetail extends FileGalleryItem {
   source_text?: string;
   updated_at?: string;
+  ref_scanned_at?: number | string;
+  /** 引用位置列表，未扫描或未命中为空数组 */
+  ref_locs?: FileGalleryRefLoc[];
 }
 
 export interface FileGalleryStats {
@@ -43,6 +60,8 @@ export interface FileGalleryStats {
   recyclable_size: number;
   recyclable_size_text: string;
   has_scanned: boolean;
+  /** 上次 OSS 同步完成日期 YYYYMMDD，空表示尚未同步 */
+  oss_last_sync_date?: string;
 }
 
 export interface FileGalleryListParams {
@@ -53,6 +72,9 @@ export interface FileGalleryListParams {
   group_id?: number;
   keyword?: string;
   exclude_qrcode?: number;
+  /** all|referenced|unreferenced */
+  ref_filter?: string;
+  /** @deprecated 用 ref_filter=unreferenced */
   unref_only?: number;
   folder_id?: number;
   unfiled?: number;
@@ -97,31 +119,36 @@ export async function getFileTypes() {
   return requestClient.get<FileTypeItem[]>(`${prefix}file-types`);
 }
 
-/** 规划 OSS 同步日期分组（full 全部 / incremental 从库内最新日期起） */
-export async function planFileGalleryOssSync(data?: { mode?: 'full' | 'incremental' }) {
+/** 规划 OSS 同步日期分组（full 全部 / incremental 从上次同步日期起） */
+export async function planFileGalleryOssSync(data?: {
+  mode?: 'full' | 'incremental';
+}) {
   return requestClient.post<{
+    last_sync_date: string;
     mode: 'full' | 'incremental';
     prefixes: string[];
-    total: number;
     since_date: string;
+    total: number;
   }>(`${prefix}sync-oss-plan`, data ?? {});
 }
 
-/** 从 OSS 同步一批（按日期 prefix + marker；全部组结束后 finalize=1） */
+/** 从 OSS 同步一批（按日期 prefix + marker；全部组结束后 finalize=1 并落库 last_sync_date） */
 export async function syncFileGalleryFromOss(data?: {
+  finalize?: number;
+  last_sync_date?: string;
   limit?: number;
   marker?: string;
   prefix?: string;
-  finalize?: number;
 }) {
   return requestClient.post<{
+    done: boolean;
+    folder_created: number;
+    last_sync_date?: string;
+    next_marker: string;
+    prefix: string;
     scanned: number;
     skipped: number;
     synced: number;
-    next_marker: string;
-    done: boolean;
-    folder_created: number;
-    prefix: string;
   }>(`${prefix}sync-oss`, data ?? {});
 }
 
@@ -157,18 +184,57 @@ export async function markFileQrcode(id: number, is_qrcode: number) {
   );
 }
 
-/** 扫描业务表 URL 引用（两库全表文本列） */
-export async function scanFileGalleryRefs() {
+/** 扫描计划中的单表：pending 未开始 / scanning 扫描中 / done 完成 */
+export interface FileRefScanTableItem {
+  connection: string;
+  table: string;
+  /** 兼容字段，等同 total_columns */
+  columns: number;
+  total_columns?: number;
+  done_columns?: number;
+  failed: number;
+  status?: 'done' | 'pending' | 'scanning';
+}
+
+/** 预览将扫描的表清单（全部 pending，不开始扫） */
+export async function planFileGalleryScanRefs() {
+  return requestClient.get<{
+    column_total: number;
+    plan_tables: FileRefScanTableItem[];
+    table_count: number;
+  }>(`${prefix}scan-refs-plan`);
+}
+
+/** 分批扫描业务表 URL 引用；循环传 job_id 直到 done，支持断点续扫 */
+export async function scanFileGalleryRefs(data?: {
+  batch_size?: number;
+  job_id?: string;
+}) {
   return requestClient.post<{
-    elapsed_ms: number;
+    batch_size: number;
+    batch_tables?: FileRefScanTableItem[];
+    current_table?: string;
+    done: boolean;
+    done_table_count?: number;
+    elapsed_ms?: number;
+    job_id: string;
     mysql_columns: number;
     mysql_failed: number;
     old_mysql_columns: number;
     old_mysql_failed: number;
-    referenced: number;
-    scanned_files: number;
-    unreferenced: number;
-  }>(`${prefix}scan-refs`);
+    pending_table_count?: number;
+    phase: string;
+    plan_tables?: FileRefScanTableItem[];
+    processed: number;
+    progress: number;
+    referenced?: number;
+    scanned_files?: number;
+    scanned_tables?: FileRefScanTableItem[];
+    scanning_table_count?: number;
+    table_count?: number;
+    total: number;
+    unreferenced?: number;
+  }>(`${prefix}scan-refs`, data ?? {});
 }
 
 /** 批量加入分组（移动到文件夹） */
diff --git a/apps/web-antd/src/components/address-paste-block/AddressPasteBlock.vue b/apps/web-antd/src/components/address-paste-block/AddressPasteBlock.vue
new file mode 100644
index 00000000..ecbc8762
--- /dev/null
+++ b/apps/web-antd/src/components/address-paste-block/AddressPasteBlock.vue
@@ -0,0 +1,516 @@
+<script lang="ts" setup>
+/**
+ * PC 管理端：粘贴识别收货地址区块
+ * 粘贴并识别合一；覆盖已填字段前弹确认（自定义 Modal，非浏览器原生 confirm）
+ */
+import { computed, onBeforeUnmount, ref } from 'vue';
+
+import { Button, Input, Modal } from 'ant-design-vue';
+
+import { getAddressSurnames } from '#/util/address-dict-api';
+import {
+  ADDRESS_PASTE_EXAMPLES,
+  confidenceMark,
+  ensureSurnamesLoaded,
+  recognizeAddress,
+} from '#/util/address-recognizer.js';
+
+export type AddressRecognizeResult = {
+  area: string;
+  city: string;
+  confidence: {
+    detail: number;
+    name: number;
+    phone: number;
+    region: number;
+  };
+  detail: string;
+  name: string;
+  phone: string;
+  province: string;
+};
+
+export type AddressFilledFlags = {
+  detail?: boolean;
+  name?: boolean;
+  phone?: boolean;
+  region?: boolean;
+};
+
+export type AddressCurrentValues = {
+  detail?: string;
+  name?: string;
+  phone?: string;
+  region?: string;
+};
+
+export type OverwriteDiffRow = {
+  label: string;
+  newVal: string;
+  oldVal: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    /** 当前表单文案，覆盖确认展示「旧 → 新」 */
+    currentValues?: AddressCurrentValues;
+    /** 表单已填标记，用于判断是否需要覆盖确认 */
+    filled?: AddressFilledFlags;
+  }>(),
+  {
+    filled: () => ({
+      name: false,
+      phone: false,
+      region: false,
+      detail: false,
+    }),
+    currentValues: () => ({
+      name: '',
+      phone: '',
+      region: '',
+      detail: '',
+    }),
+  },
+);
+
+const emit = defineEmits<{
+  recognized: [AddressRecognizeResult];
+}>();
+
+const pasteText = ref('');
+const recognizing = ref(false);
+const hasPreview = ref(false);
+const examplesVisible = ref(false);
+const overwriteVisible = ref(false);
+const pendingResult = ref<AddressRecognizeResult | null>(null);
+const overwriteRows = ref<OverwriteDiffRow[]>([]);
+const preview = ref<AddressRecognizeResult>({
+  name: '',
+  phone: '',
+  province: '',
+  city: '',
+  area: '',
+  detail: '',
+  confidence: { name: 0, phone: 0, region: 0, detail: 0 },
+});
+
+let debounceTimer: null | ReturnType<typeof setTimeout> = null;
+
+const regionText = computed(() =>
+  [preview.value.province, preview.value.city, preview.value.area]
+    .filter(Boolean)
+    .join(''),
+);
+
+const examples = ADDRESS_PASTE_EXAMPLES;
+
+function displayOrEmpty(v?: string) {
+  const t = String(v || '').trim();
+  return t || '空';
+}
+
+function markOf(score: number) {
+  return confidenceMark(score);
+}
+
+function markClass(score: number) {
+  const s = Number(score) || 0;
+  if (s >= 0.8) return 'mark-ok';
+  if (s >= 0.5) return 'mark-mid';
+  return 'mark-bad';
+}
+
+/** 粘贴并识别：有输入则识别，否则读剪贴板再识别 */
+async function onPasteAndRecognize() {
+  const raw = String(pasteText.value || '').trim();
+  if (raw) {
+    runRecognize(raw);
+    return;
+  }
+  try {
+    const text = await navigator.clipboard.readText();
+    if (!text?.trim()) return;
+    pasteText.value = text;
+    runRecognize(text);
+  } catch {
+    // 浏览器可能拦截剪贴板
+  }
+}
+
+function onClickExample(ex: string) {
+  pasteText.value = ex;
+  examplesVisible.value = false;
+  runRecognize(ex);
+}
+
+/** 识别结果会覆盖哪些已填字段（含旧→新） */
+function collectOverwriteRows(
+  result: AddressRecognizeResult,
+): OverwriteDiffRow[] {
+  const filled = props.filled || {};
+  const cur = props.currentValues || {};
+  const rows: OverwriteDiffRow[] = [];
+  if (result.name && filled.name) {
+    rows.push({
+      label: '姓名',
+      oldVal: displayOrEmpty(cur.name),
+      newVal: displayOrEmpty(result.name),
+    });
+  }
+  if (result.phone && filled.phone) {
+    rows.push({
+      label: '电话',
+      oldVal: displayOrEmpty(cur.phone),
+      newVal: displayOrEmpty(result.phone),
+    });
+  }
+  if ((result.province || result.city || result.area) && filled.region) {
+    const newRegion = [result.province, result.city, result.area]
+      .filter(Boolean)
+      .join('');
+    rows.push({
+      label: '地区',
+      oldVal: displayOrEmpty(cur.region),
+      newVal: displayOrEmpty(newRegion),
+    });
+  }
+  if (result.detail && filled.detail) {
+    rows.push({
+      label: '详细地址',
+      oldVal: displayOrEmpty(cur.detail),
+      newVal: displayOrEmpty(result.detail),
+    });
+  }
+  return rows;
+}
+
+function emitOrConfirm(result: AddressRecognizeResult) {
+  const rows = collectOverwriteRows(result);
+  if (rows.length > 0) {
+    pendingResult.value = result;
+    overwriteRows.value = rows;
+    overwriteVisible.value = true;
+    return;
+  }
+  emit('recognized', result);
+}
+
+function confirmOverwrite() {
+  const result = pendingResult.value;
+  overwriteVisible.value = false;
+  pendingResult.value = null;
+  overwriteRows.value = [];
+  if (result) emit('recognized', result);
+}
+
+function cancelOverwrite() {
+  overwriteVisible.value = false;
+  pendingResult.value = null;
+  overwriteRows.value = [];
+}
+
+/**
+ * 识别前先拉姓氏表（会话内只请求一次），失败则用本地兜底
+ */
+async function runRecognize(text: string) {
+  const raw = String(text || '').trim();
+  if (!raw) {
+    hasPreview.value = false;
+    return;
+  }
+  recognizing.value = true;
+  try {
+    await ensureSurnamesLoaded(async () => {
+      const data = await getAddressSurnames();
+      return data;
+    });
+    const result = recognizeAddress(raw) as AddressRecognizeResult;
+    preview.value = result;
+    hasPreview.value = true;
+    emitOrConfirm(result);
+  } finally {
+    recognizing.value = false;
+  }
+}
+
+onBeforeUnmount(() => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+});
+</script>
+
+<template>
+  <div class="address-paste-block">
+    <div class="paste-head">
+      <div class="paste-title">智能识别地址</div>
+      <Button
+        type="link"
+        size="small"
+        class="format-link"
+        @click="examplesVisible = true"
+      >
+        查看格式
+      </Button>
+    </div>
+    <Input.TextArea
+      v-model:value="pasteText"
+      :rows="3"
+      :maxlength="500"
+      placeholder="粘贴或输入地址文本"
+    />
+    <div class="paste-actions">
+      <Button type="primary" size="small" @click="onPasteAndRecognize">
+粘贴并识别
+</Button>
+    </div>
+    <div v-if="recognizing" class="loading-bar">
+      <div class="loading-inner"></div>
+    </div>
+    <div v-if="hasPreview" class="preview-card">
+      <div class="preview-row">
+        <span class="preview-label">姓名</span>
+        <span class="preview-val">{{ preview.name || '—' }}</span>
+        <span class="preview-mark" :class="markClass(preview.confidence.name)">
+          {{ markOf(preview.confidence.name) }}
+        </span>
+      </div>
+      <div class="preview-row">
+        <span class="preview-label">电话</span>
+        <span class="preview-val">{{ preview.phone || '—' }}</span>
+        <span class="preview-mark" :class="markClass(preview.confidence.phone)">
+          {{ markOf(preview.confidence.phone) }}
+        </span>
+      </div>
+      <div class="preview-row">
+        <span class="preview-label">地区</span>
+        <span class="preview-val">{{ regionText || '—' }}</span>
+        <span
+          class="preview-mark"
+          :class="markClass(preview.confidence.region)"
+        >
+          {{ markOf(preview.confidence.region) }}
+        </span>
+      </div>
+      <div class="preview-row">
+        <span class="preview-label">详细</span>
+        <span class="preview-val">{{ preview.detail || '—' }}</span>
+        <span
+          class="preview-mark"
+          :class="markClass(preview.confidence.detail)"
+        >
+          {{ markOf(preview.confidence.detail) }}
+        </span>
+      </div>
+    </div>
+
+    <Modal
+      v-model:open="examplesVisible"
+      title="示例格式"
+      :footer="null"
+      :width="520"
+      destroy-on-close
+    >
+      <div class="examples-tip">点击一条即可填入并识别</div>
+      <button
+        v-for="(ex, idx) in examples"
+        :key="idx"
+        type="button"
+        class="example-item"
+        @click="onClickExample(ex)"
+      >
+        {{ ex }}
+      </button>
+    </Modal>
+
+    <Modal
+      v-model:open="overwriteVisible"
+      title="确认覆盖？"
+      :width="420"
+      ok-text="确认覆盖"
+      cancel-text="取消"
+      destroy-on-close
+      @ok="confirmOverwrite"
+      @cancel="cancelOverwrite"
+    >
+      <p class="overwrite-tip">以下字段已有内容，识别结果将覆盖：</p>
+      <div class="overwrite-list">
+        <div
+          v-for="(row, idx) in overwriteRows"
+          :key="idx"
+          class="overwrite-row"
+        >
+          <div class="overwrite-label">{{ row.label }}</div>
+          <div class="overwrite-diff">{{ row.oldVal }} → {{ row.newVal }}</div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<style scoped>
+.address-paste-block {
+  padding: 12px 14px;
+  margin-bottom: 12px;
+  background: hsl(var(--primary) / 8%);
+  border: 1px solid hsl(var(--primary) / 30%);
+  border-radius: 8px;
+  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+}
+
+.paste-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.paste-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.format-link {
+  height: auto;
+  padding: 0;
+}
+
+.paste-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.loading-bar {
+  height: 3px;
+  margin-top: 8px;
+  overflow: hidden;
+  background: hsl(var(--primary) / 15%);
+  border-radius: 2px;
+}
+
+.loading-inner {
+  width: 40%;
+  height: 100%;
+  background: hsl(var(--primary));
+  animation: paste-loading 1s ease-in-out infinite;
+}
+
+@keyframes paste-loading {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+.preview-card {
+  padding: 8px 10px;
+  margin-top: 8px;
+  background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+}
+
+.preview-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 4px 0;
+  font-size: 12px;
+}
+
+.preview-label {
+  flex-shrink: 0;
+  width: 36px;
+  color: hsl(var(--muted-foreground));
+}
+
+.preview-val {
+  flex: 1;
+  color: hsl(var(--foreground));
+  word-break: break-all;
+}
+
+.preview-mark {
+  flex-shrink: 0;
+  width: 20px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.mark-ok {
+  color: #00b42a;
+}
+
+.mark-mid {
+  color: #ff7d00;
+}
+
+.mark-bad {
+  color: #f53f3f;
+}
+
+.examples-tip {
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.example-item {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: hsl(var(--foreground));
+  text-align: left;
+  cursor: pointer;
+  background: hsl(var(--muted) / 25%);
+  border: 1px solid hsl(var(--primary) / 25%);
+  border-radius: 4px;
+}
+
+.example-item:hover {
+  border-color: hsl(var(--primary) / 50%);
+}
+
+.overwrite-tip {
+  margin: 0;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+}
+
+.overwrite-list {
+  padding: 8px 12px;
+  margin-top: 10px;
+  background: hsl(var(--muted) / 25%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+}
+
+.overwrite-row {
+  padding: 8px 0;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.overwrite-row:last-child {
+  border-bottom: none;
+}
+
+.overwrite-label {
+  margin-bottom: 2px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.overwrite-diff {
+  font-size: 13px;
+  line-height: 1.45;
+  color: hsl(var(--foreground));
+  word-break: break-all;
+}
+</style>
diff --git a/apps/web-antd/src/components/form/components/api-log-route-picker.vue b/apps/web-antd/src/components/form/components/api-log-route-picker.vue
new file mode 100644
index 00000000..3729c454
--- /dev/null
+++ b/apps/web-antd/src/components/form/components/api-log-route-picker.vue
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+/**
+ * Api 日志「api接口」选择器：接诊式标题/首拼/全拼搜索，选中后回填 url。
+ * 端由页面 Tab 的 platformType 锁定，避免跨端搜到无关路由。
+ */
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { useDebounceFn, useVModel } from '@vueuse/core';
+import { Empty, Input, Popover, Spin, Tag } from 'ant-design-vue';
+
+import { searchApiRouteMap } from '#/views/log/api-route-map/api';
+
+defineOptions({
+  name: 'ApiLogRoutePicker',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    platformType?: number;
+    /** 选中后存完整 url，与日志列表 router 参数对齐 */
+    value?: ApiLogRouteFilter | string;
+  }>(),
+  {
+    platformType: 0,
+  },
+);
+
+const emits = defineEmits<{
+  'update:value': [value: string | undefined];
+}>();
+
+export type ApiLogRouteFilter = {
+  method: number;
+  method_txt?: string;
+  pinyin_display?: string;
+  title: string;
+  url: string;
+};
+
+const mValue = useVModel(props, 'value', emits, { passive: true });
+
+const open = ref(false);
+const loading = ref(false);
+const searchKeyword = ref('');
+const options = ref<any[]>([]);
+const searchInputRef = ref<InstanceType<typeof Input> | null>(null);
+
+/** 展示用：兼容旧字符串 url 与对象 */
+const selectedLabel = computed(() => {
+  const v = mValue.value;
+  if (!v) return '';
+  if (typeof v === 'string') return v;
+  return v.title ? `${v.title}（${v.url}）` : v.url;
+});
+
+const selectedUrl = computed(() => {
+  const v = mValue.value;
+  if (!v) return '';
+  return typeof v === 'string' ? v : v.url;
+});
+
+async function fetchOptions() {
+  const keyword = searchKeyword.value.trim();
+  if (!keyword) {
+    options.value = [];
+    return;
+  }
+  loading.value = true;
+  try {
+    const result = await searchApiRouteMap({
+      keyword,
+      platform_type: props.platformType,
+      pageSize: 24,
+    });
+    options.value = result?.items ?? [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+const debouncedFetch = useDebounceFn(fetchOptions, 300);
+
+watch(searchKeyword, () => {
+  debouncedFetch();
+});
+
+watch(
+  () => props.platformType,
+  () => {
+    mValue.value = undefined;
+    options.value = [];
+    searchKeyword.value = '';
+  },
+);
+
+function selectOption(item: any) {
+  // 列表查询只吃 url 字符串
+  mValue.value = String(item.url || '');
+  open.value = false;
+  searchKeyword.value = '';
+  options.value = [];
+}
+
+function clearSelection(e: Event) {
+  e.stopPropagation();
+  mValue.value = undefined;
+}
+
+function onOpenChange(next: boolean) {
+  if (props.disabled) return;
+  open.value = next;
+  if (next) {
+    searchKeyword.value = '';
+    options.value = [];
+    nextTick(() => searchInputRef.value?.focus?.());
+  }
+}
+</script>
+
+<template>
+  <Popover
+    :open="open"
+    trigger="click"
+    placement="bottomLeft"
+    overlay-class-name="api-log-route-picker-popover"
+    @open-change="onOpenChange"
+  >
+    <template #content>
+      <div class="api-log-route-panel">
+        <Input
+          ref="searchInputRef"
+          v-model:value="searchKeyword"
+          allow-clear
+          placeholder="标题 / 首拼 / 全拼 / 路由"
+          class="api-log-route-search"
+        />
+        <Spin :spinning="loading">
+          <div v-if="options.length" class="api-log-route-list">
+            <button
+              v-for="item in options"
+              :key="`${item.url}-${item.method}`"
+              type="button"
+              class="api-log-route-card"
+              :class="{ active: selectedUrl === item.url }"
+              @click="selectOption(item)"
+            >
+              <div class="api-log-route-card-main">
+                <div class="api-log-route-card-title">
+                  {{ item.title || '未命名接口' }}
+                </div>
+                <div class="api-log-route-card-url" :title="item.url">
+                  {{ item.url }}
+                </div>
+                <div v-if="item.pinyin_display" class="api-log-route-card-py">
+                  {{ item.pinyin_display }}
+                </div>
+              </div>
+              <Tag
+                :color="
+                  Number(item.method) === 1
+                    ? 'blue'
+                    : Number(item.method) === 2
+                      ? 'green'
+                      : 'default'
+                "
+              >
+                {{ item.method_txt || '—' }}
+              </Tag>
+            </button>
+          </div>
+          <Empty
+            v-else
+            :description="
+              searchKeyword.trim() ? '无匹配接口' : '输入标题或拼音搜索'
+            "
+            class="api-log-route-empty"
+          />
+        </Spin>
+      </div>
+    </template>
+    <div class="api-log-route-trigger" :class="{ disabled }">
+      <div v-if="selectedUrl" class="api-log-route-selected">
+        <div class="api-log-route-selected-text" :title="selectedLabel">
+          {{ selectedLabel }}
+        </div>
+        <span
+          v-if="!disabled"
+          class="api-log-route-clear"
+          @click="clearSelection"
+        >
+          ×
+        </span>
+      </div>
+      <div v-else class="api-log-route-placeholder">请选择 api 接口</div>
+    </div>
+  </Popover>
+</template>
+
+<style scoped lang="scss">
+.api-log-route-trigger {
+  width: 100%;
+}
+
+.api-log-route-trigger.disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.api-log-route-trigger:not(.disabled) {
+  cursor: pointer;
+}
+
+.api-log-route-selected {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 40px;
+  padding: 6px 10px;
+  background: hsl(var(--muted) / 25%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.api-log-route-selected-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.api-log-route-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: hsl(var(--muted-foreground));
+  border: 1px dashed hsl(var(--border));
+  border-radius: 8px;
+
+  &:hover {
+    color: hsl(var(--primary));
+    border-color: hsl(var(--primary) / 55%);
+  }
+}
+
+.api-log-route-clear {
+  flex-shrink: 0;
+  padding: 0 4px;
+  font-size: 16px;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+
+  &:hover {
+    color: hsl(var(--foreground));
+  }
+}
+</style>
+
+<style lang="scss">
+.api-log-route-picker-popover {
+  .ant-popover-inner {
+    padding: 12px;
+    background: hsl(var(--card, var(--background)));
+    border: 1px solid hsl(var(--border));
+  }
+
+  .api-log-route-panel {
+    width: 420px;
+    max-width: 86vw;
+  }
+
+  .api-log-route-search {
+    margin-bottom: 10px;
+  }
+
+  .api-log-route-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 320px;
+    overflow-y: auto;
+  }
+
+  .api-log-route-card {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    width: 100%;
+    padding: 8px 10px;
+    text-align: left;
+    cursor: pointer;
+    background: hsl(var(--card, var(--background)));
+    border: 1px solid hsl(var(--border));
+    border-radius: 8px;
+
+    &:hover,
+    &.active {
+      background: hsl(var(--primary) / 8%);
+      border-color: hsl(var(--primary) / 35%);
+      box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+    }
+  }
+
+  .api-log-route-card-main {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .api-log-route-card-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 13px;
+    font-weight: 500;
+    color: hsl(var(--foreground));
+    white-space: nowrap;
+  }
+
+  .api-log-route-card-url {
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 11px;
+    color: hsl(var(--muted-foreground));
+    white-space: nowrap;
+  }
+
+  .api-log-route-card-py {
+    margin-top: 2px;
+    font-size: 11px;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .api-log-route-empty {
+    margin: 16px 0;
+    color: hsl(var(--muted-foreground));
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/form/components/api-log-user-picker.vue b/apps/web-antd/src/components/form/components/api-log-user-picker.vue
index 1dab28d8..17266ac7 100644
--- a/apps/web-antd/src/components/form/components/api-log-user-picker.vue
+++ b/apps/web-antd/src/components/form/components/api-log-user-picker.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
+/**
+ * Api 访问日志操作用户选择器
+ * 端由页面 Tab 锁定（userType）；搜索拆成「按 ID」与「按姓名/手机号」两套，互不混搜。
+ * 候选卡用横向小长方形 + 角色小标签；颜色走主题变量以适配亮/暗色。
+ */
 import { computed, nextTick, ref, watch } from 'vue';
 
 import { useDebounceFn, useVModel } from '@vueuse/core';
-import { Avatar, Empty, Input, Popover, Spin, Tabs, Tag } from 'ant-design-vue';
+import { Avatar, Empty, Input, Popover, Segmented, Spin } from 'ant-design-vue';
 
 import { searchApiLogUsers } from '#/views/log/api-log/api';
 
@@ -11,48 +16,68 @@ defineOptions({
   inheritAttrs: false,
 });
 
-export type ApiLogUserFilter = {
-  id: number;
-  user_type: 'admin' | 'patient' | 'doctor';
-  platform_type: 0 | 1 | 2;
-  name: string;
-  role_label: string;
-  avatar?: string;
-};
-
-type ApiLogUserOption = ApiLogUserFilter;
-
-type UserTab = 'admin' | 'patient' | 'doctor';
-
-const props = defineProps<{
-  value?: ApiLogUserFilter;
-  disabled?: boolean;
-  onPlatformTypeChange?: (platformType: 0 | 1 | 2) => void;
-}>();
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    platformType?: 0 | 1 | 2;
+    /** 由页面端 Tab 锁定，决定搜哪类用户 */
+    userType?: UserType;
+    value?: ApiLogUserFilter;
+  }>(),
+  {
+    userType: 'admin',
+    platformType: 0,
+  },
+);
 
 const emits = defineEmits<{
   'update:value': [value: ApiLogUserFilter | undefined];
 }>();
 
+export type ApiLogUserFilter = {
+  avatar?: string;
+  id: number;
+  name: string;
+  platform_type: 0 | 1 | 2;
+  role_label: string;
+  user_type: 'admin' | 'doctor' | 'patient';
+};
+
+type ApiLogUserOption = ApiLogUserFilter;
+type UserType = 'admin' | 'doctor' | 'patient';
+type SearchMode = 'id' | 'text';
+
 const mValue = useVModel(props, 'value', emits, { passive: true });
 
 const open = ref(false);
 const loading = ref(false);
+/** id=精确用户 ID；text=姓名/手机号模糊 */
+const searchMode = ref<SearchMode>('text');
 const searchKeyword = ref('');
-const activeTab = ref<UserTab>('admin');
 const options = ref<ApiLogUserOption[]>([]);
 const searchInputRef = ref<InstanceType<typeof Input> | null>(null);
 
-const TAB_ITEMS = [
-  { key: 'admin', label: '后台用户' },
-  { key: 'patient', label: '患者端用户' },
-  { key: 'doctor', label: '医生端用户' },
-] as const;
+/** 第二档文案随端变化：患者无手机号字段，只提示用户名 */
+const searchModeOptions = computed(() => [
+  { label: '按 ID', value: 'id' },
+  {
+    label: props.userType === 'patient' ? '按用户名' : '姓名/手机号',
+    value: 'text',
+  },
+]);
 
 const searchPlaceholder = computed(() => {
-  if (activeTab.value === 'admin') return '搜索手机号或昵称';
-  if (activeTab.value === 'patient') return '搜索用户名字';
-  return '搜索名字或手机号';
+  if (searchMode.value === 'id') return '输入用户 ID（精确）';
+  if (props.userType === 'patient') return '搜索用户名';
+  if (props.userType === 'doctor') return '搜索名字 / 手机号';
+  return '搜索昵称 / 手机号';
+});
+
+const emptyHint = computed(() => {
+  if (!searchKeyword.value.trim()) {
+    return searchMode.value === 'id' ? '请输入用户 ID' : '请输入姓名或手机号';
+  }
+  return '无匹配用户';
 });
 
 async function fetchOptions() {
@@ -61,12 +86,17 @@ async function fetchOptions() {
     options.value = [];
     return;
   }
-
+  // ID 模式只接受正整数，避免无意义请求
+  if (searchMode.value === 'id' && !/^\d+$/.test(keyword)) {
+    options.value = [];
+    return;
+  }
   loading.value = true;
   try {
     const result = await searchApiLogUsers({
-      user_type: activeTab.value,
+      user_type: props.userType,
       keyword,
+      search_mode: searchMode.value,
       pageSize: 24,
     });
     options.value = result?.items ?? [];
@@ -77,10 +107,28 @@ async function fetchOptions() {
 
 const debouncedFetch = useDebounceFn(fetchOptions, 300);
 
-watch([searchKeyword, activeTab], () => {
+watch(searchKeyword, () => {
   debouncedFetch();
 });
 
+watch(searchMode, () => {
+  // 切换模式清空关键词与结果，避免带着上一模式的输入去混搜
+  searchKeyword.value = '';
+  options.value = [];
+  nextTick(() => searchInputRef.value?.focus?.());
+});
+
+watch(
+  () => props.userType,
+  () => {
+    // 切端后清空已选与候选，避免串端
+    mValue.value = undefined;
+    options.value = [];
+    searchKeyword.value = '';
+    searchMode.value = 'text';
+  },
+);
+
 function selectOption(item: ApiLogUserOption) {
   mValue.value = {
     id: item.id,
@@ -90,7 +138,6 @@ function selectOption(item: ApiLogUserOption) {
     role_label: item.role_label,
     avatar: item.avatar,
   };
-  props.onPlatformTypeChange?.(item.platform_type);
   open.value = false;
   searchKeyword.value = '';
   options.value = [];
@@ -129,22 +176,22 @@ watch(
   >
     <template #content>
       <div class="api-log-user-panel">
-        <Tabs v-model:active-key="activeTab" size="small" class="api-log-user-tabs">
-          <Tabs.TabPane
-            v-for="tab in TAB_ITEMS"
-            :key="tab.key"
-            :tab="tab.label"
-          />
-        </Tabs>
+        <Segmented
+          v-model:value="searchMode"
+          :options="searchModeOptions"
+          block
+          class="api-log-user-mode"
+        />
         <Input
           ref="searchInputRef"
           v-model:value="searchKeyword"
           allow-clear
           :placeholder="searchPlaceholder"
+          :inputmode="searchMode === 'id' ? 'numeric' : 'text'"
           class="api-log-user-search"
         />
         <Spin :spinning="loading">
-          <div v-if="options.length" class="api-log-user-grid">
+          <div v-if="options.length" class="api-log-user-list">
             <button
               v-for="item in options"
               :key="`${item.user_type}-${item.id}`"
@@ -152,39 +199,45 @@ watch(
               class="api-log-user-card"
               :class="{
                 active:
-                  mValue?.id === item.id && mValue?.user_type === item.user_type,
+                  mValue?.id === item.id &&
+                  mValue?.user_type === item.user_type,
               }"
               @click="selectOption(item)"
             >
-              <Avatar :src="item.avatar" :size="30">
+              <Avatar :src="item.avatar" :size="32">
                 {{ (item.name || '?').charAt(0) }}
               </Avatar>
-              <div class="api-log-user-card-id">#{{ item.id }}</div>
-              <div class="api-log-user-card-name" :title="item.name">
-                {{ item.name }}
+              <div class="api-log-user-card-main">
+                <div class="api-log-user-card-name" :title="item.name">
+                  {{ item.name || '—' }}
+                </div>
+                <div class="api-log-user-card-id">#{{ item.id }}</div>
               </div>
-              <Tag class="api-log-user-card-role" :bordered="false">
-                {{ item.role_label }}
-              </Tag>
+              <span
+                class="api-log-role-chip"
+                :class="`is-${item.user_type}`"
+                :title="item.role_label || '未设角色'"
+              >
+                {{ item.role_label || '未设角色' }}
+              </span>
             </button>
           </div>
-          <Empty
-            v-else
-            :description="searchKeyword.trim() ? '无匹配用户' : '请输入关键词搜索'"
-            class="api-log-user-empty"
-          />
+          <Empty v-else :description="emptyHint" class="api-log-user-empty" />
         </Spin>
       </div>
     </template>
-    <div class="api-log-user-trigger" :class="{ disabled: disabled }">
+    <div class="api-log-user-trigger" :class="{ disabled }">
       <div v-if="mValue" class="api-log-selected-card">
-        <Avatar :src="mValue.avatar" :size="36">
+        <Avatar :src="mValue.avatar" :size="32">
           {{ (mValue.name || '?').charAt(0) }}
         </Avatar>
         <div class="api-log-selected-meta">
           <div class="api-log-selected-name">{{ mValue.name }}</div>
           <div class="api-log-selected-sub">
-            #{{ mValue.id }} · {{ mValue.role_label }}
+            <span>#{{ mValue.id }}</span>
+            <span class="api-log-role-chip" :class="`is-${mValue.user_type}`">
+              {{ mValue.role_label || '未设角色' }}
+            </span>
           </div>
         </div>
         <span
@@ -201,8 +254,6 @@ watch(
 </template>
 
 <style scoped lang="scss">
-@use './picker-card-theme.scss' as theme;
-
 .api-log-user-trigger {
   width: 100%;
 }
@@ -217,75 +268,146 @@ watch(
 }
 
 .api-log-selected-card {
-  @include theme.picker-selected-card;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  padding: 6px 10px;
+  cursor: pointer;
+  background: hsl(var(--muted) / 25%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  &:hover {
+    border-color: hsl(var(--primary) / 45%);
+    box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+  }
 }
 
 .api-log-selected-meta {
-  min-width: 0;
   flex: 1;
+  min-width: 0;
 }
 
 .api-log-selected-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1d2129;
-  line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: hsl(var(--foreground));
   white-space: nowrap;
 }
 
 .api-log-selected-sub {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-top: 2px;
   font-size: 12px;
-  color: #86909c;
   line-height: 1.4;
+  color: hsl(var(--muted-foreground));
 }
 
 .api-log-trigger-placeholder {
-  @include theme.picker-trigger-placeholder;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  border: 1px dashed hsl(var(--border));
+  border-radius: 8px;
+  transition:
+    border-color 0.2s,
+    color 0.2s;
+
+  &:hover {
+    color: hsl(var(--primary));
+    border-color: hsl(var(--primary) / 55%);
+  }
 }
 
 .api-log-clear-btn {
-  @include theme.picker-clear-btn;
+  flex-shrink: 0;
+  padding: 0 4px;
+  font-size: 16px;
+  line-height: 1;
+  color: hsl(var(--muted-foreground));
+  pointer-events: auto;
+  cursor: pointer;
+
+  &:hover {
+    color: hsl(var(--foreground));
+  }
 }
 
-.dark {
-  .api-log-selected-card {
-    @include theme.picker-selected-card-dark-props;
+/* 角色小长方形标签：选中区与下拉候选共用 */
+.api-log-role-chip {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  max-width: 7.5em;
+  height: 20px;
+  padding: 0 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  line-height: 20px;
+  color: hsl(var(--primary));
+  white-space: nowrap;
+  background: hsl(var(--primary) / 12%);
+  border: 1px solid hsl(var(--primary) / 30%);
+  border-radius: 3px;
+  box-shadow: 0 0 4px hsl(var(--primary) / 12%);
+
+  &.is-admin {
+    color: hsl(var(--primary));
+    background: hsl(var(--primary) / 12%);
+    border-color: hsl(var(--primary) / 30%);
   }
 
-  .api-log-selected-name {
-    @include theme.picker-text-primary-dark;
+  &.is-doctor {
+    color: hsl(142deg 45% 38%);
+    background: hsl(142deg 45% 38% / 12%);
+    border-color: hsl(142deg 45% 38% / 30%);
   }
 
-  .api-log-selected-sub {
-    @include theme.picker-text-secondary-dark;
-  }
-
-  .api-log-trigger-placeholder {
-    @include theme.picker-placeholder-dark-props;
-  }
-
-  .api-log-clear-btn {
-    @include theme.picker-clear-dark-props;
+  &.is-patient {
+    color: hsl(var(--warning));
+    background: hsl(var(--warning) / 12%);
+    border-color: hsl(var(--warning) / 30%);
   }
 }
 </style>
 
 <style lang="scss">
-@use './picker-card-theme.scss' as theme;
-
+/* Popover 挂到 body，需非 scoped；一律用主题变量，亮/暗自动跟 */
 .api-log-user-picker-popover {
   .ant-popover-inner {
     padding: 12px;
+    background: hsl(var(--card, var(--background)));
+    border: 1px solid hsl(var(--border));
+  }
+
+  .ant-popover-inner-content {
+    color: hsl(var(--foreground));
   }
 
   .api-log-user-panel {
-    width: 540px;
+    width: 420px;
     max-width: 86vw;
   }
 
-  .api-log-user-tabs {
+  .api-log-user-mode {
+    width: 100%;
     margin-bottom: 8px;
   }
 
@@ -293,54 +415,103 @@ watch(
     margin-bottom: 10px;
   }
 
-  .api-log-user-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
-    gap: 8px;
-    max-height: 300px;
-    overflow-y: auto;
+  /* 纵向列表：每项横向小长方形，信息可读 */
+  .api-log-user-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 320px;
     padding: 2px;
+    overflow-y: auto;
   }
 
   .api-log-user-card {
-    @include theme.picker-card-base;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    width: 100%;
+    min-height: 48px;
+    padding: 8px 10px;
+    text-align: left;
+    cursor: pointer;
+    background: hsl(var(--card, var(--background)));
+    border: 1px solid hsl(var(--border));
+    border-radius: 8px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s,
+      background-color 0.2s;
+
+    &:hover,
+    &.active {
+      background: hsl(var(--primary) / 8%);
+      border-color: hsl(var(--primary) / 35%);
+      box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+    }
   }
 
-  .api-log-user-card-id {
-    @include theme.picker-card-sub;
+  .api-log-user-card-main {
+    flex: 1;
+    min-width: 0;
   }
 
   .api-log-user-card-name {
-    @include theme.picker-card-name;
-  }
-
-  .api-log-user-card-role {
-    margin: 0;
-    font-size: 11px;
-    line-height: 18px;
-    padding: 0 6px;
-    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.3;
+    color: hsl(var(--foreground));
+    white-space: nowrap;
+  }
+
+  .api-log-user-card-id {
+    margin-top: 2px;
+    font-size: 11px;
+    line-height: 1.2;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .api-log-role-chip {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    max-width: 7.5em;
+    height: 20px;
+    padding: 0 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 11px;
+    line-height: 20px;
+    color: hsl(var(--primary));
+    white-space: nowrap;
+    background: hsl(var(--primary) / 12%);
+    border: 1px solid hsl(var(--primary) / 30%);
+    border-radius: 3px;
+    box-shadow: 0 0 4px hsl(var(--primary) / 12%);
+
+    &.is-admin {
+      color: hsl(var(--primary));
+      background: hsl(var(--primary) / 12%);
+      border-color: hsl(var(--primary) / 30%);
+    }
+
+    &.is-doctor {
+      color: hsl(142deg 45% 38%);
+      background: hsl(142deg 45% 38% / 12%);
+      border-color: hsl(142deg 45% 38% / 30%);
+    }
+
+    &.is-patient {
+      color: hsl(var(--warning));
+      background: hsl(var(--warning) / 12%);
+      border-color: hsl(var(--warning) / 30%);
+    }
   }
 
   .api-log-user-empty {
     margin: 16px 0;
-  }
-}
-
-.dark .api-log-user-picker-popover {
-  .api-log-user-card {
-    @include theme.picker-card-dark-props;
-  }
-
-  .api-log-user-card-name {
-    @include theme.picker-text-primary-dark;
-  }
-
-  .api-log-user-card-id {
-    @include theme.picker-text-secondary-dark;
+    color: hsl(var(--muted-foreground));
   }
 }
 </style>
-
diff --git a/apps/web-antd/src/components/glass-card/GlassCard.vue b/apps/web-antd/src/components/glass-card/GlassCard.vue
new file mode 100644
index 00000000..5959583f
--- /dev/null
+++ b/apps/web-antd/src/components/glass-card/GlassCard.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+/**
+ * 通用液态玻璃卡片（Apple Liquid Glass 风格）
+ *
+ * 视觉：半透明卡片底 + 背景模糊饱和 + 顶部内高光 + 左上角高光反射 + 1px 同色系边框与微光
+ * （遵守规范：禁止左侧竖色条，统一「1px 同色系边框 + 微光」）。颜色全部走主题变量，自动适配暗色。
+ *
+ * 为什么封装：多个页面（消息、发票、公户、业务员看板、素材库、VIP 等）都要同一种卡片质感，
+ * 统一在这里维护，页面只关心内容；新增/改动的卡片一律用本组件，不要再手写一套玻璃样式。
+ *
+ * 用法：
+ *   <GlassCard title="标题" subtitle="说明" tone="success" hoverable>
+ *     <template #extra><Button>操作</Button></template>
+ *     内容
+ *   </GlassCard>
+ */
+import { computed, useSlots } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+defineOptions({ name: 'GlassCard' });
+
+const props = withDefaults(
+  defineProps<{
+    /** 选中态（如 VIP 等级选择），边框与微光加强 */
+    active?: boolean;
+    /** 内容区额外 class */
+    bodyClass?: string;
+    /** 可点击：鼠标手型 + 键盘回车触发 click */
+    clickable?: boolean;
+    /** 悬停上浮 + 加强微光，适合列表卡片 */
+    hoverable?: boolean;
+    /** 标题左侧图标（iconify 名称，如 lucide:wallet） */
+    icon?: string;
+    /** 内边距档位 */
+    padding?: 'lg' | 'md' | 'none' | 'sm';
+    /** 是否带左上高光反射层（密集小卡片可关掉减少视觉噪音） */
+    specular?: boolean;
+    subtitle?: string;
+    title?: string;
+    /** 主题色变量名（不带 --）：primary / success / warning / destructive 等，决定边框、微光、图标颜色 */
+    tone?: string;
+  }>(),
+  {
+    title: '',
+    subtitle: '',
+    icon: '',
+    tone: 'primary',
+    hoverable: false,
+    clickable: false,
+    active: false,
+    padding: 'md',
+    specular: true,
+    bodyClass: '',
+  },
+);
+
+const emit = defineEmits<{ click: [event: KeyboardEvent | MouseEvent] }>();
+const slots = useSlots();
+
+/** 有标题、副标题、图标或对应插槽时才渲染头部，避免空头部占高度 */
+const hasHeader = computed(
+  () =>
+    !!(
+      props.title ||
+      props.subtitle ||
+      props.icon ||
+      slots.title ||
+      slots.extra
+    ),
+);
+
+function onClick(event: MouseEvent) {
+  if (props.clickable) emit('click', event);
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (props.clickable && event.key === 'Enter') emit('click', event);
+}
+</script>
+
+<template>
+  <div
+    class="glass-card"
+    :class="[
+      `glass-card--pad-${padding}`,
+      {
+        'glass-card--hoverable': hoverable || clickable,
+        'glass-card--clickable': clickable,
+        'glass-card--active': active,
+      },
+    ]"
+    :style="{ '--glass-tone': `var(--${tone})` }"
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    @click="onClick"
+    @keydown="onKeydown"
+  >
+    <div v-if="specular" class="glass-card__specular" aria-hidden="true"></div>
+    <div v-if="hasHeader" class="glass-card__head">
+      <div class="glass-card__head-main">
+        <span v-if="icon" class="glass-card__icon">
+          <IconifyIcon :icon="icon" />
+        </span>
+        <div class="glass-card__titles">
+          <div class="glass-card__title">
+            <slot name="title">{{ title }}</slot>
+          </div>
+          <div v-if="subtitle || $slots.subtitle" class="glass-card__subtitle">
+            <slot name="subtitle">{{ subtitle }}</slot>
+          </div>
+        </div>
+      </div>
+      <div v-if="$slots.extra" class="glass-card__extra" @click.stop>
+        <slot name="extra"></slot>
+      </div>
+    </div>
+    <div class="glass-card__body" :class="bodyClass">
+      <slot></slot>
+    </div>
+    <div v-if="$slots.footer" class="glass-card__footer" @click.stop>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/*
+ * --glass-specular：高光色 HSL 三元组；暗色下降低亮度，让高光更含蓄
+ * 只作用于本组件根节点，不改全局主题变量
+ */
+.glass-card {
+  --glass-specular: 0 0% 100%;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  color: hsl(var(--foreground));
+  background: linear-gradient(
+    150deg,
+    hsl(var(--card) / 72%),
+    hsl(var(--card) / 46%)
+  );
+  border: 1px solid hsl(var(--glass-tone) / 18%);
+  border-radius: 18px;
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 55%),
+    inset 0 -1px 0 hsl(var(--glass-specular) / 8%),
+    0 0 6px hsl(var(--glass-tone) / 10%),
+    0 10px 30px hsl(var(--foreground) / 5%);
+  backdrop-filter: blur(24px) saturate(180%);
+  transition:
+    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 0.35s ease,
+    border-color 0.35s ease;
+}
+
+.dark .glass-card {
+  --glass-specular: 0 0% 62%;
+}
+
+.glass-card--pad-none {
+  padding: 0;
+}
+
+.glass-card--pad-sm {
+  padding: 12px 14px;
+}
+
+.glass-card--pad-md {
+  padding: 16px 18px;
+}
+
+.glass-card--pad-lg {
+  padding: 20px 24px;
+}
+
+.glass-card--hoverable:hover,
+.glass-card--active {
+  border-color: hsl(var(--glass-tone) / 40%);
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 70%),
+    0 0 10px hsl(var(--glass-tone) / 18%),
+    0 16px 38px hsl(var(--glass-tone) / 12%);
+}
+
+.glass-card--hoverable:hover {
+  transform: translateY(-2px);
+}
+
+.glass-card--clickable {
+  cursor: pointer;
+}
+
+.glass-card--clickable:focus-visible {
+  outline: 2px solid hsl(var(--glass-tone) / 60%);
+  outline-offset: 2px;
+}
+
+/* 液态玻璃高光：左上斜向反射 + 右上主题色折射 */
+.glass-card__specular {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      120% 60% at 0% 0%,
+      hsl(var(--glass-specular) / 22%) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      60% 80% at 100% 0%,
+      hsl(var(--glass-tone) / 10%) 0%,
+      transparent 70%
+    );
+}
+
+.glass-card__head,
+.glass-card__body,
+.glass-card__footer {
+  position: relative;
+}
+
+.glass-card__head {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.glass-card--pad-none .glass-card__head {
+  padding: 16px 18px 0;
+}
+
+.glass-card__head-main {
+  display: flex;
+  flex: 1;
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
+}
+
+.glass-card__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 17px;
+  color: hsl(var(--glass-tone));
+  background: hsl(var(--glass-tone) / 12%);
+  border: 1px solid hsl(var(--glass-tone) / 20%);
+  border-radius: 10px;
+  box-shadow: inset 0 1px 0 hsl(var(--glass-specular) / 40%);
+}
+
+.glass-card__titles {
+  min-width: 0;
+}
+
+.glass-card__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.glass-card__subtitle {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: hsl(var(--muted-foreground));
+}
+
+.glass-card__extra {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  align-items: center;
+}
+
+.glass-card__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.glass-card__footer {
+  width: 100%;
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid hsl(var(--border) / 60%);
+}
+</style>
diff --git a/apps/web-antd/src/components/glass-card/GlassCardList.vue b/apps/web-antd/src/components/glass-card/GlassCardList.vue
new file mode 100644
index 00000000..5759388b
--- /dev/null
+++ b/apps/web-antd/src/components/glass-card/GlassCardList.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+/**
+ * 通用「卡片视图」列表容器（配合 ViewModeSwitch 的 card 模式使用）
+ *
+ * 职责：按页拉数 + 分页 + 加载态 + 空态 + 自适应网格；每张卡片长什么样由页面通过 #card 插槽决定，
+ * 卡片外壳建议直接用 GlassCard。
+ *
+ * 为什么分页而不是无限滚动：内层滚动 + 触底追加会和页面滚动抢滚轮（商品订单卡片踩过的坑），
+ * 分页由页面统一滚动更稳定。
+ *
+ * 用法：
+ *   <GlassCardList ref="cardListRef" :fetcher="getXxxList" :form-values="searchValues">
+ *     <template #card="{ row }"><GlassCard hoverable>...</GlassCard></template>
+ *   </GlassCardList>
+ *   刷新：cardListRef.value?.reload()（回第 1 页） / refreshKeepPage()（留在当前页）
+ */
+import { onMounted, ref, watch } from 'vue';
+
+import { Empty, Pagination, Spin } from 'ant-design-vue';
+
+defineOptions({ name: 'GlassCardList' });
+
+const props = withDefaults(
+  defineProps<{
+    emptyText?: string;
+    /** 额外固定参数（如 Tab 状态），与 formValues 合并 */
+    extraParams?: Record<string, any>;
+    /** 列表接口，入参会自动带 page / pageSize + formValues，返回 { items, total } */
+    fetcher: (params: Record<string, any>) => Promise<any>;
+    /** 顶部搜索条件，变化后自动回第 1 页重拉 */
+    formValues?: Record<string, any>;
+    /** 卡片最小宽度，网格按此自适应列数 */
+    minCardWidth?: number;
+    pageSize?: number;
+    /** 接口返回不是 { items, total } 时自定义解析 */
+    parseResponse?: (res: any) => { items: T[]; total: number };
+    rowKey?: string;
+  }>(),
+  {
+    formValues: () => ({}),
+    extraParams: () => ({}),
+    pageSize: 12,
+    minCardWidth: 320,
+    rowKey: 'id',
+    emptyText: '暂无数据',
+    parseResponse: undefined,
+  },
+);
+
+const items = ref<T[]>([]) as { value: T[] };
+const page = ref(1);
+const size = ref(props.pageSize);
+const total = ref(0);
+const loading = ref(false);
+const rootEl = ref<HTMLElement | null>(null);
+/** 请求序号：只应用最后一次响应，避免快速切换筛选时旧结果覆盖新列表 */
+let requestSeq = 0;
+
+/** 默认按 vxe 适配器口径解析 { items, total } */
+function parse(res: any) {
+  if (props.parseResponse) return props.parseResponse(res);
+  return {
+    items: (res?.items ?? res?.list ?? []) as T[],
+    total: Number(res?.total ?? 0),
+  };
+}
+
+async function fetchPage(target: number) {
+  const seq = ++requestSeq;
+  loading.value = true;
+  try {
+    const res = await props.fetcher({
+      ...props.formValues,
+      ...props.extraParams,
+      page: target,
+      pageSize: size.value,
+    });
+    if (seq !== requestSeq) return;
+    const parsed = parse(res);
+    items.value = parsed.items;
+    total.value = parsed.total;
+    page.value = target;
+  } catch (error) {
+    if (seq === requestSeq) console.error('卡片列表加载失败:', error);
+  } finally {
+    if (seq === requestSeq) loading.value = false;
+  }
+}
+
+/** 回第 1 页重拉（筛选变化 / 新增后） */
+async function reload() {
+  await fetchPage(1);
+}
+
+/** 原地刷新当前页（编辑、审核等操作后，避免跳回第 1 页） */
+async function refreshKeepPage() {
+  // 当前页最后一条被删掉后回退一页，避免停在空白页
+  const lastPage = Math.max(1, Math.ceil((total.value - 1) / size.value));
+  await fetchPage(
+    items.value.length === 1 && page.value > lastPage ? lastPage : page.value,
+  );
+}
+
+/**
+ * 翻页后滚回卡片区顶部
+ * 为什么不用 scrollIntoView：会带动整页滚动，和外层 overflow-y-auto 叠成双滚动条抖动
+ */
+async function onPageChange(next: number, nextSize: number) {
+  if (nextSize === size.value) {
+    await fetchPage(next);
+  } else {
+    size.value = nextSize;
+    await fetchPage(1);
+  }
+  const el = rootEl.value;
+  if (!el) return;
+  const scroller = el.closest(
+    '.overflow-y-auto, .overflow-auto',
+  ) as HTMLElement | null;
+  if (scroller) {
+    scroller.scrollTo({ top: 0, behavior: 'smooth' });
+  } else {
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}
+
+defineExpose({ reload, refreshKeepPage, items });
+
+watch(
+  () => [props.formValues, props.extraParams],
+  () => void reload(),
+  { deep: true },
+);
+
+onMounted(() => void reload());
+</script>
+
+<template>
+  <div ref="rootEl" class="glass-card-list">
+    <Spin :spinning="loading">
+      <div
+        v-if="items.length > 0"
+        class="glass-card-list__grid"
+        :style="{ '--gcl-min': `${minCardWidth}px` }"
+      >
+        <template v-for="(row, index) in items" :key="row[rowKey] ?? index">
+          <slot name="card" :row="row" :index="index"></slot>
+        </template>
+      </div>
+      <div v-else class="glass-card-list__empty">
+        <Empty :description="loading ? '加载中…' : emptyText" />
+      </div>
+    </Spin>
+    <div v-if="total > 0" class="glass-card-list__pager">
+      <Pagination
+        :current="page"
+        :page-size="size"
+        :total="total"
+        :page-size-options="['12', '24', '48', '96']"
+        show-size-changer
+        show-quick-jumper
+        :show-total="(t: number) => `共 ${t} 条`"
+        @change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.glass-card-list__grid {
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(var(--gcl-min), 100%), 1fr)
+  );
+  gap: 14px;
+}
+
+.glass-card-list__empty {
+  padding: 48px 0;
+}
+
+.glass-card-list__pager {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 16px;
+}
+</style>
diff --git a/apps/web-antd/src/components/glass-card/index.ts b/apps/web-antd/src/components/glass-card/index.ts
new file mode 100644
index 00000000..510fe494
--- /dev/null
+++ b/apps/web-antd/src/components/glass-card/index.ts
@@ -0,0 +1,7 @@
+/**
+ * 液态玻璃卡片组件出口
+ * - GlassCard：卡片外壳（新增/改动的卡片统一使用）
+ * - GlassCardList：卡片视图列表容器（列表/卡片双视图的 card 模式）
+ */
+export { default as GlassCard } from './GlassCard.vue';
+export { default as GlassCardList } from './GlassCardList.vue';
diff --git a/apps/web-antd/src/components/glass-tag/GlassTag.vue b/apps/web-antd/src/components/glass-tag/GlassTag.vue
new file mode 100644
index 00000000..2b1e3e22
--- /dev/null
+++ b/apps/web-antd/src/components/glass-tag/GlassTag.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+/**
+ * 通用液态玻璃标签（芯片）
+ *
+ * 视觉：胶囊圆角 + 半透明底 + 顶部内高光 + 同色微光；悬停时轻上浮并播放主题色粒子
+ * 为什么封装：详情对照药等多处需要同一种玻璃芯片；粒子默认仅 hover 开，避免密集列表每颗都常驻 RAF
+ *
+ * 用法：
+ *   <GlassTag tone="primary">黄芪 10g → 炙黄芪</GlassTag>
+ *   <GlassTag tone="destructive" :particles="false">关闭粒子</GlassTag>
+ */
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+
+defineOptions({ name: 'GlassTag' });
+
+const props = withDefaults(
+  defineProps<{
+    /** 是否启用悬停上浮 / 微光加强 */
+    interactive?: boolean;
+    /** 是否启用粒子（默认 true；仅 hover 时播放） */
+    particles?: boolean;
+    /** 尺寸：sm 适合密集药名芯片 */
+    size?: 'md' | 'sm';
+    /** 原生 title 提示 */
+    title?: string;
+    /** 主题色：default 走 border；其余走主题变量 */
+    tone?: 'default' | 'destructive' | 'primary' | 'success' | 'warning';
+  }>(),
+  {
+    tone: 'default',
+    size: 'sm',
+    title: '',
+    interactive: true,
+    particles: true,
+  },
+);
+
+const rootRef = ref<HTMLElement | null>(null);
+const particleRef = ref<HTMLCanvasElement | null>(null);
+const hovering = ref(false);
+
+type Particle = {
+  a: number;
+  r: number;
+  vx: number;
+  vy: number;
+  x: number;
+  y: number;
+};
+
+let particles: Particle[] = [];
+let particleRaf = 0;
+let reducedMotion = false;
+
+/** 映射到 CSS 变量名（不带 --），default 用 border */
+const toneVar = computed(() => {
+  if (props.tone === 'default') return 'border';
+  return props.tone;
+});
+
+/** 读取当前 tone 的 HSL 通道，供 canvas 粒子着色 */
+function toneChannels(): string {
+  const name = toneVar.value;
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue(`--${name}`)
+    .trim();
+  if (raw) return raw;
+  // border 在部分主题可能不是三通道，回落 primary
+  return (
+    getComputedStyle(document.documentElement)
+      .getPropertyValue('--primary')
+      .trim() || '162 72% 38%'
+  );
+}
+
+function resizeCanvas(el: HTMLCanvasElement, cssW: number, cssH: number) {
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  el.width = Math.max(1, Math.floor(cssW * dpr));
+  el.height = Math.max(1, Math.floor(cssH * dpr));
+  el.style.width = `${cssW}px`;
+  el.style.height = `${cssH}px`;
+  const ctx = el.getContext('2d');
+  if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  return ctx;
+}
+
+/** 初始化少量粒子（芯片很小，8～14 颗即可） */
+function initParticles(w: number, h: number) {
+  const n = Math.max(8, Math.min(14, Math.floor((w * h) / 180)));
+  particles = Array.from({ length: n }, () => ({
+    x: Math.random() * w,
+    y: Math.random() * h,
+    vx: (Math.random() - 0.5) * 0.35,
+    vy: (Math.random() - 0.5) * 0.35,
+    r: 0.6 + Math.random() * 1.2,
+    a: 0.18 + Math.random() * 0.35,
+  }));
+}
+
+function stopParticles() {
+  if (particleRaf) {
+    cancelAnimationFrame(particleRaf);
+    particleRaf = 0;
+  }
+  const el = particleRef.value;
+  if (el) {
+    const ctx = el.getContext('2d');
+    if (ctx) ctx.clearRect(0, 0, el.width, el.height);
+  }
+  particles = [];
+}
+
+function loopParticles() {
+  const el = particleRef.value;
+  const root = rootRef.value;
+  if (!el || !root || !hovering.value) return;
+  const rect = root.getBoundingClientRect();
+  const w = Math.max(1, rect.width);
+  const h = Math.max(1, rect.height);
+  const ctx = resizeCanvas(el, w, h);
+  if (!ctx) return;
+  if (particles.length === 0) initParticles(w, h);
+  const ch = toneChannels();
+  ctx.clearRect(0, 0, w, h);
+  for (const p of particles) {
+    if (!reducedMotion) {
+      p.x += p.vx;
+      p.y += p.vy;
+      if (p.x < 0 || p.x > w) p.vx *= -1;
+      if (p.y < 0 || p.y > h) p.vy *= -1;
+    }
+    ctx.beginPath();
+    ctx.fillStyle = `hsl(${ch} / ${p.a})`;
+    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  if (!reducedMotion && hovering.value) {
+    particleRaf = requestAnimationFrame(loopParticles);
+  }
+}
+
+function onEnter() {
+  if (!props.interactive) return;
+  hovering.value = true;
+  if (!props.particles) return;
+  reducedMotion = window.matchMedia?.(
+    '(prefers-reduced-motion: reduce)',
+  )?.matches;
+  stopParticles();
+  // 下一帧再画，确保尺寸已稳定
+  requestAnimationFrame(() => {
+    if (hovering.value) loopParticles();
+  });
+}
+
+function onLeave() {
+  hovering.value = false;
+  stopParticles();
+}
+
+watch(
+  () => [props.particles, props.interactive] as const,
+  ([p, i]) => {
+    if (!p || !i) {
+      hovering.value = false;
+      stopParticles();
+    }
+  },
+);
+
+onBeforeUnmount(() => {
+  stopParticles();
+});
+</script>
+
+<template>
+  <span
+    ref="rootRef"
+    class="glass-tag"
+    :class="[
+      `glass-tag--${size}`,
+      `glass-tag--tone-${tone}`,
+      {
+        'glass-tag--interactive': interactive,
+        'is-hover': hovering,
+      },
+    ]"
+    :style="{ '--glass-tag-tone': `var(--${toneVar})` }"
+    :title="title || undefined"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+  >
+    <!-- 粒子层：仅 hover 时由 canvas 绘制 -->
+    <canvas
+      v-if="particles"
+      ref="particleRef"
+      class="glass-tag__particles"
+      aria-hidden="true"
+    ></canvas>
+    <!-- 左上高光反射，对齐 GlassCard specular -->
+    <span class="glass-tag__specular" aria-hidden="true"></span>
+    <span class="glass-tag__content">
+      <slot></slot>
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.glass-tag {
+  --glass-specular: 0 0% 100%;
+
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+  align-items: center;
+  max-width: 100%;
+  overflow: hidden;
+  font-weight: 500;
+  line-height: 1.4;
+  color: hsl(var(--foreground));
+  background: linear-gradient(
+    150deg,
+    hsl(var(--card, var(--background)) / 78%),
+    hsl(var(--card, var(--background)) / 48%)
+  );
+  border: 1px solid hsl(var(--glass-tag-tone) / 30%);
+
+  /* 胶囊圆角：芯片统一 pill，不要方形小圆角 */
+  border-radius: 999px;
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 55%),
+    inset 0 -1px 0 hsl(var(--glass-specular) / 8%),
+    0 0 6px hsl(var(--glass-tag-tone) / 18%);
+  backdrop-filter: blur(14px) saturate(170%);
+  transition:
+    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 0.22s ease,
+    border-color 0.22s ease;
+}
+
+.dark .glass-tag {
+  --glass-specular: 0 0% 62%;
+}
+
+.glass-tag--sm {
+  min-height: 24px;
+  padding: 3px 10px;
+  font-size: 12px;
+}
+
+.glass-tag--md {
+  min-height: 28px;
+  padding: 4px 12px;
+  font-size: 13px;
+}
+
+.glass-tag--tone-default {
+  border-color: hsl(var(--border));
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 45%),
+    0 0 4px hsl(var(--foreground) / 6%);
+}
+
+.glass-tag--tone-destructive {
+  border-color: hsl(var(--destructive) / 40%);
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 45%),
+    0 0 6px hsl(var(--destructive) / 16%);
+}
+
+.glass-tag--interactive {
+  cursor: default;
+}
+
+.glass-tag--interactive:hover,
+.glass-tag--interactive.is-hover {
+  border-color: hsl(var(--glass-tag-tone) / 48%);
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 70%),
+    0 0 12px hsl(var(--glass-tag-tone) / 28%),
+    0 6px 14px hsl(var(--glass-tag-tone) / 12%);
+  transform: translateY(-1px);
+}
+
+.glass-tag--interactive:active {
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 50%),
+    0 0 8px hsl(var(--glass-tag-tone) / 20%);
+  transform: translateY(0);
+}
+
+.glass-tag__particles {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.glass-tag__specular {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      120% 60% at 0% 0%,
+      hsl(var(--glass-specular) / 22%) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      60% 80% at 100% 0%,
+      hsl(var(--glass-tag-tone) / 12%) 0%,
+      transparent 70%
+    );
+  border-radius: inherit;
+}
+
+.glass-tag__content {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glass-tag,
+  .glass-tag--interactive:hover,
+  .glass-tag--interactive.is-hover,
+  .glass-tag--interactive:active {
+    transform: none;
+    transition: none;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/glass-tag/index.ts b/apps/web-antd/src/components/glass-tag/index.ts
new file mode 100644
index 00000000..010be95e
--- /dev/null
+++ b/apps/web-antd/src/components/glass-tag/index.ts
@@ -0,0 +1,5 @@
+/**
+ * 液态玻璃标签组件出口
+ * - GlassTag：紧凑芯片（对照药名、状态标签等）
+ */
+export { default as GlassTag } from './GlassTag.vue';
diff --git a/apps/web-antd/src/components/store-card/StoreCardModal.vue b/apps/web-antd/src/components/store-card/StoreCardModal.vue
index 76c4f3f8..73b882b1 100644
--- a/apps/web-antd/src/components/store-card/StoreCardModal.vue
+++ b/apps/web-antd/src/components/store-card/StoreCardModal.vue
@@ -5,12 +5,11 @@
  */
 import type { Dayjs } from 'dayjs';
 
-import { computed, ref } from 'vue';
+import { computed, onBeforeUnmount, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { useUserStore } from '@vben/stores';
 
-import { monthToTodayRangeDayjs } from '#/utils/search-time-range';
 import {
   Avatar,
   Button,
@@ -18,16 +17,23 @@ import {
   Descriptions,
   Empty,
   Image,
+  message,
   Select,
   Spin,
   Table,
   Tabs,
   Tag,
-  message,
 } from 'ant-design-vue';
 
+import StoreFinancePanel from '#/components/store-card/StoreFinancePanel.vue';
+import { monthToTodayRangeDayjs } from '#/utils/search-time-range';
 import DoctorCardModal from '#/views/doctor/doctor/components/DoctorCardModal.vue';
+import {
+  canAddStoreDoctor,
+  isPlatformSuperAdmin,
+} from '#/views/system/admin/_shared/platform-admin-role';
 import { getStoreBankCardReportDetail } from '#/views/system/store-bank-card/api';
+import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';
 import {
   getStoreCardApi,
   getStoreCardStatsApi,
@@ -35,20 +41,32 @@ import {
   openQrCodeApi,
 } from '#/views/system/store/api';
 import { getSalespersonList } from '#/views/system/store/api/salesperson';
-import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';
 import AddDoctorFromStoreModal from '#/views/system/store/components/AddDoctorFromStoreModal.vue';
-import { canAddStoreDoctor, isPlatformSuperAdmin } from '#/views/system/admin/_shared/platform-admin-role';
-import StoreFinancePanel from '#/components/store-card/StoreFinancePanel.vue';
+
+import {
+  popupToBody,
+  STORE_CARD_BODY_CLASS,
+  STORE_CARD_OVERLAY_Z_INDEX,
+} from './overlay-z-index';
 
 const RangePicker = DatePicker.RangePicker;
 
+/** 打开期间给 body 打标，抬高挂到 body 的预览/下拉层级 */
+function setStoreCardBodyOpen(open: boolean) {
+  document.body.classList.toggle(STORE_CARD_BODY_CLASS, open);
+}
+
 const userStore = useUserStore();
 // 是否允许「添加医生」：超管/管理员/省经理/市经理/业务员
 const canAddDoctor = computed(() => canAddStoreDoctor(userStore.userInfo));
 // 是否可查看门店资金账户：仅超管/系统管理员
-const canViewStoreFinance = computed(() => isPlatformSuperAdmin(userStore.userInfo));
+const canViewStoreFinance = computed(() =>
+  isPlatformSuperAdmin(userStore.userInfo),
+);
 
-const financePanelRef = ref<InstanceType<typeof StoreFinancePanel> | null>(null);
+const financePanelRef = ref<InstanceType<typeof StoreFinancePanel> | null>(
+  null,
+);
 
 const storeId = ref(0);
 const loading = ref(false);
@@ -92,8 +110,18 @@ const drugTypeOptions = [
 ];
 
 const drugColumns = [
-  { title: '药品名称', dataIndex: 'drug_name', key: 'drug_name', ellipsis: true },
-  { title: '规格', dataIndex: 'specification', key: 'specification', width: 140 },
+  {
+    title: '药品名称',
+    dataIndex: 'drug_name',
+    key: 'drug_name',
+    ellipsis: true,
+  },
+  {
+    title: '规格',
+    dataIndex: 'specification',
+    key: 'specification',
+    width: 140,
+  },
   { title: '售价', dataIndex: 'price', key: 'price', width: 100 },
   { title: '进价', dataIndex: 'buy_price', key: 'buy_price', width: 100 },
 ];
@@ -115,6 +143,8 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.close();
   },
   onOpenChange(isOpen: boolean) {
+    // 预览/下拉挂在 body 上，默认 z-index 低于 Vben 弹窗 2000，打开时抬高
+    setStoreCardBodyOpen(isOpen);
     if (!isOpen) {
       financePanelRef.value?.reset?.();
       return;
@@ -133,6 +163,10 @@ const [Modal, modalApi] = useVbenModal({
   },
 });
 
+onBeforeUnmount(() => {
+  setStoreCardBodyOpen(false);
+});
+
 const [DoctorModal, DoctorModalApi] = useVbenModal({
   connectedComponent: DoctorCardModal,
 });
@@ -176,8 +210,8 @@ async function loadCard() {
     if (isPharmacy.value) {
       drugType.value = 2;
     }
-  } catch (e: any) {
-    message.error(e?.message || '加载门店详情失败');
+  } catch (error: any) {
+    message.error(error?.message || '加载门店详情失败');
   } finally {
     loading.value = false;
   }
@@ -198,8 +232,8 @@ async function refreshStats() {
         search_time: res.search_time,
       };
     }
-  } catch (e: any) {
-    message.error(e?.message || '刷新统计失败');
+  } catch (error: any) {
+    message.error(error?.message || '刷新统计失败');
   }
 }
 
@@ -256,7 +290,7 @@ async function loadPromoters() {
   }
 }
 
-function onTabChange(key: string | number) {
+function onTabChange(key: number | string) {
   activeTab.value = String(key);
   if (key === 'bank') loadBank();
   if (key === 'drugs') loadDrugs();
@@ -275,8 +309,8 @@ async function ensureQrCode() {
     await openQrCodeApi(storeId.value);
     await loadCard();
     message.success('二维码已生成');
-  } catch (e: any) {
-    message.error(e?.message || '生成二维码失败');
+  } catch (error: any) {
+    message.error(error?.message || '生成二维码失败');
   } finally {
     generatingQr.value = false;
   }
@@ -290,14 +324,19 @@ function clinicTypeText(v: number) {
 </script>
 
 <template>
-  <Modal :title="modalTitle">
+  <Modal :title="modalTitle" class="w-[80%]">
     <AddDoctorModal />
     <Spin :spinning="loading">
-      <div v-if="cardData" class="mb-4 flex flex-wrap items-center justify-between gap-3 px-1">
+      <div
+        v-if="cardData"
+        class="mb-4 flex flex-wrap items-center justify-between gap-3 px-1"
+      >
         <div class="text-sm text-muted-foreground">统计时间范围</div>
         <RangePicker
           v-model:value="searchTime"
           format="YYYY-MM-DD"
+          :get-popup-container="popupToBody"
+          :popup-style="{ zIndex: STORE_CARD_OVERLAY_Z_INDEX }"
           @change="refreshStats"
         />
       </div>
@@ -310,7 +349,9 @@ function clinicTypeText(v: number) {
         <div
           class="relative flex flex-col overflow-hidden rounded-xl border border-blue-100 bg-blue-50 p-5 shadow-sm transition-all group hover:shadow-md dark:border-blue-800/50 dark:bg-blue-900/20"
         >
-          <span class="text-sm font-semibold text-blue-600/80 dark:text-blue-300/80">
+          <span
+            class="text-sm font-semibold text-blue-600/80 dark:text-blue-300/80"
+          >
             销售额
           </span>
           <div class="mt-2 text-2xl font-bold text-blue-900 dark:text-blue-100">
@@ -321,10 +362,14 @@ function clinicTypeText(v: number) {
         <div
           class="relative flex flex-col overflow-hidden rounded-xl border border-emerald-100 bg-emerald-50 p-5 shadow-sm transition-all group hover:shadow-md dark:border-emerald-800/50 dark:bg-emerald-900/20"
         >
-          <span class="text-sm font-semibold text-emerald-600/80 dark:text-emerald-300/80">
+          <span
+            class="text-sm font-semibold text-emerald-600/80 dark:text-emerald-300/80"
+          >
             利润
           </span>
-          <div class="mt-2 text-2xl font-bold text-emerald-900 dark:text-emerald-100">
+          <div
+            class="mt-2 text-2xl font-bold text-emerald-900 dark:text-emerald-100"
+          >
             <span class="text-lg">¥</span>
             {{ Number(stats.profit ?? 0).toFixed(2) }}
           </div>
@@ -332,12 +377,18 @@ function clinicTypeText(v: number) {
         <div
           class="relative flex flex-col overflow-hidden rounded-xl border border-purple-100 bg-purple-50 p-5 shadow-sm transition-all group hover:shadow-md dark:border-purple-800/50 dark:bg-purple-900/20"
         >
-          <span class="text-sm font-semibold text-purple-600/80 dark:text-purple-300/80">
+          <span
+            class="text-sm font-semibold text-purple-600/80 dark:text-purple-300/80"
+          >
             处方量
           </span>
-          <div class="mt-2 text-2xl font-bold text-purple-900 dark:text-purple-100">
+          <div
+            class="mt-2 text-2xl font-bold text-purple-900 dark:text-purple-100"
+          >
             {{ stats.prescription_count ?? 0 }}
-            <span class="text-xs font-normal text-purple-700/60 dark:text-purple-300/60">
+            <span
+              class="text-xs font-normal text-purple-700/60 dark:text-purple-300/60"
+            >
               张
             </span>
           </div>
@@ -394,10 +445,20 @@ function clinicTypeText(v: number) {
               <template v-if="bankDetail">
                 <Descriptions bordered :column="2" size="small">
                   <Descriptions.Item label="户名">
-                    {{ bankDetail.bank_user_name || bankDetail.account_name || store.bank_user_name || '-' }}
+                    {{
+                      bankDetail.bank_user_name ||
+                      bankDetail.account_name ||
+                      store.bank_user_name ||
+                      '-'
+                    }}
                   </Descriptions.Item>
                   <Descriptions.Item label="卡号">
-                    {{ bankDetail.bank_card || bankDetail.card_no || store.bank_card || '-' }}
+                    {{
+                      bankDetail.bank_card ||
+                      bankDetail.card_no ||
+                      store.bank_card ||
+                      '-'
+                    }}
                   </Descriptions.Item>
                   <Descriptions.Item label="开户行">
                     {{ bankDetail.bank_name || store.bank_name || '-' }}
@@ -406,15 +467,28 @@ function clinicTypeText(v: number) {
                     {{ bankDetail.bank_no || store.bank_no || '-' }}
                   </Descriptions.Item>
                   <Descriptions.Item label="报备状态">
-                    {{ bankDetail.report_status_text || store.bank_card_report_status_text || '-' }}
+                    {{
+                      bankDetail.report_status_text ||
+                      store.bank_card_report_status_text ||
+                      '-'
+                    }}
                   </Descriptions.Item>
                   <Descriptions.Item label="账户类型">
-                    {{ bankDetail.bank_account_type ?? store.bank_account_type ?? '-' }}
+                    {{
+                      bankDetail.bank_account_type ??
+                      store.bank_account_type ??
+                      '-'
+                    }}
                   </Descriptions.Item>
                 </Descriptions>
               </template>
               <Empty v-else description="暂无银行卡报备信息，展示门店预留信息">
-                <Descriptions bordered :column="2" size="small" class="mt-4 text-left">
+                <Descriptions
+                  bordered
+                  :column="2"
+                  size="small"
+                  class="mt-4 text-left"
+                >
                   <Descriptions.Item label="户名">
                     {{ store.bank_user_name || '-' }}
                   </Descriptions.Item>
@@ -444,11 +518,7 @@ function clinicTypeText(v: number) {
         <Tabs.TabPane v-if="isClinic" key="doctors" tab="诊所医生团队">
           <div class="pl-4">
             <div v-if="canAddDoctor" class="mb-3">
-              <Button
-                type="primary"
-                size="small"
-                @click="openAddDoctorModal"
-              >
+              <Button type="primary" size="small" @click="openAddDoctorModal">
                 添加医生
               </Button>
             </div>
@@ -459,9 +529,16 @@ function clinicTypeText(v: number) {
                 :key="item.su_id"
                 class="flex items-center gap-3 rounded-lg border border-gray-100 p-3 dark:border-slate-700"
               >
-                <Avatar :src="resolveAvatarUrl(item.doctor?.avatar)" :size="48" />
+                <Avatar
+                  :src="resolveAvatarUrl(item.doctor?.avatar)"
+                  :size="48"
+                />
                 <div class="min-w-0 flex-1">
-                  <Button type="link" class="!px-0" @click="openDoctor(item.doctor?.su_id || item.su_id)">
+                  <Button
+                    type="link"
+                    class="!px-0"
+                    @click="openDoctor(item.doctor?.su_id || item.su_id)"
+                  >
                     {{ item.doctor?.name || '未知医生' }}
                   </Button>
                   <div class="text-xs text-muted-foreground">
@@ -481,6 +558,8 @@ function clinicTypeText(v: number) {
                 v-model:value="drugType"
                 :options="drugTypeOptions"
                 style="width: 160px"
+                :get-popup-container="popupToBody"
+                :dropdown-style="{ zIndex: STORE_CARD_OVERLAY_Z_INDEX }"
                 @change="loadDrugs"
               />
             </div>
@@ -502,7 +581,7 @@ function clinicTypeText(v: number) {
               <Image
                 :src="cardData?.qr_code || store.qr_code"
                 :width="200"
-                :preview="true"
+                :preview="{ zIndex: STORE_CARD_OVERLAY_Z_INDEX }"
               />
               <div class="text-sm text-muted-foreground">
                 {{ store.name }} {{ qrTabLabel }}
@@ -510,7 +589,11 @@ function clinicTypeText(v: number) {
             </template>
             <template v-else>
               <Empty :description="`尚未生成${storeKindLabel}二维码`" />
-              <Button type="primary" :loading="generatingQr" @click="ensureQrCode">
+              <Button
+                type="primary"
+                :loading="generatingQr"
+                @click="ensureQrCode"
+              >
                 生成{{ storeKindLabel }}二维码
               </Button>
             </template>
@@ -549,16 +632,34 @@ function clinicTypeText(v: number) {
 :deep(.custom-vertical-tabs .ant-tabs-nav) {
   width: 140px;
 }
+
 :deep(.custom-vertical-tabs .ant-tabs-tab) {
   padding: 12px 16px;
   margin-bottom: 4px;
   border-radius: 6px;
   transition: all 0.3s;
 }
+
 :deep(.custom-vertical-tabs .ant-tabs-tab-active) {
   background-color: var(
     --ant-primary-color-active-deprecated-f-12,
-    rgba(22, 119, 255, 0.08)
+    rgb(22 119 255 / 8%)
   );
 }
 </style>
+
+<!--
+  挂到 body 的浮层无法靠 scoped 命中；仅在门店详情打开期间抬高层级，
+  避免被 Vben Dialog（--popup-z-index=2000）挡住
+-->
+<style>
+body.store-card-modal-open .ant-image-preview-root,
+body.store-card-modal-open .ant-image-preview-wrap,
+body.store-card-modal-open .ant-select-dropdown,
+body.store-card-modal-open .ant-picker-dropdown,
+body.store-card-modal-open .ant-dropdown,
+body.store-card-modal-open [data-slot='select-content'],
+body.store-card-modal-open [data-reka-popper-content-wrapper] {
+  z-index: 3100 !important;
+}
+</style>
diff --git a/apps/web-antd/src/components/store-card/StoreFinancePanel.vue b/apps/web-antd/src/components/store-card/StoreFinancePanel.vue
index 02e8c143..96b65fd7 100644
--- a/apps/web-antd/src/components/store-card/StoreFinancePanel.vue
+++ b/apps/web-antd/src/components/store-card/StoreFinancePanel.vue
@@ -1,22 +1,39 @@
 <script lang="ts" setup>
 /**
- * 门店详情 - 资金账户面板（余额 + 资金流水 + 账户变动）
- * 仅超管/系统管理员在 StoreCardModal 中可见，数据按门店 ID 查询
- * 口径说明：资金流水按履约店 store_id；账户变动/余额按分账利润归属店 user_id
+ * 门店详情 - 资金账户面板
+ * 余额概览 + 四个列表 Tab（对齐提现管理：资金流水 / 结算记录 / 结算明细 / 资金变动记录）
+ * 仅超管/系统管理员在 StoreCardModal 中可见
  */
 import type { Dayjs } from 'dayjs';
 
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
-import { DatePicker, Empty, Segmented, Spin, Table, Tag, message } from 'ant-design-vue';
+import { AnalysisChartsTabs } from '@vben/common-ui';
+import { IconifyIcon as VbenIcon } from '@vben/icons';
 
+import { DatePicker, Empty, message, Spin, Table, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
 import { monthToTodayRangeDayjs } from '#/utils/search-time-range';
+import ApplyOrdersModal from '#/views/finance/withdrawal/components/apply-orders-modal.vue';
+import SettlementDetailDrawer from '#/views/finance/withdrawal/components/settlement-detail-drawer.vue';
+import { getAccountChangeSearchOptions } from '#/views/finance/withdrawal/config/account-change-search';
+import { formOptions3 as settlementLogSearchOptions } from '#/views/finance/withdrawal/config/settlement-log-search';
+import { formOptions2 as settlementItemsSearchOptions } from '#/views/finance/withdrawal/config/settlement-search';
+import { useWithdrawOrderDetailModals } from '#/views/finance/withdrawal/utils/use-withdraw-order-detail';
 import {
-  getStoreAccountChangeLogListApi,
   getStoreBalanceApi,
   getStoreFundWaterListApi,
 } from '#/views/system/store/api';
 
+import { createStoreAccountChangeGridOptions } from './config/account-change-table';
+import {
+  createStoreSettlementItemsGridOptions,
+  createStoreSettlementLogGridOptions,
+} from './config/settlement-table';
+import { popupToBody, STORE_CARD_OVERLAY_Z_INDEX } from './overlay-z-index';
+
 const props = defineProps<{
   storeId: number;
 }>();
@@ -24,32 +41,24 @@ const props = defineProps<{
 const RangePicker = DatePicker.RangePicker;
 
 const balanceLoading = ref(false);
-const balance = ref<Record<string, any> | null>(null);
+const balance = ref<null | Record<string, any>>(null);
 
 const fundWaterLoading = ref(false);
 const fundWaterList = ref<any[]>([]);
 const fundWaterPage = ref(1);
 const fundWaterPageSize = ref(10);
 const fundWaterTotal = ref(0);
-
-const changeLogLoading = ref(false);
-const changeLogList = ref<any[]>([]);
-const changeLogPage = ref(1);
-const changeLogPageSize = ref(10);
-const changeLogTotal = ref(0);
-
 const fundWaterTime = ref<[Dayjs, Dayjs]>(monthToTodayRangeDayjs());
-const changeLogTime = ref<[Dayjs, Dayjs]>(monthToTodayRangeDayjs());
 
-/** 流水列表切换：资金流水 / 账户变动（用 Segmented 避免窄容器下 Tab 折叠成 ...） */
-const activeListTab = ref<'fundWater' | 'changeLog'>('fundWater');
-const changeLogLoaded = ref(false);
-const listTabOptions = [
+/** 列表 Tab：与提现管理同套 AnalysisChartsTabs，避免 Segmented 在窄弹窗里难看 */
+const activeListTab = ref('fundWater');
+const listTabs = [
   { label: '资金流水', value: 'fundWater' },
-  { label: '账户变动', value: 'changeLog' },
+  { label: '结算记录', value: 'settlementLog' },
+  { label: '结算明细', value: 'settlementItems' },
+  { label: '资金变动记录', value: 'changeLog' },
 ];
 
-/** 余额概览卡片配置 */
 const balanceCards = [
   { key: 'balance', label: '可提现余额' },
   { key: 'total', label: '累计收益' },
@@ -66,28 +75,40 @@ const fundWaterColumns = [
   { title: '金额', dataIndex: 'price', key: 'price', width: 110 },
   { title: '流水类型', dataIndex: 'type', key: 'type', width: 110 },
   { title: '订单类型', dataIndex: 'order_type', key: 'order_type', width: 110 },
-  // store_id 便于核对是否本店履约（委托复诊时流水店与利润店可能不同）
   { title: '门店ID', dataIndex: 'store_id', key: 'store_id', width: 90 },
-  { title: '诊所', dataIndex: 'store_name', key: 'store_name', width: 120, ellipsis: true },
+  {
+    title: '诊所',
+    dataIndex: 'store_name',
+    key: 'store_name',
+    width: 120,
+    ellipsis: true,
+  },
   { title: '订单号', dataIndex: 'order_no', key: 'order_no', ellipsis: true },
   { title: '医生', dataIndex: 'doctor_name', key: 'doctor_name', width: 100 },
   { title: '时间', dataIndex: 'created_at', key: 'created_at', width: 170 },
 ];
 
-const changeLogColumns = [
-  { title: '时间', dataIndex: 'created_at', key: 'created_at', width: 170 },
-  { title: '来源', dataIndex: 'source_type_txt', key: 'source_type_txt', width: 100 },
-  { title: '字段', dataIndex: 'field_name_txt', key: 'field_name_txt', width: 140 },
-  { title: '变动前', dataIndex: 'before_amount', key: 'before_amount', width: 100 },
-  { title: '变动后', dataIndex: 'after_amount', key: 'after_amount', width: 100 },
-  { title: '变动值', dataIndex: 'change_amount', key: 'change_amount', width: 100 },
-  { title: '主体ID', dataIndex: 'user_id', key: 'user_id', width: 90 },
-  { title: '订单号', dataIndex: 'order_no', key: 'order_no', ellipsis: true },
-  { title: '来源表', dataIndex: 'source_table_txt', key: 'source_table_txt', width: 110 },
-  { title: '备注', dataIndex: 'remark', key: 'remark', ellipsis: true },
-];
+const [SettlementLogGrid, settlementLogGridApi] = useVbenVxeGrid({
+  formOptions: settlementLogSearchOptions,
+  gridOptions: createStoreSettlementLogGridOptions(() => props.storeId),
+});
+
+const [SettlementItemsGrid] = useVbenVxeGrid({
+  formOptions: settlementItemsSearchOptions,
+  gridOptions: createStoreSettlementItemsGridOptions(() => props.storeId),
+});
+
+const [ChangeLogGrid, changeLogGridApi] = useVbenVxeGrid({
+  formOptions: getAccountChangeSearchOptions({ forceStore: true }),
+  gridOptions: createStoreAccountChangeGridOptions(() => props.storeId),
+});
+
+const settlementDetailDrawerRef =
+  ref<InstanceType<typeof SettlementDetailDrawer>>();
+const applyOrdersModalRef = ref<InstanceType<typeof ApplyOrdersModal>>();
+const { OrderDetailModal, RegisterDetailModal, TraceDrawer, openOrderDetail } =
+  useWithdrawOrderDetailModals();
 
-/** 时间范围转接口参数 */
 function timeParam(range: [Dayjs, Dayjs]): [string, string] {
   return [
     range[0].format('YYYY-MM-DD 00:00:00'),
@@ -105,9 +126,9 @@ async function loadBalance() {
   balanceLoading.value = true;
   try {
     balance.value = await getStoreBalanceApi({ id: props.storeId });
-  } catch (e: any) {
+  } catch (error: any) {
     balance.value = null;
-    message.error(e?.message || '加载余额失败');
+    message.error(error?.message || '加载余额失败');
   } finally {
     balanceLoading.value = false;
   }
@@ -131,70 +152,72 @@ async function loadFundWater(page = fundWaterPage.value) {
       store_name: item?.store?.name || '-',
     }));
     fundWaterTotal.value = Number(res?.total || 0);
-  } catch (e: any) {
+  } catch (error: any) {
     fundWaterList.value = [];
     fundWaterTotal.value = 0;
-    message.error(e?.message || '加载资金流水失败');
+    message.error(error?.message || '加载资金流水失败');
   } finally {
     fundWaterLoading.value = false;
   }
 }
 
-/** 拉取账户变动 */
-async function loadChangeLog(page = changeLogPage.value) {
-  if (!props.storeId) return;
-  changeLogLoading.value = true;
-  changeLogPage.value = page;
-  try {
-    const res = await getStoreAccountChangeLogListApi({
-      id: props.storeId,
-      page,
-      pageSize: changeLogPageSize.value,
-      search_time: timeParam(changeLogTime.value),
-    });
-    changeLogList.value = res?.items || [];
-    changeLogTotal.value = Number(res?.total || 0);
-  } catch (e: any) {
-    changeLogList.value = [];
-    changeLogTotal.value = 0;
-    message.error(e?.message || '加载账户变动失败');
-  } finally {
-    changeLogLoading.value = false;
-  }
-}
-
-/** 重置分页并加载余额与当前列表 Tab 数据 */
+/** 重置并加载余额 + 资金流水（其它 Tab 挂载时由 Grid 自拉） */
 function loadAll() {
   fundWaterPage.value = 1;
-  changeLogPage.value = 1;
-  changeLogLoaded.value = false;
   activeListTab.value = 'fundWater';
   loadBalance();
   loadFundWater(1);
 }
 
-/** 列表切换：懒加载账户变动 */
-function onListTabChange(value: string | number) {
-  activeListTab.value = value === 'changeLog' ? 'changeLog' : 'fundWater';
-  if (activeListTab.value === 'changeLog' && !changeLogLoaded.value) {
-    loadChangeLog(1);
-    changeLogLoaded.value = true;
-  }
+/** Tab 切换后重算 Vxe 高度，避免弹窗内缩成一行 */
+function onListTabChange() {
+  nextTick(() => {
+    setTimeout(() => {
+      settlementLogGridApi.grid?.recalculate?.();
+      changeLogGridApi.grid?.recalculate?.();
+    }, 50);
+  });
+}
+
+watch(activeListTab, () => {
+  onListTabChange();
+});
+
+function showSettlementDetail(row: Record<string, any>) {
+  settlementDetailDrawerRef.value?.open(row, { storeId: props.storeId });
+}
+
+function showApplyOrders(row: Record<string, any>) {
+  const orders = row.orders || [];
+  if (orders.length === 1) {
+    openOrderDetail(orders[0]);
+    return;
+  }
+  applyOrdersModalRef.value?.open({
+    title: row.order_no ? `关联订单 · ${row.order_no}` : '关联订单',
+    orders,
+  });
+}
+
+function onAccountChangeOrder(row: Record<string, any>) {
+  const orders = row.orders || [];
+  if (
+    orders.length > 1 ||
+    (row.source_type === 'withdraw' && orders.length > 0)
+  ) {
+    showApplyOrders(row);
+    return;
+  }
+  openOrderDetail(row);
 }
 
-/** 重置面板状态（弹窗关闭时由父组件调用） */
 function reset() {
   balance.value = null;
   fundWaterList.value = [];
-  changeLogList.value = [];
   fundWaterTotal.value = 0;
-  changeLogTotal.value = 0;
   fundWaterPage.value = 1;
-  changeLogPage.value = 1;
   fundWaterTime.value = monthToTodayRangeDayjs();
-  changeLogTime.value = monthToTodayRangeDayjs();
   activeListTab.value = 'fundWater';
-  changeLogLoaded.value = false;
 }
 
 defineExpose({ loadAll, reset });
@@ -225,6 +248,12 @@ function orderTypeTag(orderType: number) {
 
 <template>
   <div class="store-finance-panel pl-4">
+    <OrderDetailModal />
+    <RegisterDetailModal />
+    <TraceDrawer />
+    <ApplyOrdersModal ref="applyOrdersModalRef" @view-order="openOrderDetail" />
+    <SettlementDetailDrawer ref="settlementDetailDrawerRef" />
+
     <section class="finance-section">
       <div class="section-title">余额概览</div>
       <Spin :spinning="balanceLoading">
@@ -235,7 +264,9 @@ function orderTypeTag(orderType: number) {
             class="balance-card"
           >
             <span class="balance-card__label">{{ card.label }}</span>
-            <span class="balance-card__value">{{ formatMoney(balance[card.key]) }}</span>
+            <span class="balance-card__value">{{
+              formatMoney(balance[card.key])
+            }}</span>
           </div>
         </div>
         <Empty v-else-if="!balanceLoading" description="暂无余额数据" />
@@ -244,101 +275,140 @@ function orderTypeTag(orderType: number) {
 
     <section class="finance-section finance-section--list">
       <p class="finance-hint">
-        资金流水按订单履约店；账户变动/余额按分账利润归属店。委托复诊等场景两边主体可能不同，属业务口径而非串店。
+        资金流水按订单履约店；结算/资金变动/余额按分账利润归属店。委托复诊等场景两边主体可能不同，属业务口径而非串店。
       </p>
-      <Segmented
+      <AnalysisChartsTabs
         v-model:value="activeListTab"
-        block
-        class="finance-list-segment"
-        :options="listTabOptions"
-        @change="onListTabChange"
-      />
+        :tabs="listTabs"
+        class="finance-list-tabs"
+      >
+        <template #fundWater>
+          <div class="list-toolbar">
+            <RangePicker
+              v-model:value="fundWaterTime"
+              format="YYYY-MM-DD"
+              :get-popup-container="popupToBody"
+              :popup-style="{ zIndex: STORE_CARD_OVERLAY_Z_INDEX }"
+              @change="loadFundWater(1)"
+            />
+          </div>
+          <Table
+            :columns="fundWaterColumns"
+            :data-source="fundWaterList"
+            :loading="fundWaterLoading"
+            :pagination="{
+              current: fundWaterPage,
+              pageSize: fundWaterPageSize,
+              total: fundWaterTotal,
+              showSizeChanger: true,
+              showTotal: (total: number) => `共 ${total} 条`,
+            }"
+            row-key="id"
+            size="small"
+            :scroll="{ x: 1000, y: 320 }"
+            @change="
+              (pag: any) => {
+                fundWaterPageSize = pag.pageSize || fundWaterPageSize;
+                loadFundWater(pag.current || 1);
+              }
+            "
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'price'">
+                {{ formatMoney(record.price) }}
+              </template>
+              <template v-else-if="column.key === 'type'">
+                <Tag :color="fundWaterTypeTag(record.type).color">
+                  {{ fundWaterTypeTag(record.type).text }}
+                </Tag>
+              </template>
+              <template v-else-if="column.key === 'order_type'">
+                <Tag :color="orderTypeTag(Number(record.order_type)).color">
+                  {{ orderTypeTag(Number(record.order_type)).text }}
+                </Tag>
+              </template>
+            </template>
+          </Table>
+        </template>
 
-      <div v-show="activeListTab === 'fundWater'">
-        <div class="list-toolbar">
-          <RangePicker
-            v-model:value="fundWaterTime"
-            format="YYYY-MM-DD"
-            @change="loadFundWater(1)"
-          />
-        </div>
-        <Table
-          :columns="fundWaterColumns"
-          :data-source="fundWaterList"
-          :loading="fundWaterLoading"
-          :pagination="{
-            current: fundWaterPage,
-            pageSize: fundWaterPageSize,
-            total: fundWaterTotal,
-            showSizeChanger: true,
-            showTotal: (total: number) => `共 ${total} 条`,
-          }"
-          row-key="id"
-          size="small"
-          :scroll="{ x: 1000, y: 320 }"
-          @change="(pag: any) => {
-            fundWaterPageSize = pag.pageSize || fundWaterPageSize;
-            loadFundWater(pag.current || 1);
-          }"
-        >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'price'">
-              {{ formatMoney(record.price) }}
-            </template>
-            <template v-else-if="column.key === 'type'">
-              <Tag :color="fundWaterTypeTag(record.type).color">
-                {{ fundWaterTypeTag(record.type).text }}
-              </Tag>
-            </template>
-            <template v-else-if="column.key === 'order_type'">
-              <Tag :color="orderTypeTag(Number(record.order_type)).color">
-                {{ orderTypeTag(Number(record.order_type)).text }}
-              </Tag>
-            </template>
-          </template>
-        </Table>
-      </div>
+        <template #settlementLog>
+          <div class="tab-grid-wrap">
+            <SettlementLogGrid>
+              <template #toolbar-actions></template>
+              <template #toolbar-tools></template>
+              <template #action="{ row }">
+                <TableAction
+                  :actions="[
+                    {
+                      label: '查看明细',
+                      type: 'link',
+                      size: 'small',
+                      onClick: showSettlementDetail.bind(null, row),
+                    },
+                    {
+                      label: '订单详情',
+                      type: 'link',
+                      size: 'small',
+                      onClick: openOrderDetail.bind(null, row),
+                    },
+                  ]"
+                  :drop-down-actions="[]"
+                />
+              </template>
+            </SettlementLogGrid>
+          </div>
+        </template>
 
-      <div v-show="activeListTab === 'changeLog'">
-        <div class="list-toolbar">
-          <RangePicker
-            v-model:value="changeLogTime"
-            format="YYYY-MM-DD"
-            @change="loadChangeLog(1)"
-          />
-        </div>
-        <Table
-          :columns="changeLogColumns"
-          :data-source="changeLogList"
-          :loading="changeLogLoading"
-          :pagination="{
-            current: changeLogPage,
-            pageSize: changeLogPageSize,
-            total: changeLogTotal,
-            showSizeChanger: true,
-            showTotal: (total: number) => `共 ${total} 条`,
-          }"
-          row-key="id"
-          size="small"
-          :scroll="{ x: 1080, y: 320 }"
-          @change="(pag: any) => {
-            changeLogPageSize = pag.pageSize || changeLogPageSize;
-            loadChangeLog(pag.current || 1);
-          }"
-        >
-          <template #bodyCell="{ column, record }">
-            <template
-              v-if="
-                column.key === 'before_amount' ||
-                column.key === 'after_amount' ||
-                column.key === 'change_amount'
-              "
-            >
-              {{ formatMoney(record[column.key]) }}
-            </template>
-          </template>
-        </Table>
-      </div>
+        <template #settlementItems>
+          <div class="tab-grid-wrap">
+            <SettlementItemsGrid>
+              <template #toolbar-actions></template>
+              <template #toolbar-tools></template>
+            </SettlementItemsGrid>
+          </div>
+        </template>
+
+        <template #changeLog>
+          <div class="tab-grid-wrap">
+            <ChangeLogGrid>
+              <template #toolbar-actions></template>
+              <template #toolbar-tools></template>
+              <template #change_amount="{ row }">
+                <span
+                  v-if="Number(row.change_amount) > 0"
+                  class="amount-cell is-up"
+                >
+                  <VbenIcon icon="lucide:trending-up" class="amount-icon" />
+                  +{{ Number(row.change_amount).toFixed(2) }}
+                </span>
+                <span
+                  v-else-if="Number(row.change_amount) < 0"
+                  class="amount-cell is-down"
+                >
+                  <VbenIcon icon="lucide:trending-down" class="amount-icon" />
+                  {{ Number(row.change_amount).toFixed(2) }}
+                </span>
+                <span v-else class="cell-muted">0.00</span>
+              </template>
+              <template #action="{ row }">
+                <TableAction
+                  :actions="[
+                    {
+                      label: '订单详情',
+                      type: 'link',
+                      size: 'small',
+                      ifShow:
+                        !!row.order_id || (row.orders && row.orders.length > 0),
+                      onClick: onAccountChangeOrder.bind(null, row),
+                    },
+                  ]"
+                  :drop-down-actions="[]"
+                />
+              </template>
+            </ChangeLogGrid>
+          </div>
+        </template>
+      </AnalysisChartsTabs>
     </section>
   </div>
 </template>
@@ -356,14 +426,6 @@ function orderTypeTag(orderType: number) {
   gap: 12px;
 }
 
-.section-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
 .section-title {
   font-size: 14px;
   font-weight: 600;
@@ -382,8 +444,14 @@ function orderTypeTag(orderType: number) {
   color: hsl(var(--muted-foreground));
 }
 
-.finance-list-segment {
-  margin-bottom: 4px;
+/* AnalysisChartsTabs 根节点自带 card-box，这里收紧边距并加同色系边框微光 */
+.finance-list-tabs {
+  padding-inline: 12px;
+  margin-top: 0;
+  background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--border));
+  border-radius: 12px;
+  box-shadow: 0 0 6px hsl(var(--primary) / 12%);
 }
 
 .list-toolbar {
@@ -392,6 +460,10 @@ function orderTypeTag(orderType: number) {
   margin-bottom: 12px;
 }
 
+.tab-grid-wrap {
+  min-height: 460px;
+}
+
 .balance-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -403,9 +475,9 @@ function orderTypeTag(orderType: number) {
   flex-direction: column;
   gap: 6px;
   padding: 14px 16px;
+  background: hsl(var(--card, var(--background)));
   border: 1px solid hsl(var(--primary) / 30%);
   border-radius: 10px;
-  background: hsl(var(--card, var(--background)));
   box-shadow: 0 0 6px hsl(var(--primary) / 18%);
 }
 
@@ -419,4 +491,30 @@ function orderTypeTag(orderType: number) {
   font-weight: 600;
   color: hsl(var(--foreground));
 }
+
+.amount-cell {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.amount-cell.is-up {
+  color: hsl(var(--success));
+}
+
+.amount-cell.is-down {
+  color: hsl(var(--destructive));
+}
+
+.amount-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.cell-muted {
+  color: hsl(var(--muted-foreground));
+}
 </style>
diff --git a/apps/web-antd/src/components/store-card/config/account-change-table.ts b/apps/web-antd/src/components/store-card/config/account-change-table.ts
new file mode 100644
index 00000000..9bc7af6b
--- /dev/null
+++ b/apps/web-antd/src/components/store-card/config/account-change-table.ts
@@ -0,0 +1,69 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getStoreAccountChangeLogListApi } from '#/views/system/store/api';
+
+/**
+ * 诊所详情 · 资金变动记录表格
+ * 列与交互对齐提现管理「资金变动记录」，数据按门店主体走 store-account-change-log-list
+ */
+export function createStoreAccountChangeGridOptions(
+  getStoreId: () => number,
+): VxeGridProps {
+  return {
+    columnConfig: {
+      useKey: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      useKey: true,
+    },
+    columns: [
+      { field: 'created_at', title: '变动时间', width: 170 },
+      { field: 'source_type_txt', title: '来源类型', width: 100 },
+      { field: 'field_name_txt', title: '变更字段', width: 120 },
+      { field: 'before_amount', title: '变动前', width: 110 },
+      { field: 'after_amount', title: '变动后', width: 110 },
+      {
+        field: 'change_amount',
+        title: '变动值',
+        width: 110,
+        slots: { default: 'change_amount' },
+      },
+      { field: 'order_no', title: '订单号', minWidth: 160 },
+      { field: 'source_table_txt', title: '来源表', width: 140 },
+      { field: 'remark', title: '备注', minWidth: 180 },
+      { type: 'html', title: '操作', slots: { default: 'action' }, width: 100 },
+    ],
+    keepSource: true,
+    height: 420,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const storeId = Number(getStoreId() || 0);
+          if (storeId <= 0) {
+            return { items: [], total: 0 };
+          }
+          return await getStoreAccountChangeLogListApi({
+            id: storeId,
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    border: false,
+    toolbarConfig: {
+      search: true,
+      refresh: true,
+      print: false,
+      export: false,
+      zoom: true,
+      slots: {
+        buttons: 'toolbar-actions',
+      },
+    },
+    showOverflow: false,
+  };
+}
diff --git a/apps/web-antd/src/components/store-card/config/settlement-table.ts b/apps/web-antd/src/components/store-card/config/settlement-table.ts
new file mode 100644
index 00000000..bdc01c5d
--- /dev/null
+++ b/apps/web-antd/src/components/store-card/config/settlement-table.ts
@@ -0,0 +1,117 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import {
+  getStoreSettlementItemsListApi,
+  getStoreSettlementLedgerLogListApi,
+} from '#/views/system/store/api';
+
+/** 同订单合并开关：表单 Switch 可能是 boolean / 字符串 */
+function normalizeMergeByOrder(value: unknown): 0 | 1 {
+  if (value === false || value === 0 || value === '0') {
+    return 0;
+  }
+  return 1;
+}
+
+/**
+ * 诊所详情 · 结算记录表格（对齐提现管理 Grid3）
+ */
+export function createStoreSettlementLogGridOptions(
+  getStoreId: () => number,
+): VxeGridProps {
+  return {
+    columnConfig: { useKey: true },
+    rowConfig: { keyField: 'id', useKey: true },
+    columns: [
+      { field: 'order_no', title: '订单号', minWidth: 160 },
+      { field: 'order_type_txt', title: '订单类型', width: 100 },
+      { field: 'fee_type_txt', title: '费用类型', minWidth: 120 },
+      { field: 'amount', title: '金额', width: 110 },
+      { field: 'type_txt', title: '类型', width: 90 },
+      { field: 'content', title: '说明', minWidth: 140 },
+      { field: 'created_at', title: '结算时间', width: 170 },
+      { type: 'html', title: '操作', slots: { default: 'action' }, width: 160 },
+    ],
+    keepSource: true,
+    height: 420,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const storeId = Number(getStoreId() || 0);
+          if (storeId <= 0) {
+            return { items: [], total: 0 };
+          }
+          const { merge_by_order, ...rest } = formValues || {};
+          return await getStoreSettlementLedgerLogListApi({
+            id: storeId,
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            merge_by_order: normalizeMergeByOrder(merge_by_order),
+            exclude_zero_amount: 1,
+            ...rest,
+          });
+        },
+      },
+    },
+    border: false,
+    toolbarConfig: {
+      search: true,
+      refresh: true,
+      print: false,
+      export: false,
+      zoom: true,
+      slots: { buttons: 'toolbar-actions' },
+    },
+    showOverflow: false,
+  };
+}
+
+/**
+ * 诊所详情 · 结算明细表格（对齐提现管理 Grid2，去掉名称列——主体已固定为本店）
+ */
+export function createStoreSettlementItemsGridOptions(
+  getStoreId: () => number,
+): VxeGridProps {
+  return {
+    columnConfig: { useKey: true },
+    rowConfig: { keyField: 'id', useKey: true },
+    columns: [
+      { field: 'id', title: 'ID', width: 90 },
+      { field: 'order.order_no', title: '订单号', minWidth: 160 },
+      { field: 'money', title: '分账金额', width: 110 },
+      { field: 'fee_type_txt', title: '费用类型', width: 110 },
+      { field: 'status_txt', title: '结算状态', width: 100 },
+      { field: 'created_at', title: '创建时间', width: 170 },
+    ],
+    keepSource: true,
+    height: 420,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const storeId = Number(getStoreId() || 0);
+          if (storeId <= 0) {
+            return { items: [], total: 0 };
+          }
+          return await getStoreSettlementItemsListApi({
+            id: storeId,
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    border: false,
+    toolbarConfig: {
+      search: true,
+      refresh: true,
+      print: false,
+      export: false,
+      zoom: true,
+      slots: { buttons: 'toolbar-actions' },
+    },
+    showOverflow: false,
+  };
+}
diff --git a/apps/web-antd/src/components/store-card/overlay-z-index.ts b/apps/web-antd/src/components/store-card/overlay-z-index.ts
new file mode 100644
index 00000000..4875d195
--- /dev/null
+++ b/apps/web-antd/src/components/store-card/overlay-z-index.ts
@@ -0,0 +1,14 @@
+/**
+ * 门店详情弹窗浮层层级
+ * Vben Dialog 默认 --popup-z-index=2000；antd Image 预览约 1080、Select 约 1050，
+ * 不抬高会被弹窗挡住。资金 Tab 的 VbenSelect 也走 z-popup=2000，同层易被盖住。
+ */
+export const STORE_CARD_OVERLAY_Z_INDEX = 3100;
+
+/** body 标记：弹窗打开期间用全局样式抬高挂到 body 的预览/下拉 */
+export const STORE_CARD_BODY_CLASS = 'store-card-modal-open';
+
+/** antd 下拉/日期挂到 body，避免被弹窗 content overflow-y-auto 裁切 */
+export function popupToBody() {
+  return document.body;
+}
diff --git a/apps/web-antd/src/components/table-action/card-actions.vue b/apps/web-antd/src/components/table-action/card-actions.vue
index 28fb6102..e00fba8c 100644
--- a/apps/web-antd/src/components/table-action/card-actions.vue
+++ b/apps/web-antd/src/components/table-action/card-actions.vue
@@ -3,9 +3,15 @@
  * 卡片视图专用操作栏（与列表交互解耦）
  *
  * 列表单元格里 TableAction 平铺全部按钮没问题，但卡片 footer 空间小。
- * 只露出前 maxVisible 个主操作（默认「详情」），其余收进「更多」气泡卡片（Popover）。
+ * 只露出前 maxVisible 个主操作，其余收进「更多」气泡。
+ *
+ * 默认 variant=glass：液态玻璃胶囊按钮（半透明底 + 同色系边框微光），footer 默认沾满等分；
+ * layout=center 可改为居中不拉满；variant=default 才退回 antd Button（极少用）。
+ *
+ * size：超级小 xs / 小 sm / 中 md / 大 lg / 沾满一半 half / 沾满整行 full。
+ * half、full 管整行占宽；xs~lg 管字号高度，占宽仍跟 layout。
  */
-import type { ActionItem } from './types';
+import type { ActionItem, CardActionsSize } from './types';
 
 import { computed, ref } from 'vue';
 
@@ -20,17 +26,48 @@ const props = withDefaults(
   defineProps<{
     actions?: ActionItem[];
     dropDownActions?: ActionItem[];
+    /** fill（默认）footer 沾满等分；center 居中不拉满；size=half/full 时以 size 为准 */
+    layout?: 'center' | 'fill';
     maxVisible?: number;
+    /**
+     * 玻璃按钮尺寸
+     * xs 超级小 / sm 小 / md 中(默认) / lg 大 / half 沾满一半 / full 沾满整行
+     */
+    size?: CardActionsSize;
+    /** glass（默认）玻璃胶囊；default 才用 antd 按钮 */
+    variant?: 'default' | 'glass';
   }>(),
   {
     actions: () => [],
     dropDownActions: () => [],
     maxVisible: 1,
+    variant: 'glass',
+    layout: 'fill',
+    size: 'md',
   },
 );
 
 const { hasAccessByCodes } = useAccess();
 const moreOpen = ref(false);
+const isGlass = computed(() => props.variant !== 'default');
+
+/** half/full 走占宽尺寸；其余走字号尺寸（视觉 chrome） */
+const sizeMode = computed(() => {
+  if (props.size === 'half' || props.size === 'full') return 'width';
+  return 'chrome';
+});
+
+/** 实际应用的 layout：half≈半宽等分，full≈整行等分，其余沿用 props.layout */
+const effectiveLayout = computed(() => {
+  if (props.size === 'half' || props.size === 'full') return 'fill';
+  return props.layout;
+});
+
+/** 字号档：half/full 用中号视觉，避免半宽/整行按钮显得过小或过大 */
+const chromeSize = computed(() => {
+  if (sizeMode.value === 'width') return 'md';
+  return props.size || 'md';
+});
 
 /** 与 TableAction 同规则判断单个操作是否可见（auth + ifShow） */
 function isActionVisible(action: ActionItem): boolean {
@@ -61,7 +98,9 @@ const splitActions = computed(() => {
   );
   const rest = [
     ...visible.slice(props.maxVisible),
-    ...(props.dropDownActions || []).filter((action) => isActionVisible(action)),
+    ...(props.dropDownActions || []).filter((action) =>
+      isActionVisible(action),
+    ),
   ].map(mapAction);
   return {
     primary: visible.slice(0, props.maxVisible).map(mapAction),
@@ -81,6 +120,13 @@ function getButtonProps(action: ActionItem) {
   return res;
 }
 
+/** 玻璃按钮色调：危险红、主操作绿、其余中性 */
+function glassTone(action: ActionItem, index: number) {
+  if (action.danger || action.color === 'error') return 'danger';
+  if (index === 0) return 'primary';
+  return 'neutral';
+}
+
 function runAction(action: ReturnType<typeof mapAction>) {
   if (action.disabled) return;
   if (!action.enable && action.onClick) {
@@ -89,30 +135,159 @@ function runAction(action: ReturnType<typeof mapAction>) {
   }
 }
 
-function getPopConfirmProps(attrs: Record<string, any>) {
-  const originAttrs: any = { ...attrs };
-  delete originAttrs.icon;
-  if (attrs.confirm && isFunction(attrs.confirm)) {
-    originAttrs.onConfirm = attrs.confirm;
-    delete originAttrs.confirm;
+/**
+ * 只透传 Popconfirm 需要的字段，禁止把整份 action（label/type/auth…）v-bind 上去
+ * 为什么：多余字段会导致 antdv 内部回调变成非函数，报 _a.call is not a function
+ */
+function getPopConfirmProps(action: ReturnType<typeof mapAction>) {
+  const pc = (action as ActionItem).popConfirm;
+  const title = pc?.title ?? (action as any).title;
+  const rawConfirm =
+    (isFunction(pc?.confirm) ? pc!.confirm : undefined) ||
+    (isFunction((action as any).confirm)
+      ? (action as any).confirm
+      : undefined) ||
+    (isFunction(action.onConfirm) ? action.onConfirm : undefined);
+  const rawCancel =
+    (isFunction(pc?.cancel) ? pc!.cancel : undefined) ||
+    (isFunction((action as any).cancel) ? (action as any).cancel : undefined) ||
+    (isFunction(action.onCancel) ? action.onCancel : undefined);
+  const props: Record<string, any> = {
+    title: title || '确定？',
+  };
+  if (pc?.okText) props.okText = pc.okText;
+  if (pc?.cancelText) props.cancelText = pc.cancelText;
+  if (isFunction(rawConfirm)) {
+    props.onConfirm = () => {
+      rawConfirm();
+      moreOpen.value = false;
+    };
   }
-  if (attrs.cancel && isFunction(attrs.cancel)) {
-    originAttrs.onCancel = attrs.cancel;
-    delete originAttrs.cancel;
+  if (isFunction(rawCancel)) {
+    props.onCancel = rawCancel;
   }
-  return originAttrs;
+  return props;
 }
 </script>
 
 <template>
-  <div class="card-actions m-table-action">
-    <Space :size="0">
-      <template v-for="(action, index) in splitActions.primary" :key="'p-' + index">
-        <Popconfirm
-          v-if="action.enable"
-          v-bind="getPopConfirmProps(action)"
-          @confirm="() => { action.onConfirm?.(); moreOpen = false; }"
+  <div
+    class="card-actions m-table-action"
+    :class="[
+      { 'card-actions--glass': isGlass },
+      isGlass ? `card-actions--${effectiveLayout}` : '',
+      isGlass ? `card-actions--size-${chromeSize}` : '',
+      isGlass && size === 'half' ? 'card-actions--half' : '',
+      isGlass && size === 'full' ? 'card-actions--full' : '',
+    ]"
+  >
+    <div v-if="isGlass" class="card-actions__glass-row">
+      <template
+        v-for="(action, index) in splitActions.primary"
+        :key="`gp-${ index}`"
+      >
+        <Popconfirm v-if="action.enable" v-bind="getPopConfirmProps(action)">
+          <button
+            type="button"
+            class="card-actions__glass-btn"
+            :class="`card-actions__glass-btn--${glassTone(action, index)}`"
+            :disabled="action.disabled === true"
+          >
+            <Icon
+              v-if="action.icon"
+              :icon="action.icon"
+              class="card-actions__glass-icon"
+            />
+            <span>{{ action.label }}</span>
+          </button>
+        </Popconfirm>
+        <button
+          v-else
+          type="button"
+          class="card-actions__glass-btn"
+          :class="[
+            `card-actions__glass-btn--${glassTone(action, index)}`,
+            { 'is-disabled': action.disabled === true },
+          ]"
+          :disabled="action.disabled === true"
+          @click="runAction(action)"
         >
+          <Icon
+            v-if="action.icon"
+            :icon="action.icon"
+            class="card-actions__glass-icon"
+          />
+          <span>{{ action.label }}</span>
+        </button>
+      </template>
+      <Popover
+        v-if="splitActions.rest.length > 0"
+        v-model:open="moreOpen"
+        trigger="click"
+        placement="topRight"
+        overlay-class-name="card-actions-popover"
+      >
+        <button
+          type="button"
+          class="card-actions__glass-btn card-actions__glass-btn--neutral"
+        >
+          <span>更多</span>
+          <Icon
+            icon="ant-design:down-outlined"
+            class="card-actions__more-icon"
+          />
+        </button>
+        <template #content>
+          <div class="card-actions-popover__panel">
+            <template
+              v-for="(action, index) in splitActions.rest"
+              :key="`gm-${ index}`"
+            >
+              <Popconfirm
+                v-if="action.enable"
+                v-bind="getPopConfirmProps(action)"
+              >
+                <button
+                  type="button"
+                  class="card-actions-popover__item"
+                  :class="{ 'is-disabled': action.disabled === true }"
+                  :disabled="action.disabled === true"
+                >
+                  <Icon
+                    v-if="action.icon"
+                    :icon="action.icon"
+                    class="card-actions-popover__icon"
+                  />
+                  <span>{{ action.label }}</span>
+                </button>
+              </Popconfirm>
+              <button
+                v-else
+                type="button"
+                class="card-actions-popover__item"
+                :class="{ 'is-disabled': action.disabled === true }"
+                :disabled="action.disabled === true"
+                @click="runAction(action)"
+              >
+                <Icon
+                  v-if="action.icon"
+                  :icon="action.icon"
+                  class="card-actions-popover__icon"
+                />
+                <span>{{ action.label }}</span>
+              </button>
+            </template>
+          </div>
+        </template>
+      </Popover>
+    </div>
+
+    <Space v-else :size="0">
+      <template
+        v-for="(action, index) in splitActions.primary"
+        :key="`p-${ index}`"
+      >
+        <Popconfirm v-if="action.enable" v-bind="getPopConfirmProps(action)">
           <Button v-bind="getButtonProps(action)">
             <template v-if="action.icon" #icon>
               <Icon :icon="action.icon" />
@@ -140,15 +315,20 @@ function getPopConfirmProps(attrs: Record<string, any>) {
       >
         <Button size="small" type="link" class="card-actions__more">
           更多
-          <Icon icon="ant-design:down-outlined" class="card-actions__more-icon" />
+          <Icon
+            icon="ant-design:down-outlined"
+            class="card-actions__more-icon"
+          />
         </Button>
         <template #content>
           <div class="card-actions-popover__panel">
-            <template v-for="(action, index) in splitActions.rest" :key="'m-' + index">
+            <template
+              v-for="(action, index) in splitActions.rest"
+              :key="`m-${ index}`"
+            >
               <Popconfirm
                 v-if="action.enable"
                 v-bind="getPopConfirmProps(action)"
-                @confirm="() => { action.onConfirm?.(); moreOpen = false; }"
               >
                 <button
                   type="button"
@@ -156,7 +336,11 @@ function getPopConfirmProps(attrs: Record<string, any>) {
                   :class="{ 'is-disabled': action.disabled === true }"
                   :disabled="action.disabled === true"
                 >
-                  <Icon v-if="action.icon" :icon="action.icon" class="card-actions-popover__icon" />
+                  <Icon
+                    v-if="action.icon"
+                    :icon="action.icon"
+                    class="card-actions-popover__icon"
+                  />
                   <span>{{ action.label }}</span>
                 </button>
               </Popconfirm>
@@ -168,7 +352,11 @@ function getPopConfirmProps(attrs: Record<string, any>) {
                 :disabled="action.disabled === true"
                 @click="runAction(action)"
               >
-                <Icon v-if="action.icon" :icon="action.icon" class="card-actions-popover__icon" />
+                <Icon
+                  v-if="action.icon"
+                  :icon="action.icon"
+                  class="card-actions-popover__icon"
+                />
                 <span>{{ action.label }}</span>
               </button>
             </template>
@@ -184,6 +372,195 @@ function getPopConfirmProps(attrs: Record<string, any>) {
   font-size: 10px;
 }
 
+.card-actions--glass {
+  width: 100%;
+}
+
+/* 沾满一半：整行只占 footer 一半，按钮在半宽内等分 */
+.card-actions--half {
+  width: 50%;
+  max-width: 50%;
+}
+
+/* 沾满整行：显式 100%（与默认 glass 一致，便于调用方语义选择） */
+.card-actions--full {
+  width: 100%;
+}
+
+.card-actions__glass-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  width: 100%;
+}
+
+/* fill：按钮等分沾满 footer；center：居中、宽度随内容 */
+.card-actions--fill .card-actions__glass-btn {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.card-actions--center .card-actions__glass-row {
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.card-actions--center .card-actions__glass-btn {
+  flex: 0 1 auto;
+  min-width: 96px;
+}
+
+/*
+ * 玻璃按钮：与 GlassCard 同套路——半透明底 + blur + 1px 同色系边框微光
+ * 禁止左侧色条；颜色全走主题变量，暗色自动跟
+ */
+.card-actions__glass-btn {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  min-height: 34px;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  color: hsl(var(--glass-btn-fg));
+  cursor: pointer;
+  background: linear-gradient(
+    160deg,
+    hsl(var(--glass-btn-tone) / 16%),
+    hsl(var(--glass-btn-tone) / 6%)
+  );
+  border: 1px solid hsl(var(--glass-btn-tone) / 32%);
+  border-radius: 999px;
+  box-shadow:
+    inset 0 1px 0 hsl(0deg 0% 100% / 12%),
+    0 0 8px hsl(var(--glass-btn-tone) / 14%);
+  backdrop-filter: blur(12px) saturate(160%);
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease;
+
+  &:hover:not(:disabled):not(.is-disabled) {
+    border-color: hsl(var(--glass-btn-tone) / 55%);
+    box-shadow:
+      inset 0 1px 0 hsl(0deg 0% 100% / 18%),
+      0 0 12px hsl(var(--glass-btn-tone) / 28%);
+    transform: translateY(-1px);
+  }
+
+  &:active:not(:disabled):not(.is-disabled) {
+    transform: translateY(0);
+  }
+
+  &:disabled,
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+}
+
+/* 尺寸档：xs 超级小 / sm 小 / md 中 / lg 大 */
+.card-actions--size-xs {
+  .card-actions__glass-row {
+    gap: 4px;
+  }
+
+  .card-actions__glass-btn {
+    min-height: 24px;
+    padding: 0 8px;
+    font-size: 11px;
+  }
+
+  .card-actions__glass-icon {
+    font-size: 12px;
+  }
+
+  &.card-actions--center .card-actions__glass-btn {
+    min-width: 64px;
+  }
+}
+
+.card-actions--size-sm {
+  .card-actions__glass-row {
+    gap: 6px;
+  }
+
+  .card-actions__glass-btn {
+    min-height: 28px;
+    padding: 0 10px;
+    font-size: 12px;
+  }
+
+  .card-actions__glass-icon {
+    font-size: 13px;
+  }
+
+  &.card-actions--center .card-actions__glass-btn {
+    min-width: 80px;
+  }
+}
+
+.card-actions--size-md {
+  .card-actions__glass-btn {
+    min-height: 34px;
+    padding: 0 12px;
+    font-size: 13px;
+  }
+
+  .card-actions__glass-icon {
+    font-size: 14px;
+  }
+}
+
+.card-actions--size-lg {
+  .card-actions__glass-row {
+    gap: 10px;
+  }
+
+  .card-actions__glass-btn {
+    min-height: 40px;
+    padding: 0 16px;
+    font-size: 14px;
+  }
+
+  .card-actions__glass-icon {
+    font-size: 16px;
+  }
+
+  &.card-actions--center .card-actions__glass-btn {
+    min-width: 112px;
+  }
+}
+
+.card-actions__glass-btn--primary {
+  --glass-btn-tone: var(--primary);
+  --glass-btn-fg: hsl(var(--primary));
+}
+
+.card-actions__glass-btn--neutral {
+  --glass-btn-tone: var(--foreground);
+  --glass-btn-fg: hsl(var(--foreground) / 88%);
+}
+
+.card-actions__glass-btn--danger {
+  --glass-btn-tone: var(--destructive);
+  --glass-btn-fg: hsl(var(--destructive));
+}
+
+.card-actions__glass-icon {
+  flex-shrink: 0;
+  font-size: 14px;
+}
+
+.card-actions__glass-btn > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 :global(.card-actions-popover .ant-popover-inner) {
   padding: 6px;
   background: hsl(var(--card, var(--background)));
@@ -214,8 +591,8 @@ function getPopConfirmProps(attrs: Record<string, any>) {
   transition: background 0.15s ease;
 
   &:hover:not(.is-disabled):not(:disabled) {
-    background: hsl(var(--primary) / 10%);
     color: hsl(var(--primary));
+    background: hsl(var(--primary) / 10%);
   }
 
   &.is-disabled,
diff --git a/apps/web-antd/src/components/table-action/table-action.vue b/apps/web-antd/src/components/table-action/table-action.vue
index 0c01e4b1..e97c0bea 100644
--- a/apps/web-antd/src/components/table-action/table-action.vue
+++ b/apps/web-antd/src/components/table-action/table-action.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { ButtonType } from 'ant-design-vue/es/button';
 
+import type { PropType } from 'vue';
+
 import type { ActionItem, PopConfirm } from './types';
 
-import { computed, type PropType, toRaw } from 'vue';
+import { computed, toRaw } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { isBoolean, isFunction } from '@vben/utils';
@@ -96,18 +98,24 @@ const getDropdownList = computed((): any[] => {
       };
     });
 });
+/**
+ * 只透传 Popconfirm 白名单字段，禁止原地 mutate / 整对象 v-bind
+ * 为什么：原先 delete confirm 会污染源对象，且多余字段会触发 antdv _a.call is not a function
+ */
 const getPopConfirmProps = (attrs: PopConfirm) => {
-  const originAttrs: any = attrs;
-  delete originAttrs.icon;
-  if (attrs.confirm && isFunction(attrs.confirm)) {
-    originAttrs.onConfirm = attrs.confirm;
-    delete originAttrs.confirm;
+  const props: Record<string, any> = {
+    title: attrs?.title || '确定？',
+  };
+  if (attrs?.okText) props.okText = attrs.okText;
+  if (attrs?.cancelText) props.cancelText = attrs.cancelText;
+  if (attrs?.disabled != null) props.disabled = attrs.disabled;
+  if (attrs?.confirm && isFunction(attrs.confirm)) {
+    props.onConfirm = attrs.confirm;
   }
-  if (attrs.cancel && isFunction(attrs.cancel)) {
-    originAttrs.onCancel = attrs.cancel;
-    delete originAttrs.cancel;
+  if (attrs?.cancel && isFunction(attrs.cancel)) {
+    props.onCancel = attrs.cancel;
   }
-  return originAttrs;
+  return props;
 };
 const getButtonProps = (action: ActionItem) => {
   const res = {
diff --git a/apps/web-antd/src/components/table-action/types.d.ts b/apps/web-antd/src/components/table-action/types.d.ts
index 29e7d4d0..9b8fb1e2 100644
--- a/apps/web-antd/src/components/table-action/types.d.ts
+++ b/apps/web-antd/src/components/table-action/types.d.ts
@@ -1,6 +1,13 @@
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
 
+/**
+ * CardActions 玻璃按钮尺寸
+ * - xs 超级小 / sm 小 / md 中 / lg 大：控制高度字号
+ * - half 沾满一半 / full 沾满整行：控制整行占 footer 宽度
+ */
+export type CardActionsSize = 'full' | 'half' | 'lg' | 'md' | 'sm' | 'xs';
+
 export interface PopConfirm {
   title: string;
   okText?: string;
diff --git a/apps/web-antd/src/composables/use-dual-view-search.ts b/apps/web-antd/src/composables/use-dual-view-search.ts
new file mode 100644
index 00000000..e8ea7576
--- /dev/null
+++ b/apps/web-antd/src/composables/use-dual-view-search.ts
@@ -0,0 +1,113 @@
+import type { Ref } from 'vue';
+
+import type { VbenFormProps } from '#/adapter/form';
+import type { ViewMode } from '#/components/view-mode-switch';
+
+import { nextTick, ref } from 'vue';
+
+import { isEqual } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+
+export interface UseDualViewSearchOptions {
+  /** 原 grid 内嵌搜索表单配置（schema / submitOnChange 等原样复用） */
+  formOptions: VbenFormProps;
+  /** 当前视图模式（useViewMode 返回的 ref） */
+  viewMode: Ref<ViewMode>;
+  /**
+   * 列表视图下提交/重置后的刷新动作（一般是 gridApi.reload()）
+   * 卡片视图不需要传：searchValues 变化后 GlassCardList 会 watch 自动回第 1 页重拉
+   */
+  onListSearch: () => void;
+}
+
+/**
+ * 从 schema 提取 defaultValue 作为首屏搜索条件
+ * 为什么：卡片视图首屏不经过表单提交，若不预置默认值（如「待到账」状态），
+ * 卡片与列表首屏的查询口径会不一致
+ */
+function collectSchemaDefaults(formOptions: VbenFormProps) {
+  const values: Record<string, any> = {};
+  for (const item of formOptions.schema ?? []) {
+    if (item.fieldName && item.defaultValue !== undefined) {
+      values[item.fieldName] = item.defaultValue;
+    }
+  }
+  return values;
+}
+
+/**
+ * 「列表/卡片」双视图共用的页面级搜索表单
+ *
+ * 为什么封装：把 grid 内嵌搜索表单抽到页面顶部后，两种视图要共用一份条件，
+ * 每个页面都要写「读表单现值 → 列表 reload / 卡片靠 watch 拉数 → 重置兼容 submitOnChange」这套逻辑；
+ * 财务公账（日汇总/订单明细两套表单）、我的开票等多页复用，避免复制粘贴。
+ *
+ * 用法：
+ *   const { SearchForm, searchValues, readLiveSearchValues } = useDualViewSearch({
+ *     formOptions, viewMode, onListSearch: () => gridApi.reload(),
+ *   });
+ *   grid query 里：searchValues.value = await readLiveSearchValues(); 再合并进请求参数
+ *   卡片：<GlassCardList :form-values="searchValues" />
+ */
+export function useDualViewSearch(options: UseDualViewSearchOptions) {
+  const { formOptions, viewMode, onListSearch } = options;
+
+  /** 列表与卡片共用的搜索条件（提交/重置时整体替换，卡片靠 watch 自动拉数） */
+  const searchValues = ref<Record<string, any>>(
+    collectSchemaDefaults(formOptions),
+  );
+
+  /**
+   * 读搜索表单现值（不只依赖 handleSubmit 快照）
+   * 为什么：列表翻页/刷新按钮触发的 query 不经过表单提交，必须自己取最新表单值，
+   * 否则会丢掉用户刚改但没点查询的条件；表单不可用时回退上次提交的条件
+   */
+  async function readLiveSearchValues(): Promise<Record<string, any>> {
+    try {
+      await nextTick();
+       
+      const live = await searchFormApi.getValues();
+      return { ...live };
+    } catch {
+      return { ...searchValues.value };
+    }
+  }
+
+  /** 提交：同步共享条件；列表模式手动 reload，卡片模式由 formValues watch 驱动 */
+  async function applySearch() {
+    searchValues.value = await readLiveSearchValues();
+    if (viewMode.value === 'list') {
+      onListSearch();
+    }
+  }
+
+  const [SearchForm, searchFormApi] = useVbenForm({
+    // 与 grid 内嵌表单的默认外观保持一致（紧凑、多列、控件撑满格子），页面配置可覆盖
+    compact: true,
+    commonConfig: {
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    showCollapseButton: true,
+    submitButtonOptions: { content: '查询' },
+    wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    ...formOptions,
+    handleSubmit: applySearch,
+    /**
+     * 重置：对齐 vben grid 内嵌表单行为——
+     * submitOnChange 的表单重置后值变化会自动触发一次提交，这里只在值没变或非 submitOnChange 时手动刷新，避免重复请求
+     */
+    handleReset: async () => {
+      const prevValues = await searchFormApi.getValues();
+      await searchFormApi.reset();
+      const nextValues = await searchFormApi.getValues();
+      if (isEqual(prevValues, nextValues) || !formOptions.submitOnChange) {
+        await applySearch();
+      }
+    },
+  });
+
+  return { SearchForm, searchFormApi, searchValues, readLiveSearchValues };
+}
diff --git a/apps/web-antd/src/composables/use-file-gallery-filter.ts b/apps/web-antd/src/composables/use-file-gallery-filter.ts
index ba6a7dd5..6eb3938e 100644
--- a/apps/web-antd/src/composables/use-file-gallery-filter.ts
+++ b/apps/web-antd/src/composables/use-file-gallery-filter.ts
@@ -41,8 +41,18 @@ export function useFileGalleryFilter(
   const activeFolderId = ref<number>(ALL_FOLDER_VALUE);
   const sidebarTab = ref<FileGallerySidebarTab>('group');
   const keyword = ref('');
-  /** 只看无引用（管理页用，选择器不传） */
-  const unrefOnly = ref(false);
+  /**
+   * 引用筛选（管理页用，选择器不传）
+   * all=全部 referenced=有引用 unreferenced=未引用
+   */
+  const refFilter = ref<'all' | 'referenced' | 'unreferenced'>('all');
+  /** @deprecated 兼容旧调用，等价 refFilter===unreferenced */
+  const unrefOnly = computed({
+    get: () => refFilter.value === 'unreferenced',
+    set: (v: boolean) => {
+      refFilter.value = v ? 'unreferenced' : 'all';
+    },
+  });
   const typesLoading = ref(false);
 
   const { groupOptions, loadGroupOptions } = useFileGroupCache();
@@ -111,9 +121,14 @@ export function useFileGalleryFilter(
     }
   }
 
-  /** 管理页「只看无引用」，选择器不要开 */
+  /** 管理页引用筛选：all|referenced|unreferenced */
+  function setRefFilter(value: 'all' | 'referenced' | 'unreferenced') {
+    refFilter.value = value;
+  }
+
+  /** @deprecated 请用 setRefFilter；保留给旧 Switch */
   function setUnrefOnly(value: boolean) {
-    unrefOnly.value = value;
+    setRefFilter(value ? 'unreferenced' : 'all');
   }
 
   function buildListParams(page: number, pageSize: number) {
@@ -124,6 +139,7 @@ export function useFileGalleryFilter(
       page: number;
       page_size: number;
       pid: number;
+      ref_filter?: string;
       type?: number;
       unfiled?: number;
       unref_only?: number;
@@ -154,8 +170,8 @@ export function useFileGalleryFilter(
       params.keyword = kw;
     }
 
-    if (unrefOnly.value) {
-      params.unref_only = 1;
+    if (refFilter.value !== 'all') {
+      params.ref_filter = refFilter.value;
     }
 
     return params;
@@ -187,6 +203,7 @@ export function useFileGalleryFilter(
     activeFolderId,
     sidebarTab,
     keyword,
+    refFilter,
     unrefOnly,
     typesLoading,
     tabs,
@@ -196,6 +213,7 @@ export function useFileGalleryFilter(
     setActiveGroupId,
     setActiveFolderId,
     setSidebarTab,
+    setRefFilter,
     setUnrefOnly,
     buildListParams,
     loadFileTypes,
diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index f9ecc727..9c08b6d0 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -7,15 +7,15 @@ import type { NotificationItem } from '@vben/layouts';
 import { computed, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { AuthenticationLoginExpiredModal, VbenIcon } from '@vben/common-ui';
+import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { useWatermark } from '@vben/hooks';
-import { $t } from '@vben/locales';
 import {
   BasicLayout,
   LockScreen,
   Notification,
   UserDropdown,
 } from '@vben/layouts';
+import { $t } from '@vben/locales';
 import { preferences, usePreferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 
@@ -32,12 +32,12 @@ import { useAuthStore } from '#/store';
 import { desktop, isElectron } from '#/util/desktop';
 import { formatTimeToRelative } from '#/util/tool';
 import LoginForm from '#/views/_core/authentication/login.vue';
-import NoticeActionHost from '#/views/notice/action/NoticeActionHost.vue';
 import {
   emitNoticeRefresh,
   onNoticeRefresh,
   openNoticeAction,
 } from '#/views/notice/action/bus';
+import NoticeActionHost from '#/views/notice/action/NoticeActionHost.vue';
 import { resolveNoticeColor } from '#/views/notice/action/types';
 import {
   getNoticeListApi,
@@ -45,6 +45,7 @@ import {
   readAllApi,
   readApi,
 } from '#/views/notice/api';
+import NoticeCanvasIcon from '#/views/notice/canvas-icon/NoticeCanvasIcon.vue';
 
 const router = useRouter();
 const switchAccountModalRef = ref<InstanceType<typeof SwitchAccountModal>>();
@@ -241,7 +242,7 @@ const { isDark } = usePreferences();
 const showDot = computed(() => unreadCount.value > 0);
 
 const showDoctorTransfer = computed(() => {
-  const info = userStore.userInfo as Record<string, any> | null | undefined;
+  const info = userStore.userInfo as null | Record<string, any> | undefined;
   if (!info) return false;
   return !!(info.doctor_id && info.store_id);
 });
@@ -356,17 +357,13 @@ watch(
             v-if="!item.isRead"
             class="absolute top-2 right-2 size-2 rounded-sm bg-primary"
           ></span>
-          <span
-            class="relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xl"
-            :class="[(item as any).colorBg || 'bg-muted', (item as any).color]"
-          >
-            <VbenIcon
-              v-if="(item as any).type_icon"
-              :icon="(item as any).type_icon"
-              class="size-5"
-            />
-            <Bell v-else class="size-5" />
-          </span>
+          <!-- 按消息类型绘制的 Canvas 动态图标；铃铛里都是未读，已读后才定格 -->
+          <NoticeCanvasIcon
+            :type-code="(item as any).type_code"
+            :color="(item as any).type_color"
+            :size="40"
+            :animate="!item.isRead"
+          />
           <div class="min-w-0 flex-1 pr-8 leading-none">
             <div class="mb-1 flex items-center gap-2">
               <span
diff --git a/apps/web-antd/src/util/address-dict-api.ts b/apps/web-antd/src/util/address-dict-api.ts
new file mode 100644
index 00000000..bfd6fabf
--- /dev/null
+++ b/apps/web-antd/src/util/address-dict-api.ts
@@ -0,0 +1,15 @@
+/**
+ * 地址粘贴识别字典 API（xk-api）
+ * 姓氏表来自后端 config/xk.php → address.common_surnames
+ */
+import { requestClient } from '#/api/request';
+
+const prefix = 'address-dict/';
+
+/**
+ * 拉取姓氏表（复姓在前）
+ * requestClient 已解包 result，直接得到 { surnames: string[] }
+ */
+export async function getAddressSurnames() {
+  return requestClient.get<{ surnames: string[] }>(`${prefix}surnames`);
+}
diff --git a/apps/web-antd/src/util/address-index.ts b/apps/web-antd/src/util/address-index.ts
index 3aa128e9..180af07d 100644
--- a/apps/web-antd/src/util/address-index.ts
+++ b/apps/web-antd/src/util/address-index.ts
@@ -1,11 +1,14 @@
+import type {
+  RegionPickerChild,
+  RegionPickerSearchHit,
+} from '#/api/region-picker';
+
 import { ref } from 'vue';
 
 import {
   getRegionChildren,
   resolveRegionPair,
   searchRegions,
-  type RegionPickerChild,
-  type RegionPickerSearchHit,
 } from '#/api/region-picker';
 
 export interface AddressNode {
@@ -28,7 +31,7 @@ export interface ResolvedAddress {
 
 export type AddressValue = [number, number];
 
-export type RegionLevel = 'province' | 'city' | 'district';
+export type RegionLevel = 'city' | 'district' | 'province';
 
 export interface BreadcrumbItem {
   level: RegionLevel;
@@ -47,7 +50,7 @@ export interface AddressSearchHit {
   node: AddressNode;
   pathLabel: string;
   complete: boolean;
-  path?: { id: number; name: string; level: number }[];
+  path?: { id: number; level: number; name: string; }[];
 }
 
 export interface AddressListRow {
@@ -74,11 +77,11 @@ function levelFromNumber(level: number): RegionLevel {
 }
 
 function toNode(row: {
+  has_children?: boolean;
   id: number;
+  level?: number;
   name: string;
   pid?: number;
-  level?: number;
-  has_children?: boolean;
 }): AddressNode {
   return {
     value: row.id,
@@ -201,7 +204,9 @@ export function formatAddressDisplay(value?: AddressValue | null): string {
   return '';
 }
 
-export function formatBreadcrumbItems(resolved: ResolvedAddress): BreadcrumbItem[] {
+export function formatBreadcrumbItems(
+  resolved: ResolvedAddress,
+): BreadcrumbItem[] {
   const items: BreadcrumbItem[] = [];
   if (resolved.province) {
     items.push({
@@ -229,7 +234,7 @@ export function formatBreadcrumbItems(resolved: ResolvedAddress): BreadcrumbItem
 
 export function buildBreadcrumbFromContext(
   ctx: SelectionContext,
-  labels?: { province?: string; city?: string; district?: string },
+  labels?: { city?: string; district?: string; province?: string; },
 ): BreadcrumbItem[] {
   const items: BreadcrumbItem[] = [];
   if (ctx.provinceId) {
@@ -415,3 +420,77 @@ export function getLevelSearchPlaceholder(level: RegionLevel): string {
 export function isMunicipalityProvince(_provinceId?: number): boolean {
   return false;
 }
+
+/**
+ * 从中文省市区解析为选择器值 [provinceId, leafId]
+ * 为什么：region-picker/search 是对单条 name LIKE，整串「浙江省杭州市西湖区」搜不到；
+ * 必须用区/市/省逐级短词搜索，再按 path_label 与识别结果对齐打分取最优
+ */
+export async function resolveAddressPairFromNames(
+  province?: string,
+  city?: string,
+  area?: string,
+): Promise<AddressValue | undefined> {
+  const p = String(province || '').trim();
+  const c = String(city || '').trim();
+  const a = String(area || '').trim();
+  if (!p && !c && !a) {
+    return undefined;
+  }
+  // 优先搜索最细一级，命中率最高
+  const keywords = [a, c, p].filter(Boolean);
+  let bestHit: AddressSearchHit | null = null;
+  let bestScore = -1;
+  for (const kw of keywords) {
+    const hits = await searchAddressHits(kw);
+    for (const hit of hits) {
+      const score = scoreRegionHit(hit, p, c, a);
+      if (score > bestScore) {
+        bestScore = score;
+        bestHit = hit;
+      }
+    }
+    // 已有高分完整命中可提前结束
+    if (bestHit && bestScore >= 6 && bestHit.complete) {
+      break;
+    }
+  }
+  if (!bestHit || bestScore <= 0) {
+    return undefined;
+  }
+  const ctx = applySearchHit(bestHit, {});
+  return buildAddressOutput(ctx.provinceId, ctx.cityId, ctx.districtId);
+}
+
+/** 命中项与识别省市区的对齐分：path 含省/市/区、complete、叶子名精确匹配加分 */
+function scoreRegionHit(
+  hit: AddressSearchHit,
+  province: string,
+  city: string,
+  area: string,
+): number {
+  const label = `${hit.pathLabel || ''} ${hit.node?.label || ''}`;
+  let score = 0;
+  if (area) {
+    if (hit.node?.label === area || label.includes(area)) score += 4;
+    else if (label.includes(area.replace(/(区|县|市|旗)$/, ''))) score += 2;
+  }
+  if (city) {
+    if (label.includes(city)) score += 3;
+    else if (label.includes(city.replace(/市$/, ''))) score += 2;
+  }
+  if (province) {
+    if (label.includes(province)) score += 3;
+    else if (
+      label.includes(
+        province
+          .replaceAll(/特别行政区|自治区|壮族|回族|维吾尔/g, '')
+          .replace(/(省|市)$/, ''),
+      )
+    ) {
+      score += 2;
+    }
+  }
+  if (hit.complete) score += 1;
+  return score;
+}
diff --git a/apps/web-antd/src/util/address-recognizer.d.ts b/apps/web-antd/src/util/address-recognizer.d.ts
new file mode 100644
index 00000000..9af90129
--- /dev/null
+++ b/apps/web-antd/src/util/address-recognizer.d.ts
@@ -0,0 +1,34 @@
+/** address-recognizer.js 的类型声明，供 TS 引用 */
+export const ADDRESS_PASTE_EXAMPLES: string[];
+
+export function confidenceMark(score: number): string;
+
+export function setCommonSurnames(list: string | string[]): void;
+
+export function ensureSurnamesLoaded(
+  fetcher?: () => Promise<
+    null | string[] | undefined | { surnames?: string[] }
+  >,
+): Promise<void>;
+
+export function recognizeAddress(text: string): {
+  area: string;
+  city: string;
+  confidence: {
+    detail: number;
+    name: number;
+    phone: number;
+    region: number;
+  };
+  detail: string;
+  name: string;
+  phone: string;
+  province: string;
+};
+
+export class AddressRecognizer {
+  constructor(tree?: unknown);
+  recognize(raw: string): ReturnType<typeof recognizeAddress>;
+}
+
+export const addressRecognizer: AddressRecognizer;
diff --git a/apps/web-antd/src/util/address-recognizer.js b/apps/web-antd/src/util/address-recognizer.js
new file mode 100644
index 00000000..73b793c1
--- /dev/null
+++ b/apps/web-antd/src/util/address-recognizer.js
@@ -0,0 +1,843 @@
+/**
+ * 收货地址粘贴识别引擎（本地纯文本解析）
+ * 从乱序/多分隔符文本中提取：姓名、电话、省市区、详细地址，并给出 0~1 置信度
+ * 省市区依赖 region-names.json 名称树打分匹配；识别失败字段留空，不抛错
+ */
+import regionTree from './region-names.json';
+
+/** 示例文本：点击后填入并触发识别，覆盖乱序/关键词/直辖市/电商多行等场景 */
+export const ADDRESS_PASTE_EXAMPLES = [
+  '张三 13800138000 浙江省杭州市西湖区文三路100号',
+  '收货人：李四 电话：15912345678 北京市朝阳区建国路88号SOHO现代城A座1201',
+  '王五，广东省深圳市南山区科技园南路，联系电话13812345678',
+  '收件人赵六 上海市浦东新区张江高科技园区碧波路690号 021-50801000',
+  '杭州西湖区文二西路1号 陈七 18600001111',
+  '欧阳娜娜 138 0013 8000 浙江省杭州市西湖区文三路100号 310000',
+  '收货人：司马懿\n手机号码：+86-159-1234-5678转1234\n所在地区：北京市朝阳区\n详细地址：建国路88号SOHO现代城A座1201',
+  '收件人：诸葛孔明\n电话：18600001111\n地址：广东省深圳市南山区科技园南路1号',
+];
+
+/**
+ * 离线兜底姓氏（接口失败时仍可识别常见姓名）
+ * 接口成功后由 setCommonSurnames 替换为后端 config 全量表
+ */
+const FALLBACK_SURNAMES_STR =
+  '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵湛汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪舒屈项祝董梁杜阮蓝闵席季麻强贾路娄危江童颜郭梅盛林刁钟徐邱骆高夏蔡田樊胡凌霍虞万支柯昝管卢莫经房裘缪干解应宗丁宣贲邓郁单杭洪包诸左石崔吉钮龚程嵇邢滑裴陆荣翁荀羊於惠甄曲家封芮羿储靳汲邴糜松井段富巫乌焦巴弓牧隗山谷车侯宓蓬全郗班仰秋仲伊宫宁仇栾暴甘钭厉戎祖武符刘景詹束龙叶幸司韶郜黎蓟薄印宿白怀蒲邰从鄂索咸籍赖卓蔺屠蒙池乔阴鬱胥能苍双闻莘党翟谭贡劳逄姬申扶堵冉宰郦雍郤璩桑桂濮牛寿通边扈燕冀郏浦尚农温别庄晏柴瞿阎充慕连茹习宦艾鱼容向古易慎戈廖庾终暨居衡步都耿满弘匡国文寇广禄阙东欧殳沃利蔚越夔隆师巩厍聂晁勾敖融冷訾辛阚那简饶空曾毋沙乜养鞠须丰巢关蒯相查后荆红游竺权逯盖益桓公万俟司马上官欧阳夏侯诸葛闻人东方赫连皇甫尉迟公羊澹台公冶宗政濮阳淳于单于太叔申屠公孙仲孙轩辕令狐钟离宇文长孙慕容鲜于闾丘司徒司空亓官司寇仉督子车颛孙端木巫马公西漆雕乐正壤驷公良拓跋夹谷宰父谷梁晋楚闫法汝鄢涂钦段干百里东郭南门呼延归海羊舌微生岳帅缑亢况後有琴梁丘左丘东门西门商牟佘佴伯赏南宫墨哈谯笪年爱阳佟';
+
+/**
+ * 将姓氏源整理为「字数降序」数组，供前缀匹配先命中复姓
+ * @param {string|string[]} source
+ * @returns {string[]}
+ */
+function buildSurnameList(source) {
+  const seen = {};
+  const list = [];
+  const pushOne = (s) => {
+    const t = String(s || '').trim();
+    if (!t || seen[t]) return;
+    seen[t] = true;
+    list.push(t);
+  };
+  if (Array.isArray(source)) {
+    for (let i = 0; i < source.length; i++) pushOne(source[i]);
+  } else {
+    const str = String(source || '');
+    // 复姓片段（2~4 字）优先从连续汉字串中按已知复姓切出较难，兜底串用单字+尾部复姓字面
+    const compounds = [
+      '万俟',
+      '司马',
+      '上官',
+      '欧阳',
+      '夏侯',
+      '诸葛',
+      '闻人',
+      '东方',
+      '赫连',
+      '皇甫',
+      '尉迟',
+      '公羊',
+      '澹台',
+      '公冶',
+      '宗政',
+      '濮阳',
+      '淳于',
+      '单于',
+      '太叔',
+      '申屠',
+      '公孙',
+      '仲孙',
+      '轩辕',
+      '令狐',
+      '钟离',
+      '宇文',
+      '长孙',
+      '慕容',
+      '鲜于',
+      '闾丘',
+      '司徒',
+      '司空',
+      '亓官',
+      '司寇',
+      '仉督',
+      '子车',
+      '颛孙',
+      '端木',
+      '巫马',
+      '公西',
+      '漆雕',
+      '乐正',
+      '壤驷',
+      '公良',
+      '拓跋',
+      '夹谷',
+      '宰父',
+      '谷梁',
+      '晋楚',
+      '闫法',
+      '汝鄢',
+      '涂钦',
+      '段干',
+      '百里',
+      '东郭',
+      '南门',
+      '呼延',
+      '归海',
+      '羊舌',
+      '微生',
+      '岳帅',
+      '缑亢',
+      '况后',
+      '况後',
+      '有琴',
+      '梁丘',
+      '左丘',
+      '东门',
+      '西门',
+      '商牟',
+      '佘佴',
+      '伯赏',
+      '南宫',
+      '墨哈',
+      '谯笪',
+      '年爱',
+      '阳佟',
+    ];
+    for (let i = 0; i < compounds.length; i++) {
+      if (str.indexOf(compounds[i]) >= 0) pushOne(compounds[i]);
+    }
+    for (let i = 0; i < str.length; i++) {
+      const ch = str.charAt(i);
+      if (/[\u4E00-\u9FA5]/.test(ch)) pushOne(ch);
+    }
+  }
+  list.sort((a, b) => b.length - a.length || 0);
+  return list;
+}
+
+/** 当前生效姓氏表（字数降序）；可被后端接口覆盖 */
+let surnameList = buildSurnameList(FALLBACK_SURNAMES_STR);
+/** ensureSurnamesLoaded 的会话内 Promise 缓存 */
+let surnamesLoadPromise = null;
+let surnamesLoadedFromRemote = false;
+
+/**
+ * 注入姓氏表（后端 address-dict/surnames 返回的数组）
+ * @param {string[]|string} list
+ */
+export function setCommonSurnames(list) {
+  if (!list || (Array.isArray(list) && list.length === 0)) return;
+  surnameList = buildSurnameList(list);
+  surnamesLoadedFromRemote = true;
+}
+
+/**
+ * 首次识别前拉取姓氏；同会话只请求一次；失败则保留兜底表
+ * @param {() => Promise<{ surnames?: string[] }|string[]|null|undefined>} fetcher
+ * @returns {Promise<void>}
+ */
+export function ensureSurnamesLoaded(fetcher) {
+  if (surnamesLoadedFromRemote) return Promise.resolve();
+  if (!fetcher || typeof fetcher !== 'function') return Promise.resolve();
+  if (surnamesLoadPromise) return surnamesLoadPromise;
+  surnamesLoadPromise = Promise.resolve()
+    .then(() => fetcher())
+    .then((res) => {
+      const list = Array.isArray(res)
+        ? res
+        : res && Array.isArray(res.surnames)
+          ? res.surnames
+          : null;
+      if (list && list.length > 0) setCommonSurnames(list);
+    })
+    .catch(() => {
+      // 网络失败静默降级，继续用兜底姓氏
+    })
+    .then(() => {});
+  return surnamesLoadPromise;
+}
+
+/**
+ * 候选姓名是否以已知姓开头（复姓优先）
+ * @param {string} name
+ * @returns {boolean}
+ */
+function hasKnownSurname(name) {
+  const n = String(name || '');
+  for (let i = 0; i < surnameList.length; i++) {
+    const s = surnameList[i];
+    if (s && n.indexOf(s) === 0) return true;
+  }
+  return false;
+}
+
+/** 排除的地址/机构关键词（含易被误判为姓名的地名碎片） */
+const NAME_BLOCK_WORDS = [
+  '收货人',
+  '收件人',
+  '联系人',
+  '详细地址',
+  '地址',
+  '电话',
+  '手机',
+  '公司',
+  '学校',
+  '小区',
+  '大厦',
+  '广场',
+  '中心',
+  '医院',
+  '药店',
+  '诊所',
+  '街道',
+  '科技',
+  '高科',
+  '园区',
+  '步行',
+  '解放',
+  '只有',
+  '姓名',
+  '省',
+  '市',
+  '区',
+  '县',
+  '路',
+  '号',
+  '栋',
+  '楼',
+  '单元',
+  '室',
+  '村',
+  '镇',
+  '乡',
+  '巷',
+  '弄',
+];
+
+const KEYWORD_STRIP = [
+  '收货人',
+  '收件人',
+  '联系人',
+  '收货',
+  '收件',
+  '联系电话',
+  '联系方式',
+  '手机号码',
+  '手机号',
+  '手机',
+  '电话',
+  '详细地址',
+  '地址',
+  '姓名',
+  '收',
+];
+
+/**
+ * 置信度标记：≥0.8 ✓ / 0.5~0.8 ？ / <0.5 ✗
+ * @param {number} score
+ * @returns {string}
+ */
+export function confidenceMark(score) {
+  const s = Number(score) || 0;
+  if (s >= 0.8) return '✓';
+  if (s >= 0.5) return '？';
+  return '✗';
+}
+
+/**
+ * 空识别结果
+ * @returns {object}
+ */
+function emptyResult() {
+  return {
+    name: '',
+    phone: '',
+    province: '',
+    city: '',
+    area: '',
+    detail: '',
+    confidence: { name: 0, phone: 0, region: 0, detail: 0 },
+  };
+}
+
+/**
+ * 生成名称简称（去行政区后缀）
+ * @param {string} name
+ * @returns {string}
+ */
+function toShort(name) {
+  return String(name || '')
+    .replaceAll(/特别行政区|自治区|壮族|回族|维吾尔/g, '')
+    .replaceAll(/(省|市|区|县|旗|州|盟)$/g, '');
+}
+
+/**
+ * AddressRecognizer：一次性解析粘贴文本
+ */
+export class AddressRecognizer {
+  constructor(tree) {
+    this.tree = Array.isArray(tree) && tree.length > 0 ? tree : regionTree;
+    this._index = null;
+  }
+
+  /**
+   * 懒构建省市区索引，加速全称/简称查找
+   * @returns {{ provinces: Array, byShort: Map }}
+   */
+  _ensureIndex() {
+    if (this._index) return this._index;
+    const provinces = [];
+    for (let i = 0; i < this.tree.length; i++) {
+      const p = this.tree[i];
+      const pShort = p.short || toShort(p.name);
+      const cities = [];
+      const children = p.children || [];
+      // 直辖市：子节点直接是区县，虚拟一层「市辖区」式城市为空，区挂在 province 下
+      const looksLikeDistrict =
+        children.length > 0 &&
+        children.every((c) => {
+          const n = c.name || '';
+          return (
+            /[区县市旗]$/.test(n) && !(c.children && c.children.length > 0)
+          );
+        });
+      if (looksLikeDistrict) {
+        cities.push({
+          name: p.name,
+          short: pShort,
+          isMunicipality: true,
+          districts: children.map((d) => ({
+            name: d.name,
+            short: d.short || toShort(d.name),
+          })),
+        });
+      } else {
+        for (let j = 0; j < children.length; j++) {
+          const c = children[j];
+          const districts = (c.children || []).map((d) => ({
+            name: d.name,
+            short: d.short || toShort(d.name),
+          }));
+          cities.push({
+            name: c.name,
+            short: c.short || toShort(c.name),
+            isMunicipality: false,
+            districts,
+          });
+        }
+      }
+      provinces.push({ name: p.name, short: pShort, cities });
+    }
+    this._index = { provinces };
+    return this._index;
+  }
+
+  /**
+   * 区级：全称、简称、去区/县后再试
+   */
+  _findDistrictHit(text, full, short) {
+    const hit = this._findNameHit(text, full, short);
+    if (hit) return hit;
+    const stripped = String(full || '').replaceAll(/(区|县|市|旗)$/g, '');
+    if (stripped && stripped.length >= 2 && text.indexOf(stripped) >= 0) {
+      return { kind: 'stripped', len: stripped.length };
+    }
+    return null;
+  }
+
+  /**
+   * 在文本中查找全称或简称命中
+   * @returns {{ kind: string, len: number }|null}
+   */
+  _findNameHit(text, full, short) {
+    if (full && text.indexOf(full) >= 0) {
+      return { kind: 'full', len: full.length };
+    }
+    if (short && short.length >= 2 && text.indexOf(short) >= 0) {
+      return { kind: 'short', len: short.length };
+    }
+    return null;
+  }
+
+  _nameAfterPhone(text, phoneInfo) {
+    if (!phoneInfo || !phoneInfo.value) return null;
+    const raw = phoneInfo.raw || phoneInfo.value;
+    const idx = text.indexOf(raw);
+    if (idx === -1) return null;
+    const after = text.slice(idx + raw.length, idx + raw.length + 16);
+    const m = after.match(/^\s*[，,、]?\s*([\u4E00-\u9FA5]{2,6})/);
+    if (!m) return null;
+    const chunk = m[1];
+    for (let len = 2; len <= chunk.length; len++) {
+      const cand = chunk.slice(0, len);
+      if (this.isValidName(cand)) {
+        return { value: cand, confidence: len <= 3 ? 0.8 : 0.7 };
+      }
+    }
+    return null;
+  }
+
+  /**
+   * 从手机号前取名：短到长尝试，避免「张三杭州」整段误判；支持复姓最长 6 字
+   */
+  _nameBeforePhone(text, phoneInfo) {
+    if (!phoneInfo || !phoneInfo.value) return null;
+    const idx = text.indexOf(phoneInfo.raw || phoneInfo.value);
+    if (idx <= 0) return null;
+    const before = text.slice(Math.max(0, idx - 16), idx);
+    const m = before.match(/([\u4E00-\u9FA5]{2,6})\s*$/);
+    if (!m) return null;
+    const chunk = m[1];
+    for (let len = 2; len <= chunk.length; len++) {
+      const cand = chunk.slice(chunk.length - len);
+      if (this.isValidName(cand)) {
+        return { value: cand, confidence: len <= 3 ? 0.85 : 0.75 };
+      }
+    }
+    return null;
+  }
+
+  _nameBeforePhoneKeyword(text) {
+    const re =
+      /([\u4E00-\u9FA5]{2,6})\s*(?:电话|手机|联系电话|联系方式|手机号)/;
+    const m = text.match(re);
+    if (m) return { value: m[1], confidence: 0.78 };
+    return null;
+  }
+
+  _nameByKeyword(text) {
+    // 支持「收件人：张三」「收件人张三」「收 李四」等；长度放宽到 6 以兼容复姓+名
+    const re =
+      /(?:收货人|联系人|收件人|姓名)\s*[：:\s]?\s*([\u4E00-\u9FA5]{2,6})|(?:^|[，,、\s])收\s*[：:\s]?\s*([\u4E00-\u9FA5]{2,6})/;
+    const m = text.match(re);
+    if (m) {
+      const val = m[1] || m[2];
+      if (val) return { value: val, confidence: 0.92 };
+    }
+    return null;
+  }
+
+  _nameFallback(text, phoneInfo) {
+    let rest = text;
+    if (phoneInfo && phoneInfo.raw) {
+      rest = rest.split(phoneInfo.raw).join(' ');
+    }
+    if (phoneInfo && phoneInfo.value) {
+      rest = rest.split(phoneInfo.value).join(' ');
+    }
+    rest = rest.replaceAll(/[0-9+\-()\s]/g, ' ');
+    const parts = rest.match(/[\u4E00-\u9FA5]{2,6}/g) || [];
+    for (let i = 0; i < parts.length; i++) {
+      if (this.isValidName(parts[i])) {
+        return { value: parts[i], confidence: 0.55 };
+      }
+    }
+    return null;
+  }
+
+  /**
+   * 权重：省 3、市 2、区 2；全称 +0.5，简称按长度
+   */
+  _regionScore(pHit, cHit, dHit) {
+    let score = 0;
+    if (pHit) {
+      score += 3;
+      if (pHit.kind === 'full') score += 0.5;
+    }
+    if (cHit && cHit.kind !== 'muni') {
+      score += 2;
+      if (cHit.kind === 'full') score += 0.4;
+    }
+    if (cHit && cHit.kind === 'muni') {
+      score += 0.5;
+    }
+    if (dHit) {
+      score += 2;
+      if (dHit.kind === 'full') score += 0.4;
+      else if (dHit.kind === 'stripped') score += 0.1;
+    }
+    return score;
+  }
+
+  /**
+   * 详细地址：剥离已识别字段、邮编、虚拟号分机与关键词后清理
+   */
+  extractDetail(text, parts) {
+    let rest = String(text || '');
+    const removeList = [
+      parts.phoneRaw || parts.phone,
+      parts.phone,
+      parts.name,
+      parts.province,
+      parts.city,
+      parts.area,
+    ].filter(Boolean);
+    // 也去掉简称形式
+    if (parts.province) removeList.push(toShort(parts.province));
+    if (parts.city) removeList.push(toShort(parts.city));
+    if (parts.area) {
+      removeList.push(
+        toShort(parts.area),
+        String(parts.area).replace(/(区|县)$/g, ''),
+      );
+    }
+    for (let i = 0; i < removeList.length; i++) {
+      const piece = removeList[i];
+      if (piece) rest = rest.split(piece).join(' ');
+    }
+    for (let i = 0; i < KEYWORD_STRIP.length; i++) {
+      rest = rest.split(KEYWORD_STRIP[i]).join(' ');
+    }
+    // 邮编：独立 6 位数字（前后非数字）
+    rest = rest.replaceAll(/(^|[^\d])\d{6}(?=[^\d]|$)/g, '$1');
+    // 虚拟号/转分机残留
+    if (parts.ext) {
+      rest = rest.split(`转${parts.ext}`).join(' ');
+      rest = rest.split(String(parts.ext)).join(' ');
+    }
+    rest = rest.replaceAll(/转\s*\d{3,6}/g, ' ');
+    rest = rest
+      .replaceAll(/[：:，,、；;。.!！？?\-_/\\|]+/g, ' ')
+      .replaceAll(/\s+/g, ' ')
+      .trim();
+    // 智能截断：去掉开头残留的短地名/无意义碎片
+    rest = rest.replace(/^[\u4E00-\u9FA5]{1}\s+/, '');
+    rest = rest.replaceAll(/^(只有|以及|还有|和)\s*/g, '');
+    if (!rest || rest.length < 2) {
+      return { value: '', confidence: 0 };
+    }
+    // 纯语气词不算详细地址
+    if (/^(只有|姓名|地址)$/.test(rest)) {
+      return { value: '', confidence: 0 };
+    }
+    // 含路/街/号等特征则置信度更高
+    let conf = 0.6;
+    if (/[路街巷道号弄苑园村镇乡楼栋单元室]/.test(rest)) conf = 0.85;
+    else if (rest.length >= 6) conf = 0.7;
+    return { value: rest, confidence: conf };
+  }
+
+  /**
+   * 姓名 5 策略按优先级
+   * @param {string} text
+   * @param {{ value: string }} phoneInfo
+   */
+  extractName(text, phoneInfo) {
+    const strategies = [
+      () => this._nameByKeyword(text),
+      () => this._nameBeforePhone(text, phoneInfo),
+      () => this._nameAfterPhone(text, phoneInfo),
+      () => this._nameBeforePhoneKeyword(text),
+      () => this._nameFallback(text, phoneInfo),
+    ];
+    for (let i = 0; i < strategies.length; i++) {
+      const hit = strategies[i]();
+      if (hit && hit.value && this.isValidName(hit.value)) {
+        return {
+          value: hit.value,
+          confidence: hit.confidence || Math.max(0.55, 0.95 - i * 0.1),
+        };
+      }
+    }
+    return { value: '', confidence: 0 };
+  }
+
+  /**
+   * 按优先级提取电话：手机（含空格/横线/+86）> 座机 > 400/800
+   * value 输出连续 11 位；raw 保留原文片段便于从 detail 剔除；ext 为转分机
+   * @param {string} text
+   * @returns {{ value: string, confidence: number, raw: string, ext: string }}
+   */
+  extractPhone(text) {
+    const src = String(text || '');
+    // 宽松匹配带空格/横线的手机，再规范化
+    const looseMobile = src.match(
+      /(?:\+?86[-\s]?)?(1[3-9](?:[-\s]?\d){9})(?:\s*转\s*\d{3,6})?/,
+    );
+    if (looseMobile) {
+      const raw = looseMobile[0];
+      const digits = raw.replaceAll(/\D/g, '');
+      let mobile = digits;
+      if (mobile.indexOf('86') === 0 && mobile.length >= 13) {
+        mobile = mobile.slice(2);
+      }
+      mobile = mobile.slice(0, 11);
+      const extMatch = raw.match(/转\s*(\d{3,6})/);
+      const ext = extMatch ? extMatch[1] : '';
+      if (/^1[3-9]\d{9}$/.test(mobile)) {
+        return { value: mobile, confidence: 0.95, raw, ext };
+      }
+    }
+    const compact = src.replaceAll(/[\s\-()（）]/g, '').replace(/^\+?86/, '');
+    const compactMobile = compact.match(/1[3-9]\d{9}/);
+    if (compactMobile) {
+      const mobile = compactMobile[0];
+      const idx = compact.indexOf(mobile);
+      const after = compact.slice(idx + 11, idx + 20);
+      const extMatch = after.match(/^转(\d{3,6})/);
+      return {
+        value: mobile,
+        confidence: 0.92,
+        raw: mobile,
+        ext: extMatch ? extMatch[1] : '',
+      };
+    }
+    const landline = src.match(/0\d{2,3}[-\s]?\d{7,8}/);
+    if (landline) {
+      return {
+        value: landline[0].replaceAll(/\s+/g, '-'),
+        confidence: 0.85,
+        raw: landline[0],
+        ext: '',
+      };
+    }
+    const service = src.match(/[48]00[-\s]?\d{3,4}[-\s]?\d{3,4}/);
+    if (service) {
+      return {
+        value: service[0].replaceAll(/\s+/g, '-'),
+        confidence: 0.75,
+        raw: service[0],
+        ext: '',
+      };
+    }
+    return { value: '', confidence: 0, raw: '', ext: '' };
+  }
+
+  /**
+   * 省市区三级联动名称树打分匹配，取总分最高
+   * @param {string} text
+   * @returns {{ province: string, city: string, area: string, confidence: number }}
+   */
+  extractRegion(text) {
+    const { provinces } = this._ensureIndex();
+    let best = { score: 0, province: '', city: '', area: '', hits: 0 };
+    const compact = text.replaceAll(/\s+/g, '');
+    for (let i = 0; i < provinces.length; i++) {
+      const p = provinces[i];
+      const pHit = this._findNameHit(compact, p.name, p.short);
+      for (let j = 0; j < p.cities.length; j++) {
+        const c = p.cities[j];
+        const cHit = this._findNameHit(
+          compact,
+          c.isMunicipality ? '' : c.name,
+          c.isMunicipality ? '' : c.short,
+        );
+        const districts = c.districts || [];
+        if (districts.length === 0) {
+          const score = this._regionScore(pHit, cHit, null);
+          if (score > best.score) {
+            best = {
+              score,
+              province: pHit ? p.name : '',
+              city: cHit && !c.isMunicipality ? c.name : '',
+              area: '',
+              hits: (pHit ? 1 : 0) + (cHit ? 1 : 0),
+            };
+          }
+          continue;
+        }
+        for (let k = 0; k < districts.length; k++) {
+          const d = districts[k];
+          const dHit = this._findDistrictHit(compact, d.name, d.short);
+          // 允许省略任一级：至少命中区，或省+市
+          if (!pHit && !cHit && !dHit) continue;
+          if (!pHit && !dHit && cHit) {
+            // 仅市也可能，但需有一定把握
+          }
+          const score = this._regionScore(
+            pHit,
+            cHit ||
+              (c.isMunicipality && dHit ? { kind: 'muni', len: 0 } : null),
+            dHit,
+          );
+          if (score > best.score) {
+            const hitAny = !!(pHit || cHit || dHit);
+            best = {
+              score,
+              province: hitAny ? p.name : '',
+              city: c.isMunicipality
+                ? ''
+                : cHit
+                  ? c.name
+                  : dHit && pHit
+                    ? c.name
+                    : '',
+              area: dHit ? d.name : '',
+              hits:
+                (pHit || hitAny ? 1 : 0) +
+                (cHit || (c.isMunicipality && dHit) ? 1 : 0) +
+                (dHit ? 1 : 0),
+            };
+            // 直辖市：命中区则省必填、市留空
+            if (c.isMunicipality && dHit) {
+              best.province = p.name;
+              best.city = '';
+              best.area = d.name;
+            }
+          }
+        }
+        // 仅省+市（无区）
+        if (pHit || cHit) {
+          const score = this._regionScore(pHit, cHit, null);
+          if (score > best.score && (pHit || cHit)) {
+            best = {
+              score,
+              province: pHit ? p.name : p.name,
+              city: c.isMunicipality ? '' : cHit ? c.name : '',
+              area: '',
+              hits: (pHit ? 1 : 0) + (cHit ? 1 : 0),
+            };
+            if (!pHit && cHit && !c.isMunicipality) {
+              best.province = p.name;
+            }
+          }
+        }
+      }
+      // 仅省
+      if (pHit) {
+        const score = this._regionScore(pHit, null, null);
+        if (score > best.score) {
+          best = {
+            score,
+            province: p.name,
+            city: '',
+            area: '',
+            hits: 1,
+          };
+        }
+      }
+    }
+    if (best.score <= 0) {
+      return { province: '', city: '', area: '', confidence: 0 };
+    }
+    // 归一化置信度：满分约 3+2+2=7，全称加权更高
+    let conf = Math.min(0.98, best.score / 7);
+    if (best.hits >= 3) conf = Math.max(conf, 0.9);
+    else if (best.hits === 2) conf = Math.max(conf, 0.75);
+    else conf = Math.max(conf, 0.55);
+    return {
+      province: best.province,
+      city: best.city,
+      area: best.area,
+      confidence: conf,
+    };
+  }
+
+  /**
+   * 姓名有效性：2~6 字、已知姓（复姓优先前缀匹配）、无地址特征
+   * @param {string} name
+   * @returns {boolean}
+   */
+  isValidName(name) {
+    const n = String(name || '').trim();
+    if (n.length < 2 || n.length > 6) return false;
+    if (!/^[\u4E00-\u9FA5]+$/.test(n)) return false;
+    if (!hasKnownSurname(n)) return false;
+    for (let i = 0; i < NAME_BLOCK_WORDS.length; i++) {
+      if (n.indexOf(NAME_BLOCK_WORDS[i]) >= 0) return false;
+    }
+    // 含行政区/路号特征则不是姓名（扩展姓表后「杭州」等更易误判）
+    if (/[路街号栋楼单元室省市县区州盟旗]/.test(n)) return false;
+    if (/\d/.test(n)) return false;
+    return true;
+  }
+
+  /**
+   * 电商多行模板：把「收货人：xxx」等标签行展平成可识别的连续文本
+   * 无换行/无标签时原样返回，避免破坏乱序单行粘贴
+   * @param {string} text
+   * @returns {string}
+   */
+  normalizeEcommerceText(text) {
+    const src = String(text || '');
+    if (src.indexOf('\n') < 0 && src.indexOf('\r') < 0) return src;
+    const labelRe =
+      /^(?:收货人|收件人|联系人|姓名|手机号码|手机号|手机|联系电话|联系方式|电话|所在地区|详细地址|地址)\s*[：:]\s*(.+)$/;
+    const lines = src.split(/\r?\n/);
+    const parts = [];
+    let hitLabel = false;
+    for (let i = 0; i < lines.length; i++) {
+      const line = String(lines[i] || '').trim();
+      if (!line) continue;
+      const m = line.match(labelRe);
+      if (m && m[1]) {
+        hitLabel = true;
+        parts.push(m[1].trim());
+      } else {
+        parts.push(line);
+      }
+    }
+    return hitLabel ? parts.join(' ') : src.replaceAll(/\r?\n/g, ' ');
+  }
+
+  /**
+   * 主入口：识别整段文本
+   * 先展开电商多行标签，再按 电话→省市区→姓名→详情 顺序抽取
+   * @param {string} raw
+   * @returns {object}
+   */
+  recognize(raw) {
+    const text = this.normalizeEcommerceText(String(raw || '').trim());
+    if (!text) return emptyResult();
+    try {
+      const phoneInfo = this.extractPhone(text);
+      const regionInfo = this.extractRegion(text);
+      const nameInfo = this.extractName(text, phoneInfo);
+      const detailInfo = this.extractDetail(text, {
+        phone: phoneInfo.value,
+        phoneRaw: phoneInfo.raw,
+        ext: phoneInfo.ext || '',
+        province: regionInfo.province,
+        city: regionInfo.city,
+        area: regionInfo.area,
+        name: nameInfo.value,
+      });
+      return {
+        name: nameInfo.value || '',
+        phone: phoneInfo.value || '',
+        province: regionInfo.province || '',
+        city: regionInfo.city || '',
+        area: regionInfo.area || '',
+        detail: detailInfo.value || '',
+        confidence: {
+          name: nameInfo.confidence || 0,
+          phone: phoneInfo.confidence || 0,
+          region: regionInfo.confidence || 0,
+          detail: detailInfo.confidence || 0,
+        },
+      };
+    } catch {
+      return emptyResult();
+    }
+  }
+}
+
+/** 默认单例，便于页面直接调用 */
+export const addressRecognizer = new AddressRecognizer(regionTree);
+
+/**
+ * 便捷方法
+ * @param {string} text
+ */
+export function recognizeAddress(text) {
+  return addressRecognizer.recognize(text);
+}
diff --git a/apps/web-antd/src/util/region-names.json b/apps/web-antd/src/util/region-names.json
new file mode 100644
index 00000000..a6160e5c
--- /dev/null
+++ b/apps/web-antd/src/util/region-names.json
@@ -0,0 +1,5587 @@
+[
+  {
+    "name": "北京市",
+    "short": "北京",
+    "children": [
+      { "name": "东城区", "short": "东城" },
+      { "name": "西城区", "short": "西城" },
+      { "name": "朝阳区", "short": "朝阳" },
+      { "name": "丰台区", "short": "丰台" },
+      { "name": "石景山区", "short": "石景山" },
+      { "name": "海淀区", "short": "海淀" },
+      { "name": "门头沟区", "short": "门头沟" },
+      { "name": "房山区", "short": "房山" },
+      { "name": "通州区", "short": "通州" },
+      { "name": "顺义区", "short": "顺义" },
+      { "name": "昌平区", "short": "昌平" },
+      { "name": "大兴区", "short": "大兴" },
+      { "name": "怀柔区", "short": "怀柔" },
+      { "name": "平谷区", "short": "平谷" },
+      { "name": "密云区", "short": "密云" },
+      { "name": "延庆区", "short": "延庆" }
+    ]
+  },
+  {
+    "name": "天津市",
+    "short": "天津",
+    "children": [
+      { "name": "和平区", "short": "和平" },
+      { "name": "河东区", "short": "河东" },
+      { "name": "河西区", "short": "河西" },
+      { "name": "南开区", "short": "南开" },
+      { "name": "河北区", "short": "河北" },
+      { "name": "红桥区", "short": "红桥" },
+      { "name": "东丽区", "short": "东丽" },
+      { "name": "西青区", "short": "西青" },
+      { "name": "津南区", "short": "津南" },
+      { "name": "北辰区", "short": "北辰" },
+      { "name": "武清区", "short": "武清" },
+      { "name": "宝坻区", "short": "宝坻" },
+      { "name": "滨海新区", "short": "滨海新" },
+      { "name": "宁河区", "short": "宁河" },
+      { "name": "静海区", "short": "静海" },
+      { "name": "蓟州区", "short": "蓟州" }
+    ]
+  },
+  {
+    "name": "河北省",
+    "short": "河北",
+    "children": [
+      {
+        "name": "石家庄市",
+        "short": "石家庄",
+        "children": [
+          { "name": "长安区", "short": "长安" },
+          { "name": "桥西区", "short": "桥西" },
+          { "name": "新华区", "short": "新华" },
+          { "name": "井陉矿区", "short": "井陉矿" },
+          { "name": "裕华区", "short": "裕华" },
+          { "name": "藁城区", "short": "藁城" },
+          { "name": "鹿泉区", "short": "鹿泉" },
+          { "name": "栾城区", "short": "栾城" },
+          { "name": "井陉县", "short": "井陉" },
+          { "name": "正定县", "short": "正定" },
+          { "name": "行唐县", "short": "行唐" },
+          { "name": "灵寿县", "short": "灵寿" },
+          { "name": "高邑县", "short": "高邑" },
+          { "name": "深泽县", "short": "深泽" },
+          { "name": "赞皇县", "short": "赞皇" },
+          { "name": "无极县", "short": "无极" },
+          { "name": "平山县", "short": "平山" },
+          { "name": "元氏县", "short": "元氏" },
+          { "name": "赵县", "short": "赵" },
+          { "name": "辛集市", "short": "辛集" },
+          { "name": "晋州市", "short": "晋州" },
+          { "name": "新乐市", "short": "新乐" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "石家庄高新技术产业开发区",
+            "short": "石家庄高新技术产业开发"
+          },
+          { "name": "石家庄循环化工园区", "short": "石家庄循环化工园" }
+        ]
+      },
+      {
+        "name": "唐山市",
+        "short": "唐山",
+        "children": [
+          { "name": "路南区", "short": "路南" },
+          { "name": "路北区", "short": "路北" },
+          { "name": "古冶区", "short": "古冶" },
+          { "name": "开平区", "short": "开平" },
+          { "name": "丰南区", "short": "丰南" },
+          { "name": "丰润区", "short": "丰润" },
+          { "name": "曹妃甸区", "short": "曹妃甸" },
+          { "name": "滦南县", "short": "滦南" },
+          { "name": "乐亭县", "short": "乐亭" },
+          { "name": "迁西县", "short": "迁西" },
+          { "name": "玉田县", "short": "玉田" },
+          { "name": "遵化市", "short": "遵化" },
+          { "name": "迁安市", "short": "迁安" },
+          { "name": "滦州市", "short": "滦州" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "河北唐山芦台经济开发区", "short": "河北唐山芦台经济开发" },
+          { "name": "唐山市汉沽管理区", "short": "唐山市汉沽管理" },
+          { "name": "唐山高新技术产业开发区", "short": "唐山高新技术产业开发" },
+          { "name": "河北唐山海港经济开发区", "short": "河北唐山海港经济开发" }
+        ]
+      },
+      {
+        "name": "秦皇岛市",
+        "short": "秦皇岛",
+        "children": [
+          { "name": "海港区", "short": "海港" },
+          { "name": "山海关区", "short": "山海关" },
+          { "name": "北戴河区", "short": "北戴河" },
+          { "name": "抚宁区", "short": "抚宁" },
+          { "name": "青龙满族自治县", "short": "青龙满族自治" },
+          { "name": "昌黎县", "short": "昌黎" },
+          { "name": "卢龙县", "short": "卢龙" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "秦皇岛市经济技术开发区", "short": "秦皇岛市经济技术开发" },
+          { "name": "北戴河新区", "short": "北戴河新" }
+        ]
+      },
+      {
+        "name": "邯郸市",
+        "short": "邯郸",
+        "children": [
+          { "name": "邯山区", "short": "邯山" },
+          { "name": "丛台区", "short": "丛台" },
+          { "name": "复兴区", "short": "复兴" },
+          { "name": "峰峰矿区", "short": "峰峰矿" },
+          { "name": "肥乡区", "short": "肥乡" },
+          { "name": "永年区", "short": "永年" },
+          { "name": "临漳县", "short": "临漳" },
+          { "name": "成安县", "short": "成安" },
+          { "name": "大名县", "short": "大名" },
+          { "name": "涉县", "short": "涉" },
+          { "name": "磁县", "short": "磁" },
+          { "name": "邱县", "short": "邱" },
+          { "name": "鸡泽县", "short": "鸡泽" },
+          { "name": "广平县", "short": "广平" },
+          { "name": "馆陶县", "short": "馆陶" },
+          { "name": "魏县", "short": "魏" },
+          { "name": "曲周县", "short": "曲周" },
+          { "name": "武安市", "short": "武安" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "邯郸经济技术开发区", "short": "邯郸经济技术开发" },
+          { "name": "邯郸冀南新区", "short": "邯郸冀南新" }
+        ]
+      },
+      {
+        "name": "邢台市",
+        "short": "邢台",
+        "children": [
+          { "name": "襄都区", "short": "襄都" },
+          { "name": "信都区", "short": "信都" },
+          { "name": "任泽区", "short": "任泽" },
+          { "name": "南和区", "short": "南和" },
+          { "name": "临城县", "short": "临城" },
+          { "name": "内丘县", "short": "内丘" },
+          { "name": "柏乡县", "short": "柏乡" },
+          { "name": "隆尧县", "short": "隆尧" },
+          { "name": "宁晋县", "short": "宁晋" },
+          { "name": "巨鹿县", "short": "巨鹿" },
+          { "name": "新河县", "short": "新河" },
+          { "name": "广宗县", "short": "广宗" },
+          { "name": "平乡县", "short": "平乡" },
+          { "name": "威县", "short": "威" },
+          { "name": "清河县", "short": "清河" },
+          { "name": "临西县", "short": "临西" },
+          { "name": "南宫市", "short": "南宫" },
+          { "name": "沙河市", "short": "沙河" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "河北邢台经济开发区", "short": "河北邢台经济开发" }
+        ]
+      },
+      {
+        "name": "保定市",
+        "short": "保定",
+        "children": [
+          { "name": "竞秀区", "short": "竞秀" },
+          { "name": "莲池区", "short": "莲池" },
+          { "name": "满城区", "short": "满城" },
+          { "name": "清苑区", "short": "清苑" },
+          { "name": "徐水区", "short": "徐水" },
+          { "name": "涞水县", "short": "涞水" },
+          { "name": "阜平县", "short": "阜平" },
+          { "name": "定兴县", "short": "定兴" },
+          { "name": "唐县", "short": "唐" },
+          { "name": "高阳县", "short": "高阳" },
+          { "name": "容城县", "short": "容城" },
+          { "name": "涞源县", "short": "涞源" },
+          { "name": "望都县", "short": "望都" },
+          { "name": "安新县", "short": "安新" },
+          { "name": "易县", "short": "易" },
+          { "name": "曲阳县", "short": "曲阳" },
+          { "name": "蠡县", "short": "蠡" },
+          { "name": "顺平县", "short": "顺平" },
+          { "name": "博野县", "short": "博野" },
+          { "name": "雄县", "short": "雄" },
+          { "name": "涿州市", "short": "涿州" },
+          { "name": "定州市", "short": "定州" },
+          { "name": "安国市", "short": "安国" },
+          { "name": "高碑店市", "short": "高碑店" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "保定高新技术产业开发区", "short": "保定高新技术产业开发" },
+          { "name": "保定白沟新城", "short": "保定白沟新城" }
+        ]
+      },
+      {
+        "name": "张家口市",
+        "short": "张家口",
+        "children": [
+          { "name": "桥东区", "short": "桥东" },
+          { "name": "桥西区", "short": "桥西" },
+          { "name": "宣化区", "short": "宣化" },
+          { "name": "下花园区", "short": "下花园" },
+          { "name": "万全区", "short": "万全" },
+          { "name": "崇礼区", "short": "崇礼" },
+          { "name": "张北县", "short": "张北" },
+          { "name": "康保县", "short": "康保" },
+          { "name": "沽源县", "short": "沽源" },
+          { "name": "尚义县", "short": "尚义" },
+          { "name": "蔚县", "short": "蔚" },
+          { "name": "阳原县", "short": "阳原" },
+          { "name": "怀安县", "short": "怀安" },
+          { "name": "怀来县", "short": "怀来" },
+          { "name": "涿鹿县", "short": "涿鹿" },
+          { "name": "赤城县", "short": "赤城" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "张家口经济开发区", "short": "张家口经济开发" },
+          { "name": "张家口市察北管理区", "short": "张家口市察北管理" },
+          { "name": "张家口市塞北管理区", "short": "张家口市塞北管理" }
+        ]
+      },
+      {
+        "name": "承德市",
+        "short": "承德",
+        "children": [
+          { "name": "双桥区", "short": "双桥" },
+          { "name": "双滦区", "short": "双滦" },
+          { "name": "鹰手营子矿区", "short": "鹰手营子矿" },
+          { "name": "承德县", "short": "承德" },
+          { "name": "兴隆县", "short": "兴隆" },
+          { "name": "滦平县", "short": "滦平" },
+          { "name": "隆化县", "short": "隆化" },
+          { "name": "丰宁满族自治县", "short": "丰宁满族自治" },
+          { "name": "宽城满族自治县", "short": "宽城满族自治" },
+          { "name": "围场满族蒙古族自治县", "short": "围场满族蒙古族自治" },
+          { "name": "平泉市", "short": "平泉" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "承德高新技术产业开发区", "short": "承德高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "沧州市",
+        "short": "沧州",
+        "children": [
+          { "name": "新华区", "short": "新华" },
+          { "name": "运河区", "short": "运河" },
+          { "name": "沧县", "short": "沧" },
+          { "name": "青县", "short": "青" },
+          { "name": "东光县", "short": "东光" },
+          { "name": "海兴县", "short": "海兴" },
+          { "name": "盐山县", "short": "盐山" },
+          { "name": "肃宁县", "short": "肃宁" },
+          { "name": "南皮县", "short": "南皮" },
+          { "name": "吴桥县", "short": "吴桥" },
+          { "name": "献县", "short": "献" },
+          { "name": "孟村回族自治县", "short": "孟村自治" },
+          { "name": "泊头市", "short": "泊头" },
+          { "name": "任丘市", "short": "任丘" },
+          { "name": "黄骅市", "short": "黄骅" },
+          { "name": "河间市", "short": "河间" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "河北沧州经济开发区", "short": "河北沧州经济开发" },
+          { "name": "沧州高新技术产业开发区", "short": "沧州高新技术产业开发" },
+          { "name": "沧州渤海新区", "short": "沧州渤海新" }
+        ]
+      },
+      {
+        "name": "廊坊市",
+        "short": "廊坊",
+        "children": [
+          { "name": "安次区", "short": "安次" },
+          { "name": "广阳区", "short": "广阳" },
+          { "name": "固安县", "short": "固安" },
+          { "name": "永清县", "short": "永清" },
+          { "name": "香河县", "short": "香河" },
+          { "name": "大城县", "short": "大城" },
+          { "name": "文安县", "short": "文安" },
+          { "name": "大厂回族自治县", "short": "大厂自治" },
+          { "name": "霸州市", "short": "霸州" },
+          { "name": "三河市", "short": "三河" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "廊坊经济技术开发区", "short": "廊坊经济技术开发" }
+        ]
+      },
+      {
+        "name": "衡水市",
+        "short": "衡水",
+        "children": [
+          { "name": "桃城区", "short": "桃城" },
+          { "name": "冀州区", "short": "冀州" },
+          { "name": "枣强县", "short": "枣强" },
+          { "name": "武邑县", "short": "武邑" },
+          { "name": "武强县", "short": "武强" },
+          { "name": "饶阳县", "short": "饶阳" },
+          { "name": "安平县", "short": "安平" },
+          { "name": "故城县", "short": "故城" },
+          { "name": "景县", "short": "景" },
+          { "name": "阜城县", "short": "阜城" },
+          { "name": "深州市", "short": "深州" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "河北衡水高新技术产业开发区",
+            "short": "河北衡水高新技术产业开发"
+          },
+          { "name": "衡水滨湖新区", "short": "衡水滨湖新" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "山西省",
+    "short": "山西",
+    "children": [
+      {
+        "name": "太原市",
+        "short": "太原",
+        "children": [
+          { "name": "小店区", "short": "小店" },
+          { "name": "迎泽区", "short": "迎泽" },
+          { "name": "杏花岭区", "short": "杏花岭" },
+          { "name": "尖草坪区", "short": "尖草坪" },
+          { "name": "万柏林区", "short": "万柏林" },
+          { "name": "晋源区", "short": "晋源" },
+          { "name": "清徐县", "short": "清徐" },
+          { "name": "阳曲县", "short": "阳曲" },
+          { "name": "娄烦县", "short": "娄烦" },
+          { "name": "古交市", "short": "古交" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "山西转型综合改革示范区", "short": "山西转型综合改革示范" }
+        ]
+      },
+      {
+        "name": "大同市",
+        "short": "大同",
+        "children": [
+          { "name": "新荣区", "short": "新荣" },
+          { "name": "平城区", "short": "平城" },
+          { "name": "云冈区", "short": "云冈" },
+          { "name": "云州区", "short": "云州" },
+          { "name": "阳高县", "short": "阳高" },
+          { "name": "天镇县", "short": "天镇" },
+          { "name": "广灵县", "short": "广灵" },
+          { "name": "灵丘县", "short": "灵丘" },
+          { "name": "浑源县", "short": "浑源" },
+          { "name": "左云县", "short": "左云" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "山西大同经济开发区", "short": "山西大同经济开发" }
+        ]
+      },
+      {
+        "name": "阳泉市",
+        "short": "阳泉",
+        "children": [
+          { "name": "城区", "short": "城" },
+          { "name": "矿区", "short": "矿" },
+          { "name": "郊区", "short": "郊" },
+          { "name": "平定县", "short": "平定" },
+          { "name": "盂县", "short": "盂" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "长治市",
+        "short": "长治",
+        "children": [
+          { "name": "潞州区", "short": "潞州" },
+          { "name": "上党区", "short": "上党" },
+          { "name": "屯留区", "short": "屯留" },
+          { "name": "潞城区", "short": "潞城" },
+          { "name": "襄垣县", "short": "襄垣" },
+          { "name": "平顺县", "short": "平顺" },
+          { "name": "黎城县", "short": "黎城" },
+          { "name": "壶关县", "short": "壶关" },
+          { "name": "长子县", "short": "长子" },
+          { "name": "武乡县", "short": "武乡" },
+          { "name": "沁县", "short": "沁" },
+          { "name": "沁源县", "short": "沁源" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "山西长治高新技术产业园区",
+            "short": "山西长治高新技术产业园"
+          }
+        ]
+      },
+      {
+        "name": "晋城市",
+        "short": "晋城",
+        "children": [
+          { "name": "城区", "short": "城" },
+          { "name": "沁水县", "short": "沁水" },
+          { "name": "阳城县", "short": "阳城" },
+          { "name": "陵川县", "short": "陵川" },
+          { "name": "泽州县", "short": "泽州" },
+          { "name": "高平市", "short": "高平" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "朔州市",
+        "short": "朔州",
+        "children": [
+          { "name": "朔城区", "short": "朔城" },
+          { "name": "平鲁区", "short": "平鲁" },
+          { "name": "山阴县", "short": "山阴" },
+          { "name": "应县", "short": "应" },
+          { "name": "右玉县", "short": "右玉" },
+          { "name": "怀仁市", "short": "怀仁" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "山西朔州经济开发区", "short": "山西朔州经济开发" }
+        ]
+      },
+      {
+        "name": "晋中市",
+        "short": "晋中",
+        "children": [
+          { "name": "榆次区", "short": "榆次" },
+          { "name": "太谷区", "short": "太谷" },
+          { "name": "榆社县", "short": "榆社" },
+          { "name": "左权县", "short": "左权" },
+          { "name": "和顺县", "short": "和顺" },
+          { "name": "昔阳县", "short": "昔阳" },
+          { "name": "寿阳县", "short": "寿阳" },
+          { "name": "祁县", "short": "祁" },
+          { "name": "平遥县", "short": "平遥" },
+          { "name": "灵石县", "short": "灵石" },
+          { "name": "介休市", "short": "介休" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "运城市",
+        "short": "运城",
+        "children": [
+          { "name": "盐湖区", "short": "盐湖" },
+          { "name": "临猗县", "short": "临猗" },
+          { "name": "万荣县", "short": "万荣" },
+          { "name": "闻喜县", "short": "闻喜" },
+          { "name": "稷山县", "short": "稷山" },
+          { "name": "新绛县", "short": "新绛" },
+          { "name": "绛县", "short": "绛" },
+          { "name": "垣曲县", "short": "垣曲" },
+          { "name": "夏县", "short": "夏" },
+          { "name": "平陆县", "short": "平陆" },
+          { "name": "芮城县", "short": "芮城" },
+          { "name": "永济市", "short": "永济" },
+          { "name": "河津市", "short": "河津" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "忻州市",
+        "short": "忻州",
+        "children": [
+          { "name": "忻府区", "short": "忻府" },
+          { "name": "定襄县", "short": "定襄" },
+          { "name": "五台县", "short": "五台" },
+          { "name": "代县", "short": "代" },
+          { "name": "繁峙县", "short": "繁峙" },
+          { "name": "宁武县", "short": "宁武" },
+          { "name": "静乐县", "short": "静乐" },
+          { "name": "神池县", "short": "神池" },
+          { "name": "五寨县", "short": "五寨" },
+          { "name": "岢岚县", "short": "岢岚" },
+          { "name": "河曲县", "short": "河曲" },
+          { "name": "保德县", "short": "保德" },
+          { "name": "偏关县", "short": "偏关" },
+          { "name": "原平市", "short": "原平" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "五台山风景名胜区", "short": "五台山风景名胜" }
+        ]
+      },
+      {
+        "name": "临汾市",
+        "short": "临汾",
+        "children": [
+          { "name": "尧都区", "short": "尧都" },
+          { "name": "曲沃县", "short": "曲沃" },
+          { "name": "翼城县", "short": "翼城" },
+          { "name": "襄汾县", "short": "襄汾" },
+          { "name": "洪洞县", "short": "洪洞" },
+          { "name": "古县", "short": "古" },
+          { "name": "安泽县", "short": "安泽" },
+          { "name": "浮山县", "short": "浮山" },
+          { "name": "吉县", "short": "吉" },
+          { "name": "乡宁县", "short": "乡宁" },
+          { "name": "大宁县", "short": "大宁" },
+          { "name": "隰县", "short": "隰" },
+          { "name": "永和县", "short": "永和" },
+          { "name": "蒲县", "short": "蒲" },
+          { "name": "汾西县", "short": "汾西" },
+          { "name": "侯马市", "short": "侯马" },
+          { "name": "霍州市", "short": "霍州" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "吕梁市",
+        "short": "吕梁",
+        "children": [
+          { "name": "离石区", "short": "离石" },
+          { "name": "文水县", "short": "文水" },
+          { "name": "交城县", "short": "交城" },
+          { "name": "兴县", "short": "兴" },
+          { "name": "临县", "short": "临" },
+          { "name": "柳林县", "short": "柳林" },
+          { "name": "石楼县", "short": "石楼" },
+          { "name": "岚县", "short": "岚" },
+          { "name": "方山县", "short": "方山" },
+          { "name": "中阳县", "short": "中阳" },
+          { "name": "交口县", "short": "交口" },
+          { "name": "孝义市", "short": "孝义" },
+          { "name": "汾阳市", "short": "汾阳" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "内蒙古自治区",
+    "short": "内蒙古",
+    "children": [
+      {
+        "name": "呼和浩特市",
+        "short": "呼和浩特",
+        "children": [
+          { "name": "新城区", "short": "新城" },
+          { "name": "回民区", "short": "回民" },
+          { "name": "玉泉区", "short": "玉泉" },
+          { "name": "赛罕区", "short": "赛罕" },
+          { "name": "土默特左旗", "short": "土默特左" },
+          { "name": "托克托县", "short": "托克托" },
+          { "name": "和林格尔县", "short": "和林格尔" },
+          { "name": "清水河县", "short": "清水河" },
+          { "name": "武川县", "short": "武川" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "呼和浩特经济技术开发区", "short": "呼和浩特经济技术开发" }
+        ]
+      },
+      {
+        "name": "包头市",
+        "short": "包头",
+        "children": [
+          { "name": "东河区", "short": "东河" },
+          { "name": "昆都仑区", "short": "昆都仑" },
+          { "name": "青山区", "short": "青山" },
+          { "name": "石拐区", "short": "石拐" },
+          { "name": "白云鄂博矿区", "short": "白云鄂博矿" },
+          { "name": "九原区", "short": "九原" },
+          { "name": "土默特右旗", "short": "土默特右" },
+          { "name": "固阳县", "short": "固阳" },
+          { "name": "达尔罕茂明安联合旗", "short": "达尔罕茂明安联合" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "包头稀土高新技术产业开发区",
+            "short": "包头稀土高新技术产业开发"
+          }
+        ]
+      },
+      {
+        "name": "乌海市",
+        "short": "乌海",
+        "children": [
+          { "name": "海勃湾区", "short": "海勃湾" },
+          { "name": "海南区", "short": "海南" },
+          { "name": "乌达区", "short": "乌达" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "赤峰市",
+        "short": "赤峰",
+        "children": [
+          { "name": "红山区", "short": "红山" },
+          { "name": "元宝山区", "short": "元宝山" },
+          { "name": "松山区", "short": "松山" },
+          { "name": "阿鲁科尔沁旗", "short": "阿鲁科尔沁" },
+          { "name": "巴林左旗", "short": "巴林左" },
+          { "name": "巴林右旗", "short": "巴林右" },
+          { "name": "林西县", "short": "林西" },
+          { "name": "克什克腾旗", "short": "克什克腾" },
+          { "name": "翁牛特旗", "short": "翁牛特" },
+          { "name": "喀喇沁旗", "short": "喀喇沁" },
+          { "name": "宁城县", "short": "宁城" },
+          { "name": "敖汉旗", "short": "敖汉" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "通辽市",
+        "short": "通辽",
+        "children": [
+          { "name": "科尔沁区", "short": "科尔沁" },
+          { "name": "科尔沁左翼中旗", "short": "科尔沁左翼中" },
+          { "name": "科尔沁左翼后旗", "short": "科尔沁左翼后" },
+          { "name": "开鲁县", "short": "开鲁" },
+          { "name": "库伦旗", "short": "库伦" },
+          { "name": "奈曼旗", "short": "奈曼" },
+          { "name": "扎鲁特旗", "short": "扎鲁特" },
+          { "name": "霍林郭勒市", "short": "霍林郭勒" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "通辽经济技术开发区", "short": "通辽经济技术开发" }
+        ]
+      },
+      {
+        "name": "鄂尔多斯市",
+        "short": "鄂尔多斯",
+        "children": [
+          { "name": "东胜区", "short": "东胜" },
+          { "name": "康巴什区", "short": "康巴什" },
+          { "name": "达拉特旗", "short": "达拉特" },
+          { "name": "准格尔旗", "short": "准格尔" },
+          { "name": "鄂托克前旗", "short": "鄂托克前" },
+          { "name": "鄂托克旗", "short": "鄂托克" },
+          { "name": "杭锦旗", "short": "杭锦" },
+          { "name": "乌审旗", "short": "乌审" },
+          { "name": "伊金霍洛旗", "short": "伊金霍洛" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "呼伦贝尔市",
+        "short": "呼伦贝尔",
+        "children": [
+          { "name": "海拉尔区", "short": "海拉尔" },
+          { "name": "扎赉诺尔区", "short": "扎赉诺尔" },
+          { "name": "阿荣旗", "short": "阿荣" },
+          { "name": "莫力达瓦达斡尔族自治旗", "short": "莫力达瓦达斡尔族自治" },
+          { "name": "鄂伦春自治旗", "short": "鄂伦春自治" },
+          { "name": "鄂温克族自治旗", "short": "鄂温克族自治" },
+          { "name": "陈巴尔虎旗", "short": "陈巴尔虎" },
+          { "name": "新巴尔虎左旗", "short": "新巴尔虎左" },
+          { "name": "新巴尔虎右旗", "short": "新巴尔虎右" },
+          { "name": "满洲里市", "short": "满洲里" },
+          { "name": "牙克石市", "short": "牙克石" },
+          { "name": "扎兰屯市", "short": "扎兰屯" },
+          { "name": "额尔古纳市", "short": "额尔古纳" },
+          { "name": "根河市", "short": "根河" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "巴彦淖尔市",
+        "short": "巴彦淖尔",
+        "children": [
+          { "name": "临河区", "short": "临河" },
+          { "name": "五原县", "short": "五原" },
+          { "name": "磴口县", "short": "磴口" },
+          { "name": "乌拉特前旗", "short": "乌拉特前" },
+          { "name": "乌拉特中旗", "short": "乌拉特中" },
+          { "name": "乌拉特后旗", "short": "乌拉特后" },
+          { "name": "杭锦后旗", "short": "杭锦后" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "乌兰察布市",
+        "short": "乌兰察布",
+        "children": [
+          { "name": "集宁区", "short": "集宁" },
+          { "name": "卓资县", "short": "卓资" },
+          { "name": "化德县", "short": "化德" },
+          { "name": "商都县", "short": "商都" },
+          { "name": "兴和县", "short": "兴和" },
+          { "name": "凉城县", "short": "凉城" },
+          { "name": "察哈尔右翼前旗", "short": "察哈尔右翼前" },
+          { "name": "察哈尔右翼中旗", "short": "察哈尔右翼中" },
+          { "name": "察哈尔右翼后旗", "short": "察哈尔右翼后" },
+          { "name": "四子王旗", "short": "四子王" },
+          { "name": "丰镇市", "short": "丰镇" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "兴安盟",
+        "short": "兴安盟",
+        "children": [
+          { "name": "乌兰浩特市", "short": "乌兰浩特" },
+          { "name": "阿尔山市", "short": "阿尔山" },
+          { "name": "科尔沁右翼前旗", "short": "科尔沁右翼前" },
+          { "name": "科尔沁右翼中旗", "short": "科尔沁右翼中" },
+          { "name": "扎赉特旗", "short": "扎赉特" },
+          { "name": "突泉县", "short": "突泉" }
+        ]
+      },
+      {
+        "name": "锡林郭勒盟",
+        "short": "锡林郭勒盟",
+        "children": [
+          { "name": "二连浩特市", "short": "二连浩特" },
+          { "name": "锡林浩特市", "short": "锡林浩特" },
+          { "name": "阿巴嘎旗", "short": "阿巴嘎" },
+          { "name": "苏尼特左旗", "short": "苏尼特左" },
+          { "name": "苏尼特右旗", "short": "苏尼特右" },
+          { "name": "东乌珠穆沁旗", "short": "东乌珠穆沁" },
+          { "name": "西乌珠穆沁旗", "short": "西乌珠穆沁" },
+          { "name": "太仆寺旗", "short": "太仆寺" },
+          { "name": "镶黄旗", "short": "镶黄" },
+          { "name": "正镶白旗", "short": "正镶白" },
+          { "name": "正蓝旗", "short": "正蓝" },
+          { "name": "多伦县", "short": "多伦" },
+          { "name": "乌拉盖管委会", "short": "乌拉盖管委会" }
+        ]
+      },
+      {
+        "name": "阿拉善盟",
+        "short": "阿拉善盟",
+        "children": [
+          { "name": "阿拉善左旗", "short": "阿拉善左" },
+          { "name": "阿拉善右旗", "short": "阿拉善右" },
+          { "name": "额济纳旗", "short": "额济纳" },
+          {
+            "name": "内蒙古阿拉善高新技术产业开发区",
+            "short": "内蒙古阿拉善高新技术产业开发"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "辽宁省",
+    "short": "辽宁",
+    "children": [
+      {
+        "name": "沈阳市",
+        "short": "沈阳",
+        "children": [
+          { "name": "和平区", "short": "和平" },
+          { "name": "沈河区", "short": "沈河" },
+          { "name": "大东区", "short": "大东" },
+          { "name": "皇姑区", "short": "皇姑" },
+          { "name": "铁西区", "short": "铁西" },
+          { "name": "苏家屯区", "short": "苏家屯" },
+          { "name": "浑南区", "short": "浑南" },
+          { "name": "沈北新区", "short": "沈北新" },
+          { "name": "于洪区", "short": "于洪" },
+          { "name": "辽中区", "short": "辽中" },
+          { "name": "康平县", "short": "康平" },
+          { "name": "法库县", "short": "法库" },
+          { "name": "新民市", "short": "新民" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "大连市",
+        "short": "大连",
+        "children": [
+          { "name": "中山区", "short": "中山" },
+          { "name": "西岗区", "short": "西岗" },
+          { "name": "沙河口区", "short": "沙河口" },
+          { "name": "甘井子区", "short": "甘井子" },
+          { "name": "旅顺口区", "short": "旅顺口" },
+          { "name": "金州区", "short": "金州" },
+          { "name": "普兰店区", "short": "普兰店" },
+          { "name": "长海县", "short": "长海" },
+          { "name": "瓦房店市", "short": "瓦房店" },
+          { "name": "庄河市", "short": "庄河" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "鞍山市",
+        "short": "鞍山",
+        "children": [
+          { "name": "铁东区", "short": "铁东" },
+          { "name": "铁西区", "short": "铁西" },
+          { "name": "立山区", "short": "立山" },
+          { "name": "千山区", "short": "千山" },
+          { "name": "台安县", "short": "台安" },
+          { "name": "岫岩满族自治县", "short": "岫岩满族自治" },
+          { "name": "海城市", "short": "海城" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "抚顺市",
+        "short": "抚顺",
+        "children": [
+          { "name": "新抚区", "short": "新抚" },
+          { "name": "东洲区", "short": "东洲" },
+          { "name": "望花区", "short": "望花" },
+          { "name": "顺城区", "short": "顺城" },
+          { "name": "抚顺县", "short": "抚顺" },
+          { "name": "新宾满族自治县", "short": "新宾满族自治" },
+          { "name": "清原满族自治县", "short": "清原满族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "本溪市",
+        "short": "本溪",
+        "children": [
+          { "name": "平山区", "short": "平山" },
+          { "name": "溪湖区", "short": "溪湖" },
+          { "name": "明山区", "short": "明山" },
+          { "name": "南芬区", "short": "南芬" },
+          { "name": "本溪满族自治县", "short": "本溪满族自治" },
+          { "name": "桓仁满族自治县", "short": "桓仁满族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "丹东市",
+        "short": "丹东",
+        "children": [
+          { "name": "元宝区", "short": "元宝" },
+          { "name": "振兴区", "short": "振兴" },
+          { "name": "振安区", "short": "振安" },
+          { "name": "宽甸满族自治县", "short": "宽甸满族自治" },
+          { "name": "东港市", "short": "东港" },
+          { "name": "凤城市", "short": "凤城" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "锦州市",
+        "short": "锦州",
+        "children": [
+          { "name": "古塔区", "short": "古塔" },
+          { "name": "凌河区", "short": "凌河" },
+          { "name": "太和区", "short": "太和" },
+          { "name": "黑山县", "short": "黑山" },
+          { "name": "义县", "short": "义" },
+          { "name": "凌海市", "short": "凌海" },
+          { "name": "北镇市", "short": "北镇" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "营口市",
+        "short": "营口",
+        "children": [
+          { "name": "站前区", "short": "站前" },
+          { "name": "西市区", "short": "西" },
+          { "name": "鲅鱼圈区", "short": "鲅鱼圈" },
+          { "name": "老边区", "short": "老边" },
+          { "name": "盖州市", "short": "盖州" },
+          { "name": "大石桥市", "short": "大石桥" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "阜新市",
+        "short": "阜新",
+        "children": [
+          { "name": "海州区", "short": "海州" },
+          { "name": "新邱区", "short": "新邱" },
+          { "name": "太平区", "short": "太平" },
+          { "name": "清河门区", "short": "清河门" },
+          { "name": "细河区", "short": "细河" },
+          { "name": "阜新蒙古族自治县", "short": "阜新蒙古族自治" },
+          { "name": "彰武县", "short": "彰武" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "辽阳市",
+        "short": "辽阳",
+        "children": [
+          { "name": "白塔区", "short": "白塔" },
+          { "name": "文圣区", "short": "文圣" },
+          { "name": "宏伟区", "short": "宏伟" },
+          { "name": "弓长岭区", "short": "弓长岭" },
+          { "name": "太子河区", "short": "太子河" },
+          { "name": "辽阳县", "short": "辽阳" },
+          { "name": "灯塔市", "short": "灯塔" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "盘锦市",
+        "short": "盘锦",
+        "children": [
+          { "name": "双台子区", "short": "双台子" },
+          { "name": "兴隆台区", "short": "兴隆台" },
+          { "name": "大洼区", "short": "大洼" },
+          { "name": "盘山县", "short": "盘山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "铁岭市",
+        "short": "铁岭",
+        "children": [
+          { "name": "银州区", "short": "银州" },
+          { "name": "清河区", "short": "清河" },
+          { "name": "铁岭县", "short": "铁岭" },
+          { "name": "西丰县", "short": "西丰" },
+          { "name": "昌图县", "short": "昌图" },
+          { "name": "调兵山市", "short": "调兵山" },
+          { "name": "开原市", "short": "开原" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "朝阳市",
+        "short": "朝阳",
+        "children": [
+          { "name": "双塔区", "short": "双塔" },
+          { "name": "龙城区", "short": "龙城" },
+          { "name": "朝阳县", "short": "朝阳" },
+          { "name": "建平县", "short": "建平" },
+          { "name": "喀喇沁左翼蒙古族自治县", "short": "喀喇沁左翼蒙古族自治" },
+          { "name": "北票市", "short": "北票" },
+          { "name": "凌源市", "short": "凌源" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "葫芦岛市",
+        "short": "葫芦岛",
+        "children": [
+          { "name": "连山区", "short": "连山" },
+          { "name": "龙港区", "short": "龙港" },
+          { "name": "南票区", "short": "南票" },
+          { "name": "绥中县", "short": "绥中" },
+          { "name": "建昌县", "short": "建昌" },
+          { "name": "兴城市", "short": "兴城" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "吉林省",
+    "short": "吉林",
+    "children": [
+      {
+        "name": "长春市",
+        "short": "长春",
+        "children": [
+          { "name": "南关区", "short": "南关" },
+          { "name": "宽城区", "short": "宽城" },
+          { "name": "朝阳区", "short": "朝阳" },
+          { "name": "二道区", "short": "二道" },
+          { "name": "绿园区", "short": "绿园" },
+          { "name": "双阳区", "short": "双阳" },
+          { "name": "九台区", "short": "九台" },
+          { "name": "农安县", "short": "农安" },
+          { "name": "榆树市", "short": "榆树" },
+          { "name": "德惠市", "short": "德惠" },
+          { "name": "公主岭市", "short": "公主岭" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "长春经济技术开发区", "short": "长春经济技术开发" },
+          {
+            "name": "长春净月高新技术产业开发区",
+            "short": "长春净月高新技术产业开发"
+          },
+          { "name": "长春高新技术产业开发区", "short": "长春高新技术产业开发" },
+          { "name": "长春汽车经济技术开发区", "short": "长春汽车经济技术开发" }
+        ]
+      },
+      {
+        "name": "吉林市",
+        "short": "吉林",
+        "children": [
+          { "name": "昌邑区", "short": "昌邑" },
+          { "name": "龙潭区", "short": "龙潭" },
+          { "name": "船营区", "short": "船营" },
+          { "name": "丰满区", "short": "丰满" },
+          { "name": "永吉县", "short": "永吉" },
+          { "name": "蛟河市", "short": "蛟河" },
+          { "name": "桦甸市", "short": "桦甸" },
+          { "name": "舒兰市", "short": "舒兰" },
+          { "name": "磐石市", "short": "磐石" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "吉林经济开发区", "short": "吉林经济开发" },
+          { "name": "吉林高新技术产业开发区", "short": "吉林高新技术产业开发" },
+          { "name": "吉林中国新加坡食品区", "short": "吉林中国新加坡食品" }
+        ]
+      },
+      {
+        "name": "四平市",
+        "short": "四平",
+        "children": [
+          { "name": "铁西区", "short": "铁西" },
+          { "name": "铁东区", "short": "铁东" },
+          { "name": "梨树县", "short": "梨树" },
+          { "name": "伊通满族自治县", "short": "伊通满族自治" },
+          { "name": "双辽市", "short": "双辽" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "辽源市",
+        "short": "辽源",
+        "children": [
+          { "name": "龙山区", "short": "龙山" },
+          { "name": "西安区", "short": "西安" },
+          { "name": "东丰县", "short": "东丰" },
+          { "name": "东辽县", "short": "东辽" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "通化市",
+        "short": "通化",
+        "children": [
+          { "name": "东昌区", "short": "东昌" },
+          { "name": "二道江区", "short": "二道江" },
+          { "name": "通化县", "short": "通化" },
+          { "name": "辉南县", "short": "辉南" },
+          { "name": "柳河县", "short": "柳河" },
+          { "name": "梅河口市", "short": "梅河口" },
+          { "name": "集安市", "short": "集安" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "白山市",
+        "short": "白山",
+        "children": [
+          { "name": "浑江区", "short": "浑江" },
+          { "name": "江源区", "short": "江源" },
+          { "name": "抚松县", "short": "抚松" },
+          { "name": "靖宇县", "short": "靖宇" },
+          { "name": "长白朝鲜族自治县", "short": "长白朝鲜族自治" },
+          { "name": "临江市", "short": "临江" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "松原市",
+        "short": "松原",
+        "children": [
+          { "name": "宁江区", "short": "宁江" },
+          { "name": "前郭尔罗斯蒙古族自治县", "short": "前郭尔罗斯蒙古族自治" },
+          { "name": "长岭县", "short": "长岭" },
+          { "name": "乾安县", "short": "乾安" },
+          { "name": "扶余市", "short": "扶余" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "吉林松原经济开发区", "short": "吉林松原经济开发" }
+        ]
+      },
+      {
+        "name": "白城市",
+        "short": "白城",
+        "children": [
+          { "name": "洮北区", "short": "洮北" },
+          { "name": "镇赉县", "short": "镇赉" },
+          { "name": "通榆县", "short": "通榆" },
+          { "name": "洮南市", "short": "洮南" },
+          { "name": "大安市", "short": "大安" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "吉林白城经济开发区", "short": "吉林白城经济开发" }
+        ]
+      },
+      {
+        "name": "延边朝鲜族自治州",
+        "short": "延边朝鲜族自治州",
+        "children": [
+          { "name": "延吉市", "short": "延吉" },
+          { "name": "图们市", "short": "图们" },
+          { "name": "敦化市", "short": "敦化" },
+          { "name": "珲春市", "short": "珲春" },
+          { "name": "龙井市", "short": "龙井" },
+          { "name": "和龙市", "short": "和龙" },
+          { "name": "汪清县", "short": "汪清" },
+          { "name": "安图县", "short": "安图" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "黑龙江省",
+    "short": "黑龙江",
+    "children": [
+      {
+        "name": "哈尔滨市",
+        "short": "哈尔滨",
+        "children": [
+          { "name": "道里区", "short": "道里" },
+          { "name": "南岗区", "short": "南岗" },
+          { "name": "道外区", "short": "道外" },
+          { "name": "平房区", "short": "平房" },
+          { "name": "松北区", "short": "松北" },
+          { "name": "香坊区", "short": "香坊" },
+          { "name": "呼兰区", "short": "呼兰" },
+          { "name": "阿城区", "short": "阿城" },
+          { "name": "双城区", "short": "双城" },
+          { "name": "依兰县", "short": "依兰" },
+          { "name": "方正县", "short": "方正" },
+          { "name": "宾县", "short": "宾" },
+          { "name": "巴彦县", "short": "巴彦" },
+          { "name": "木兰县", "short": "木兰" },
+          { "name": "通河县", "short": "通河" },
+          { "name": "延寿县", "short": "延寿" },
+          { "name": "尚志市", "short": "尚志" },
+          { "name": "五常市", "short": "五常" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "齐齐哈尔市",
+        "short": "齐齐哈尔",
+        "children": [
+          { "name": "龙沙区", "short": "龙沙" },
+          { "name": "建华区", "short": "建华" },
+          { "name": "铁锋区", "short": "铁锋" },
+          { "name": "昂昂溪区", "short": "昂昂溪" },
+          { "name": "富拉尔基区", "short": "富拉尔基" },
+          { "name": "碾子山区", "short": "碾子山" },
+          { "name": "梅里斯达斡尔族区", "short": "梅里斯达斡尔族" },
+          { "name": "龙江县", "short": "龙江" },
+          { "name": "依安县", "short": "依安" },
+          { "name": "泰来县", "short": "泰来" },
+          { "name": "甘南县", "short": "甘南" },
+          { "name": "富裕县", "short": "富裕" },
+          { "name": "克山县", "short": "克山" },
+          { "name": "克东县", "short": "克东" },
+          { "name": "拜泉县", "short": "拜泉" },
+          { "name": "讷河市", "short": "讷河" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "鸡西市",
+        "short": "鸡西",
+        "children": [
+          { "name": "鸡冠区", "short": "鸡冠" },
+          { "name": "恒山区", "short": "恒山" },
+          { "name": "滴道区", "short": "滴道" },
+          { "name": "梨树区", "short": "梨树" },
+          { "name": "城子河区", "short": "城子河" },
+          { "name": "麻山区", "short": "麻山" },
+          { "name": "鸡东县", "short": "鸡东" },
+          { "name": "虎林市", "short": "虎林" },
+          { "name": "密山市", "short": "密山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "鹤岗市",
+        "short": "鹤岗",
+        "children": [
+          { "name": "向阳区", "short": "向阳" },
+          { "name": "工农区", "short": "工农" },
+          { "name": "南山区", "short": "南山" },
+          { "name": "兴安区", "short": "兴安" },
+          { "name": "东山区", "short": "东山" },
+          { "name": "兴山区", "short": "兴山" },
+          { "name": "萝北县", "short": "萝北" },
+          { "name": "绥滨县", "short": "绥滨" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "双鸭山市",
+        "short": "双鸭山",
+        "children": [
+          { "name": "尖山区", "short": "尖山" },
+          { "name": "岭东区", "short": "岭东" },
+          { "name": "四方台区", "short": "四方台" },
+          { "name": "宝山区", "short": "宝山" },
+          { "name": "集贤县", "short": "集贤" },
+          { "name": "友谊县", "short": "友谊" },
+          { "name": "宝清县", "short": "宝清" },
+          { "name": "饶河县", "short": "饶河" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "大庆市",
+        "short": "大庆",
+        "children": [
+          { "name": "萨尔图区", "short": "萨尔图" },
+          { "name": "龙凤区", "short": "龙凤" },
+          { "name": "让胡路区", "short": "让胡路" },
+          { "name": "红岗区", "short": "红岗" },
+          { "name": "大同区", "short": "大同" },
+          { "name": "肇州县", "short": "肇州" },
+          { "name": "肇源县", "short": "肇源" },
+          { "name": "林甸县", "short": "林甸" },
+          { "name": "杜尔伯特蒙古族自治县", "short": "杜尔伯特蒙古族自治" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "大庆高新技术产业开发区", "short": "大庆高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "伊春市",
+        "short": "伊春",
+        "children": [
+          { "name": "伊美区", "short": "伊美" },
+          { "name": "乌翠区", "short": "乌翠" },
+          { "name": "友好区", "short": "友好" },
+          { "name": "嘉荫县", "short": "嘉荫" },
+          { "name": "汤旺县", "short": "汤旺" },
+          { "name": "丰林县", "short": "丰林" },
+          { "name": "大箐山县", "short": "大箐山" },
+          { "name": "南岔县", "short": "南岔" },
+          { "name": "金林区", "short": "金林" },
+          { "name": "铁力市", "short": "铁力" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "佳木斯市",
+        "short": "佳木斯",
+        "children": [
+          { "name": "向阳区", "short": "向阳" },
+          { "name": "前进区", "short": "前进" },
+          { "name": "东风区", "short": "东风" },
+          { "name": "郊区", "short": "郊" },
+          { "name": "桦南县", "short": "桦南" },
+          { "name": "桦川县", "short": "桦川" },
+          { "name": "汤原县", "short": "汤原" },
+          { "name": "同江市", "short": "同江" },
+          { "name": "富锦市", "short": "富锦" },
+          { "name": "抚远市", "short": "抚远" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "七台河市",
+        "short": "七台河",
+        "children": [
+          { "name": "新兴区", "short": "新兴" },
+          { "name": "桃山区", "short": "桃山" },
+          { "name": "茄子河区", "short": "茄子河" },
+          { "name": "勃利县", "short": "勃利" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "牡丹江市",
+        "short": "牡丹江",
+        "children": [
+          { "name": "东安区", "short": "东安" },
+          { "name": "阳明区", "short": "阳明" },
+          { "name": "爱民区", "short": "爱民" },
+          { "name": "西安区", "short": "西安" },
+          { "name": "林口县", "short": "林口" },
+          { "name": "绥芬河市", "short": "绥芬河" },
+          { "name": "海林市", "short": "海林" },
+          { "name": "宁安市", "short": "宁安" },
+          { "name": "穆棱市", "short": "穆棱" },
+          { "name": "东宁市", "short": "东宁" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "牡丹江经济技术开发区", "short": "牡丹江经济技术开发" }
+        ]
+      },
+      {
+        "name": "黑河市",
+        "short": "黑河",
+        "children": [
+          { "name": "爱辉区", "short": "爱辉" },
+          { "name": "逊克县", "short": "逊克" },
+          { "name": "孙吴县", "short": "孙吴" },
+          { "name": "北安市", "short": "北安" },
+          { "name": "五大连池市", "short": "五大连池" },
+          { "name": "嫩江市", "short": "嫩江" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "绥化市",
+        "short": "绥化",
+        "children": [
+          { "name": "北林区", "short": "北林" },
+          { "name": "望奎县", "short": "望奎" },
+          { "name": "兰西县", "short": "兰西" },
+          { "name": "青冈县", "short": "青冈" },
+          { "name": "庆安县", "short": "庆安" },
+          { "name": "明水县", "short": "明水" },
+          { "name": "绥棱县", "short": "绥棱" },
+          { "name": "安达市", "short": "安达" },
+          { "name": "肇东市", "short": "肇东" },
+          { "name": "海伦市", "short": "海伦" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "大兴安岭地区",
+        "short": "大兴安岭地",
+        "children": [
+          { "name": "漠河市", "short": "漠河" },
+          { "name": "呼玛县", "short": "呼玛" },
+          { "name": "塔河县", "short": "塔河" },
+          { "name": "加格达奇区", "short": "加格达奇" },
+          { "name": "松岭区", "short": "松岭" },
+          { "name": "新林区", "short": "新林" },
+          { "name": "呼中区", "short": "呼中" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "上海市",
+    "short": "上海",
+    "children": [
+      { "name": "黄浦区", "short": "黄浦" },
+      { "name": "徐汇区", "short": "徐汇" },
+      { "name": "长宁区", "short": "长宁" },
+      { "name": "静安区", "short": "静安" },
+      { "name": "普陀区", "short": "普陀" },
+      { "name": "虹口区", "short": "虹口" },
+      { "name": "杨浦区", "short": "杨浦" },
+      { "name": "闵行区", "short": "闵行" },
+      { "name": "宝山区", "short": "宝山" },
+      { "name": "嘉定区", "short": "嘉定" },
+      { "name": "浦东新区", "short": "浦东新" },
+      { "name": "金山区", "short": "金山" },
+      { "name": "松江区", "short": "松江" },
+      { "name": "青浦区", "short": "青浦" },
+      { "name": "奉贤区", "short": "奉贤" },
+      { "name": "崇明区", "short": "崇明" }
+    ]
+  },
+  {
+    "name": "江苏省",
+    "short": "江苏",
+    "children": [
+      {
+        "name": "南京市",
+        "short": "南京",
+        "children": [
+          { "name": "玄武区", "short": "玄武" },
+          { "name": "秦淮区", "short": "秦淮" },
+          { "name": "建邺区", "short": "建邺" },
+          { "name": "鼓楼区", "short": "鼓楼" },
+          { "name": "浦口区", "short": "浦口" },
+          { "name": "栖霞区", "short": "栖霞" },
+          { "name": "雨花台区", "short": "雨花台" },
+          { "name": "江宁区", "short": "江宁" },
+          { "name": "六合区", "short": "六合" },
+          { "name": "溧水区", "short": "溧水" },
+          { "name": "高淳区", "short": "高淳" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "无锡市",
+        "short": "无锡",
+        "children": [
+          { "name": "锡山区", "short": "锡山" },
+          { "name": "惠山区", "short": "惠山" },
+          { "name": "滨湖区", "short": "滨湖" },
+          { "name": "梁溪区", "short": "梁溪" },
+          { "name": "新吴区", "short": "新吴" },
+          { "name": "江阴市", "short": "江阴" },
+          { "name": "宜兴市", "short": "宜兴" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "徐州市",
+        "short": "徐州",
+        "children": [
+          { "name": "鼓楼区", "short": "鼓楼" },
+          { "name": "云龙区", "short": "云龙" },
+          { "name": "贾汪区", "short": "贾汪" },
+          { "name": "泉山区", "short": "泉山" },
+          { "name": "铜山区", "short": "铜山" },
+          { "name": "丰县", "short": "丰" },
+          { "name": "沛县", "short": "沛" },
+          { "name": "睢宁县", "short": "睢宁" },
+          { "name": "新沂市", "short": "新沂" },
+          { "name": "邳州市", "short": "邳州" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "徐州经济技术开发区", "short": "徐州经济技术开发" }
+        ]
+      },
+      {
+        "name": "常州市",
+        "short": "常州",
+        "children": [
+          { "name": "天宁区", "short": "天宁" },
+          { "name": "钟楼区", "short": "钟楼" },
+          { "name": "新北区", "short": "新北" },
+          { "name": "武进区", "short": "武进" },
+          { "name": "金坛区", "short": "金坛" },
+          { "name": "溧阳市", "short": "溧阳" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "苏州市",
+        "short": "苏州",
+        "children": [
+          { "name": "虎丘区", "short": "虎丘" },
+          { "name": "吴中区", "short": "吴中" },
+          { "name": "相城区", "short": "相城" },
+          { "name": "姑苏区", "short": "姑苏" },
+          { "name": "吴江区", "short": "吴江" },
+          { "name": "常熟市", "short": "常熟" },
+          { "name": "张家港市", "short": "张家港" },
+          { "name": "昆山市", "short": "昆山" },
+          { "name": "太仓市", "short": "太仓" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "苏州工业园区", "short": "苏州工业园" }
+        ]
+      },
+      {
+        "name": "南通市",
+        "short": "南通",
+        "children": [
+          { "name": "通州区", "short": "通州" },
+          { "name": "崇川区", "short": "崇川" },
+          { "name": "海门区", "short": "海门" },
+          { "name": "如东县", "short": "如东" },
+          { "name": "启东市", "short": "启东" },
+          { "name": "如皋市", "short": "如皋" },
+          { "name": "海安市", "short": "海安" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "南通经济技术开发区", "short": "南通经济技术开发" }
+        ]
+      },
+      {
+        "name": "连云港市",
+        "short": "连云港",
+        "children": [
+          { "name": "连云区", "short": "连云" },
+          { "name": "海州区", "short": "海州" },
+          { "name": "赣榆区", "short": "赣榆" },
+          { "name": "东海县", "short": "东海" },
+          { "name": "灌云县", "short": "灌云" },
+          { "name": "灌南县", "short": "灌南" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "连云港经济技术开发区", "short": "连云港经济技术开发" },
+          {
+            "name": "连云港高新技术产业开发区",
+            "short": "连云港高新技术产业开发"
+          }
+        ]
+      },
+      {
+        "name": "淮安市",
+        "short": "淮安",
+        "children": [
+          { "name": "淮安区", "short": "淮安" },
+          { "name": "淮阴区", "short": "淮阴" },
+          { "name": "清江浦区", "short": "清江浦" },
+          { "name": "洪泽区", "short": "洪泽" },
+          { "name": "涟水县", "short": "涟水" },
+          { "name": "盱眙县", "short": "盱眙" },
+          { "name": "金湖县", "short": "金湖" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "淮安经济技术开发区", "short": "淮安经济技术开发" }
+        ]
+      },
+      {
+        "name": "盐城市",
+        "short": "盐城",
+        "children": [
+          { "name": "亭湖区", "short": "亭湖" },
+          { "name": "盐都区", "short": "盐都" },
+          { "name": "大丰区", "short": "大丰" },
+          { "name": "响水县", "short": "响水" },
+          { "name": "滨海县", "short": "滨海" },
+          { "name": "阜宁县", "short": "阜宁" },
+          { "name": "射阳县", "short": "射阳" },
+          { "name": "建湖县", "short": "建湖" },
+          { "name": "东台市", "short": "东台" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "盐城经济技术开发区", "short": "盐城经济技术开发" }
+        ]
+      },
+      {
+        "name": "扬州市",
+        "short": "扬州",
+        "children": [
+          { "name": "广陵区", "short": "广陵" },
+          { "name": "邗江区", "short": "邗江" },
+          { "name": "江都区", "short": "江都" },
+          { "name": "宝应县", "short": "宝应" },
+          { "name": "仪征市", "short": "仪征" },
+          { "name": "高邮市", "short": "高邮" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "扬州经济技术开发区", "short": "扬州经济技术开发" }
+        ]
+      },
+      {
+        "name": "镇江市",
+        "short": "镇江",
+        "children": [
+          { "name": "京口区", "short": "京口" },
+          { "name": "润州区", "short": "润州" },
+          { "name": "丹徒区", "short": "丹徒" },
+          { "name": "丹阳市", "short": "丹阳" },
+          { "name": "扬中市", "short": "扬中" },
+          { "name": "句容市", "short": "句容" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "镇江新区", "short": "镇江新" }
+        ]
+      },
+      {
+        "name": "泰州市",
+        "short": "泰州",
+        "children": [
+          { "name": "海陵区", "short": "海陵" },
+          { "name": "高港区", "short": "高港" },
+          { "name": "姜堰区", "short": "姜堰" },
+          { "name": "兴化市", "short": "兴化" },
+          { "name": "靖江市", "short": "靖江" },
+          { "name": "泰兴市", "short": "泰兴" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "泰州医药高新技术产业开发区",
+            "short": "泰州医药高新技术产业开发"
+          }
+        ]
+      },
+      {
+        "name": "宿迁市",
+        "short": "宿迁",
+        "children": [
+          { "name": "宿城区", "short": "宿城" },
+          { "name": "宿豫区", "short": "宿豫" },
+          { "name": "沭阳县", "short": "沭阳" },
+          { "name": "泗阳县", "short": "泗阳" },
+          { "name": "泗洪县", "short": "泗洪" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "宿迁经济技术开发区", "short": "宿迁经济技术开发" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "浙江省",
+    "short": "浙江",
+    "children": [
+      {
+        "name": "杭州市",
+        "short": "杭州",
+        "children": [
+          { "name": "上城区", "short": "上城" },
+          { "name": "下城区", "short": "下城" },
+          { "name": "江干区", "short": "江干" },
+          { "name": "拱墅区", "short": "拱墅" },
+          { "name": "西湖区", "short": "西湖" },
+          { "name": "滨江区", "short": "滨江" },
+          { "name": "萧山区", "short": "萧山" },
+          { "name": "余杭区", "short": "余杭" },
+          { "name": "富阳区", "short": "富阳" },
+          { "name": "临安区", "short": "临安" },
+          { "name": "桐庐县", "short": "桐庐" },
+          { "name": "淳安县", "short": "淳安" },
+          { "name": "建德市", "short": "建德" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "临平区", "short": "临平" },
+          { "name": "钱塘区", "short": "钱塘" }
+        ]
+      },
+      {
+        "name": "宁波市",
+        "short": "宁波",
+        "children": [
+          { "name": "海曙区", "short": "海曙" },
+          { "name": "江北区", "short": "江北" },
+          { "name": "北仑区", "short": "北仑" },
+          { "name": "镇海区", "short": "镇海" },
+          { "name": "鄞州区", "short": "鄞州" },
+          { "name": "奉化区", "short": "奉化" },
+          { "name": "象山县", "short": "象山" },
+          { "name": "宁海县", "short": "宁海" },
+          { "name": "余姚市", "short": "余姚" },
+          { "name": "慈溪市", "short": "慈溪" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "温州市",
+        "short": "温州",
+        "children": [
+          { "name": "鹿城区", "short": "鹿城" },
+          { "name": "龙湾区", "short": "龙湾" },
+          { "name": "瓯海区", "short": "瓯海" },
+          { "name": "洞头区", "short": "洞头" },
+          { "name": "永嘉县", "short": "永嘉" },
+          { "name": "平阳县", "short": "平阳" },
+          { "name": "苍南县", "short": "苍南" },
+          { "name": "文成县", "short": "文成" },
+          { "name": "泰顺县", "short": "泰顺" },
+          { "name": "瑞安市", "short": "瑞安" },
+          { "name": "乐清市", "short": "乐清" },
+          { "name": "龙港市", "short": "龙港" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "温州经济技术开发区", "short": "温州经济技术开发" }
+        ]
+      },
+      {
+        "name": "嘉兴市",
+        "short": "嘉兴",
+        "children": [
+          { "name": "南湖区", "short": "南湖" },
+          { "name": "秀洲区", "short": "秀洲" },
+          { "name": "嘉善县", "short": "嘉善" },
+          { "name": "海盐县", "short": "海盐" },
+          { "name": "海宁市", "short": "海宁" },
+          { "name": "平湖市", "short": "平湖" },
+          { "name": "桐乡市", "short": "桐乡" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "湖州市",
+        "short": "湖州",
+        "children": [
+          { "name": "吴兴区", "short": "吴兴" },
+          { "name": "南浔区", "short": "南浔" },
+          { "name": "德清县", "short": "德清" },
+          { "name": "长兴县", "short": "长兴" },
+          { "name": "安吉县", "short": "安吉" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "绍兴市",
+        "short": "绍兴",
+        "children": [
+          { "name": "越城区", "short": "越城" },
+          { "name": "柯桥区", "short": "柯桥" },
+          { "name": "上虞区", "short": "上虞" },
+          { "name": "新昌县", "short": "新昌" },
+          { "name": "诸暨市", "short": "诸暨" },
+          { "name": "嵊州市", "short": "嵊州" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "金华市",
+        "short": "金华",
+        "children": [
+          { "name": "婺城区", "short": "婺城" },
+          { "name": "金东区", "short": "金东" },
+          { "name": "武义县", "short": "武义" },
+          { "name": "浦江县", "short": "浦江" },
+          { "name": "磐安县", "short": "磐安" },
+          { "name": "兰溪市", "short": "兰溪" },
+          { "name": "义乌市", "short": "义乌" },
+          { "name": "东阳市", "short": "东阳" },
+          { "name": "永康市", "short": "永康" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "衢州市",
+        "short": "衢州",
+        "children": [
+          { "name": "柯城区", "short": "柯城" },
+          { "name": "衢江区", "short": "衢江" },
+          { "name": "常山县", "short": "常山" },
+          { "name": "开化县", "short": "开化" },
+          { "name": "龙游县", "short": "龙游" },
+          { "name": "江山市", "short": "江山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "舟山市",
+        "short": "舟山",
+        "children": [
+          { "name": "定海区", "short": "定海" },
+          { "name": "普陀区", "short": "普陀" },
+          { "name": "岱山县", "short": "岱山" },
+          { "name": "嵊泗县", "short": "嵊泗" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "台州市",
+        "short": "台州",
+        "children": [
+          { "name": "椒江区", "short": "椒江" },
+          { "name": "黄岩区", "short": "黄岩" },
+          { "name": "路桥区", "short": "路桥" },
+          { "name": "三门县", "short": "三门" },
+          { "name": "天台县", "short": "天台" },
+          { "name": "仙居县", "short": "仙居" },
+          { "name": "温岭市", "short": "温岭" },
+          { "name": "临海市", "short": "临海" },
+          { "name": "玉环市", "short": "玉环" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "丽水市",
+        "short": "丽水",
+        "children": [
+          { "name": "莲都区", "short": "莲都" },
+          { "name": "青田县", "short": "青田" },
+          { "name": "缙云县", "short": "缙云" },
+          { "name": "遂昌县", "short": "遂昌" },
+          { "name": "松阳县", "short": "松阳" },
+          { "name": "云和县", "short": "云和" },
+          { "name": "庆元县", "short": "庆元" },
+          { "name": "景宁畲族自治县", "short": "景宁畲族自治" },
+          { "name": "龙泉市", "short": "龙泉" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "安徽省",
+    "short": "安徽",
+    "children": [
+      {
+        "name": "合肥市",
+        "short": "合肥",
+        "children": [
+          { "name": "瑶海区", "short": "瑶海" },
+          { "name": "庐阳区", "short": "庐阳" },
+          { "name": "蜀山区", "short": "蜀山" },
+          { "name": "包河区", "short": "包河" },
+          { "name": "长丰县", "short": "长丰" },
+          { "name": "肥东县", "short": "肥东" },
+          { "name": "肥西县", "short": "肥西" },
+          { "name": "庐江县", "short": "庐江" },
+          { "name": "巢湖市", "short": "巢湖" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "合肥高新技术产业开发区", "short": "合肥高新技术产业开发" },
+          { "name": "合肥经济技术开发区", "short": "合肥经济技术开发" },
+          {
+            "name": "合肥新站高新技术产业开发区",
+            "short": "合肥新站高新技术产业开发"
+          }
+        ]
+      },
+      {
+        "name": "芜湖市",
+        "short": "芜湖",
+        "children": [
+          { "name": "镜湖区", "short": "镜湖" },
+          { "name": "鸠江区", "short": "鸠江" },
+          { "name": "弋江区", "short": "弋江" },
+          { "name": "湾沚区", "short": "湾沚" },
+          { "name": "繁昌区", "short": "繁昌" },
+          { "name": "南陵县", "short": "南陵" },
+          { "name": "无为市", "short": "无为" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "芜湖经济技术开发区", "short": "芜湖经济技术开发" },
+          { "name": "安徽芜湖三山经济开发区", "short": "安徽芜湖三山经济开发" }
+        ]
+      },
+      {
+        "name": "蚌埠市",
+        "short": "蚌埠",
+        "children": [
+          { "name": "龙子湖区", "short": "龙子湖" },
+          { "name": "蚌山区", "short": "蚌山" },
+          { "name": "禹会区", "short": "禹会" },
+          { "name": "淮上区", "short": "淮上" },
+          { "name": "怀远县", "short": "怀远" },
+          { "name": "五河县", "short": "五河" },
+          { "name": "固镇县", "short": "固镇" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "蚌埠市高新技术开发区", "short": "蚌埠市高新技术开发" },
+          { "name": "蚌埠市经济开发区", "short": "蚌埠市经济开发" }
+        ]
+      },
+      {
+        "name": "淮南市",
+        "short": "淮南",
+        "children": [
+          { "name": "大通区", "short": "大通" },
+          { "name": "田家庵区", "short": "田家庵" },
+          { "name": "谢家集区", "short": "谢家集" },
+          { "name": "八公山区", "short": "八公山" },
+          { "name": "潘集区", "short": "潘集" },
+          { "name": "凤台县", "short": "凤台" },
+          { "name": "寿县", "short": "寿" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "马鞍山市",
+        "short": "马鞍山",
+        "children": [
+          { "name": "花山区", "short": "花山" },
+          { "name": "雨山区", "short": "雨山" },
+          { "name": "博望区", "short": "博望" },
+          { "name": "当涂县", "short": "当涂" },
+          { "name": "含山县", "short": "含山" },
+          { "name": "和县", "short": "和" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "淮北市",
+        "short": "淮北",
+        "children": [
+          { "name": "杜集区", "short": "杜集" },
+          { "name": "相山区", "short": "相山" },
+          { "name": "烈山区", "short": "烈山" },
+          { "name": "濉溪县", "short": "濉溪" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "铜陵市",
+        "short": "铜陵",
+        "children": [
+          { "name": "铜官区", "short": "铜官" },
+          { "name": "义安区", "short": "义安" },
+          { "name": "郊区", "short": "郊" },
+          { "name": "枞阳县", "short": "枞阳" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "安庆市",
+        "short": "安庆",
+        "children": [
+          { "name": "迎江区", "short": "迎江" },
+          { "name": "大观区", "short": "大观" },
+          { "name": "宜秀区", "short": "宜秀" },
+          { "name": "怀宁县", "short": "怀宁" },
+          { "name": "太湖县", "short": "太湖" },
+          { "name": "宿松县", "short": "宿松" },
+          { "name": "望江县", "short": "望江" },
+          { "name": "岳西县", "short": "岳西" },
+          { "name": "桐城市", "short": "桐城" },
+          { "name": "潜山市", "short": "潜山" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "安徽安庆经济开发区", "short": "安徽安庆经济开发" }
+        ]
+      },
+      {
+        "name": "黄山市",
+        "short": "黄山",
+        "children": [
+          { "name": "屯溪区", "short": "屯溪" },
+          { "name": "黄山区", "short": "黄山" },
+          { "name": "徽州区", "short": "徽州" },
+          { "name": "歙县", "short": "歙" },
+          { "name": "休宁县", "short": "休宁" },
+          { "name": "黟县", "short": "黟" },
+          { "name": "祁门县", "short": "祁门" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "滁州市",
+        "short": "滁州",
+        "children": [
+          { "name": "琅琊区", "short": "琅琊" },
+          { "name": "南谯区", "short": "南谯" },
+          { "name": "来安县", "short": "来安" },
+          { "name": "全椒县", "short": "全椒" },
+          { "name": "定远县", "short": "定远" },
+          { "name": "凤阳县", "short": "凤阳" },
+          { "name": "天长市", "short": "天长" },
+          { "name": "明光市", "short": "明光" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "中新苏滁高新技术产业开发区",
+            "short": "中新苏滁高新技术产业开发"
+          },
+          { "name": "滁州经济技术开发区", "short": "滁州经济技术开发" }
+        ]
+      },
+      {
+        "name": "阜阳市",
+        "short": "阜阳",
+        "children": [
+          { "name": "颍州区", "short": "颍州" },
+          { "name": "颍东区", "short": "颍东" },
+          { "name": "颍泉区", "short": "颍泉" },
+          { "name": "临泉县", "short": "临泉" },
+          { "name": "太和县", "short": "太和" },
+          { "name": "阜南县", "short": "阜南" },
+          { "name": "颍上县", "short": "颍上" },
+          { "name": "界首市", "short": "界首" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "阜阳合肥现代产业园区", "short": "阜阳合肥现代产业园" },
+          { "name": "阜阳经济技术开发区", "short": "阜阳经济技术开发" }
+        ]
+      },
+      {
+        "name": "宿州市",
+        "short": "宿州",
+        "children": [
+          { "name": "埇桥区", "short": "埇桥" },
+          { "name": "砀山县", "short": "砀山" },
+          { "name": "萧县", "short": "萧" },
+          { "name": "灵璧县", "short": "灵璧" },
+          { "name": "泗县", "short": "泗" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "宿州马鞍山现代产业园区", "short": "宿州马鞍山现代产业园" },
+          { "name": "宿州经济技术开发区", "short": "宿州经济技术开发" }
+        ]
+      },
+      {
+        "name": "六安市",
+        "short": "六安",
+        "children": [
+          { "name": "金安区", "short": "金安" },
+          { "name": "裕安区", "short": "裕安" },
+          { "name": "叶集区", "short": "叶集" },
+          { "name": "霍邱县", "short": "霍邱" },
+          { "name": "舒城县", "short": "舒城" },
+          { "name": "金寨县", "short": "金寨" },
+          { "name": "霍山县", "short": "霍山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "亳州市",
+        "short": "亳州",
+        "children": [
+          { "name": "谯城区", "short": "谯城" },
+          { "name": "涡阳县", "short": "涡阳" },
+          { "name": "蒙城县", "short": "蒙城" },
+          { "name": "利辛县", "short": "利辛" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "池州市",
+        "short": "池州",
+        "children": [
+          { "name": "贵池区", "short": "贵池" },
+          { "name": "东至县", "short": "东至" },
+          { "name": "石台县", "short": "石台" },
+          { "name": "青阳县", "short": "青阳" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "宣城市",
+        "short": "宣城",
+        "children": [
+          { "name": "宣州区", "short": "宣州" },
+          { "name": "郎溪县", "short": "郎溪" },
+          { "name": "泾县", "short": "泾" },
+          { "name": "绩溪县", "short": "绩溪" },
+          { "name": "旌德县", "short": "旌德" },
+          { "name": "宁国市", "short": "宁国" },
+          { "name": "广德市", "short": "广德" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "宣城市经济开发区", "short": "宣城市经济开发" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "福建省",
+    "short": "福建",
+    "children": [
+      {
+        "name": "福州市",
+        "short": "福州",
+        "children": [
+          { "name": "鼓楼区", "short": "鼓楼" },
+          { "name": "台江区", "short": "台江" },
+          { "name": "仓山区", "short": "仓山" },
+          { "name": "马尾区", "short": "马尾" },
+          { "name": "晋安区", "short": "晋安" },
+          { "name": "长乐区", "short": "长乐" },
+          { "name": "闽侯县", "short": "闽侯" },
+          { "name": "连江县", "short": "连江" },
+          { "name": "罗源县", "short": "罗源" },
+          { "name": "闽清县", "short": "闽清" },
+          { "name": "永泰县", "short": "永泰" },
+          { "name": "平潭县", "short": "平潭" },
+          { "name": "福清市", "short": "福清" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "厦门市",
+        "short": "厦门",
+        "children": [
+          { "name": "思明区", "short": "思明" },
+          { "name": "海沧区", "short": "海沧" },
+          { "name": "湖里区", "short": "湖里" },
+          { "name": "集美区", "short": "集美" },
+          { "name": "同安区", "short": "同安" },
+          { "name": "翔安区", "short": "翔安" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "莆田市",
+        "short": "莆田",
+        "children": [
+          { "name": "城厢区", "short": "城厢" },
+          { "name": "涵江区", "short": "涵江" },
+          { "name": "荔城区", "short": "荔城" },
+          { "name": "秀屿区", "short": "秀屿" },
+          { "name": "仙游县", "short": "仙游" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "三明市",
+        "short": "三明",
+        "children": [
+          { "name": "梅列区", "short": "梅列" },
+          { "name": "三元区", "short": "三元" },
+          { "name": "明溪县", "short": "明溪" },
+          { "name": "清流县", "short": "清流" },
+          { "name": "宁化县", "short": "宁化" },
+          { "name": "大田县", "short": "大田" },
+          { "name": "尤溪县", "short": "尤溪" },
+          { "name": "沙县", "short": "沙" },
+          { "name": "将乐县", "short": "将乐" },
+          { "name": "泰宁县", "short": "泰宁" },
+          { "name": "建宁县", "short": "建宁" },
+          { "name": "永安市", "short": "永安" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "三元区", "short": "三元" },
+          { "name": "沙县区", "short": "沙" }
+        ]
+      },
+      {
+        "name": "泉州市",
+        "short": "泉州",
+        "children": [
+          { "name": "鲤城区", "short": "鲤城" },
+          { "name": "丰泽区", "short": "丰泽" },
+          { "name": "洛江区", "short": "洛江" },
+          { "name": "泉港区", "short": "泉港" },
+          { "name": "惠安县", "short": "惠安" },
+          { "name": "安溪县", "short": "安溪" },
+          { "name": "永春县", "short": "永春" },
+          { "name": "德化县", "short": "德化" },
+          { "name": "金门县", "short": "金门" },
+          { "name": "石狮市", "short": "石狮" },
+          { "name": "晋江市", "short": "晋江" },
+          { "name": "南安市", "short": "南安" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "漳州市",
+        "short": "漳州",
+        "children": [
+          { "name": "芗城区", "short": "芗城" },
+          { "name": "龙文区", "short": "龙文" },
+          { "name": "云霄县", "short": "云霄" },
+          { "name": "漳浦县", "short": "漳浦" },
+          { "name": "诏安县", "short": "诏安" },
+          { "name": "长泰县", "short": "长泰" },
+          { "name": "东山县", "short": "东山" },
+          { "name": "南靖县", "short": "南靖" },
+          { "name": "平和县", "short": "平和" },
+          { "name": "华安县", "short": "华安" },
+          { "name": "龙海市", "short": "龙海" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "龙海区", "short": "龙海" },
+          { "name": "长泰区", "short": "长泰" }
+        ]
+      },
+      {
+        "name": "南平市",
+        "short": "南平",
+        "children": [
+          { "name": "延平区", "short": "延平" },
+          { "name": "建阳区", "short": "建阳" },
+          { "name": "顺昌县", "short": "顺昌" },
+          { "name": "浦城县", "short": "浦城" },
+          { "name": "光泽县", "short": "光泽" },
+          { "name": "松溪县", "short": "松溪" },
+          { "name": "政和县", "short": "政和" },
+          { "name": "邵武市", "short": "邵武" },
+          { "name": "武夷山市", "short": "武夷山" },
+          { "name": "建瓯市", "short": "建瓯" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "龙岩市",
+        "short": "龙岩",
+        "children": [
+          { "name": "新罗区", "short": "新罗" },
+          { "name": "永定区", "short": "永定" },
+          { "name": "长汀县", "short": "长汀" },
+          { "name": "上杭县", "short": "上杭" },
+          { "name": "武平县", "short": "武平" },
+          { "name": "连城县", "short": "连城" },
+          { "name": "漳平市", "short": "漳平" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "宁德市",
+        "short": "宁德",
+        "children": [
+          { "name": "蕉城区", "short": "蕉城" },
+          { "name": "霞浦县", "short": "霞浦" },
+          { "name": "古田县", "short": "古田" },
+          { "name": "屏南县", "short": "屏南" },
+          { "name": "寿宁县", "short": "寿宁" },
+          { "name": "周宁县", "short": "周宁" },
+          { "name": "柘荣县", "short": "柘荣" },
+          { "name": "福安市", "short": "福安" },
+          { "name": "福鼎市", "short": "福鼎" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "江西省",
+    "short": "江西",
+    "children": [
+      {
+        "name": "南昌市",
+        "short": "南昌",
+        "children": [
+          { "name": "东湖区", "short": "东湖" },
+          { "name": "西湖区", "short": "西湖" },
+          { "name": "青云谱区", "short": "青云谱" },
+          { "name": "青山湖区", "short": "青山湖" },
+          { "name": "新建区", "short": "新建" },
+          { "name": "红谷滩区", "short": "红谷滩" },
+          { "name": "南昌县", "short": "南昌" },
+          { "name": "安义县", "short": "安义" },
+          { "name": "进贤县", "short": "进贤" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "景德镇市",
+        "short": "景德镇",
+        "children": [
+          { "name": "昌江区", "short": "昌江" },
+          { "name": "珠山区", "short": "珠山" },
+          { "name": "浮梁县", "short": "浮梁" },
+          { "name": "乐平市", "short": "乐平" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "萍乡市",
+        "short": "萍乡",
+        "children": [
+          { "name": "安源区", "short": "安源" },
+          { "name": "湘东区", "short": "湘东" },
+          { "name": "莲花县", "short": "莲花" },
+          { "name": "上栗县", "short": "上栗" },
+          { "name": "芦溪县", "short": "芦溪" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "九江市",
+        "short": "九江",
+        "children": [
+          { "name": "濂溪区", "short": "濂溪" },
+          { "name": "浔阳区", "short": "浔阳" },
+          { "name": "柴桑区", "short": "柴桑" },
+          { "name": "武宁县", "short": "武宁" },
+          { "name": "修水县", "short": "修水" },
+          { "name": "永修县", "short": "永修" },
+          { "name": "德安县", "short": "德安" },
+          { "name": "都昌县", "short": "都昌" },
+          { "name": "湖口县", "short": "湖口" },
+          { "name": "彭泽县", "short": "彭泽" },
+          { "name": "瑞昌市", "short": "瑞昌" },
+          { "name": "共青城市", "short": "共青城" },
+          { "name": "庐山市", "short": "庐山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "新余市",
+        "short": "新余",
+        "children": [
+          { "name": "渝水区", "short": "渝水" },
+          { "name": "分宜县", "short": "分宜" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "鹰潭市",
+        "short": "鹰潭",
+        "children": [
+          { "name": "月湖区", "short": "月湖" },
+          { "name": "余江区", "short": "余江" },
+          { "name": "贵溪市", "short": "贵溪" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "赣州市",
+        "short": "赣州",
+        "children": [
+          { "name": "章贡区", "short": "章贡" },
+          { "name": "南康区", "short": "南康" },
+          { "name": "赣县区", "short": "赣" },
+          { "name": "信丰县", "short": "信丰" },
+          { "name": "大余县", "short": "大余" },
+          { "name": "上犹县", "short": "上犹" },
+          { "name": "崇义县", "short": "崇义" },
+          { "name": "安远县", "short": "安远" },
+          { "name": "定南县", "short": "定南" },
+          { "name": "全南县", "short": "全南" },
+          { "name": "宁都县", "short": "宁都" },
+          { "name": "于都县", "short": "于都" },
+          { "name": "兴国县", "short": "兴国" },
+          { "name": "会昌县", "short": "会昌" },
+          { "name": "寻乌县", "short": "寻乌" },
+          { "name": "石城县", "short": "石城" },
+          { "name": "瑞金市", "short": "瑞金" },
+          { "name": "龙南市", "short": "龙南" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "吉安市",
+        "short": "吉安",
+        "children": [
+          { "name": "吉州区", "short": "吉州" },
+          { "name": "青原区", "short": "青原" },
+          { "name": "吉安县", "short": "吉安" },
+          { "name": "吉水县", "short": "吉水" },
+          { "name": "峡江县", "short": "峡江" },
+          { "name": "新干县", "short": "新干" },
+          { "name": "永丰县", "short": "永丰" },
+          { "name": "泰和县", "short": "泰和" },
+          { "name": "遂川县", "short": "遂川" },
+          { "name": "万安县", "short": "万安" },
+          { "name": "安福县", "short": "安福" },
+          { "name": "永新县", "short": "永新" },
+          { "name": "井冈山市", "short": "井冈山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "宜春市",
+        "short": "宜春",
+        "children": [
+          { "name": "袁州区", "short": "袁州" },
+          { "name": "奉新县", "short": "奉新" },
+          { "name": "万载县", "short": "万载" },
+          { "name": "上高县", "short": "上高" },
+          { "name": "宜丰县", "short": "宜丰" },
+          { "name": "靖安县", "short": "靖安" },
+          { "name": "铜鼓县", "short": "铜鼓" },
+          { "name": "丰城市", "short": "丰城" },
+          { "name": "樟树市", "short": "樟树" },
+          { "name": "高安市", "short": "高安" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "抚州市",
+        "short": "抚州",
+        "children": [
+          { "name": "临川区", "short": "临川" },
+          { "name": "东乡区", "short": "东乡" },
+          { "name": "南城县", "short": "南城" },
+          { "name": "黎川县", "short": "黎川" },
+          { "name": "南丰县", "short": "南丰" },
+          { "name": "崇仁县", "short": "崇仁" },
+          { "name": "乐安县", "short": "乐安" },
+          { "name": "宜黄县", "short": "宜黄" },
+          { "name": "金溪县", "short": "金溪" },
+          { "name": "资溪县", "short": "资溪" },
+          { "name": "广昌县", "short": "广昌" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "上饶市",
+        "short": "上饶",
+        "children": [
+          { "name": "信州区", "short": "信州" },
+          { "name": "广丰区", "short": "广丰" },
+          { "name": "广信区", "short": "广信" },
+          { "name": "玉山县", "short": "玉山" },
+          { "name": "铅山县", "short": "铅山" },
+          { "name": "横峰县", "short": "横峰" },
+          { "name": "弋阳县", "short": "弋阳" },
+          { "name": "余干县", "short": "余干" },
+          { "name": "鄱阳县", "short": "鄱阳" },
+          { "name": "万年县", "short": "万年" },
+          { "name": "婺源县", "short": "婺源" },
+          { "name": "德兴市", "short": "德兴" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "山东省",
+    "short": "山东",
+    "children": [
+      {
+        "name": "济南市",
+        "short": "济南",
+        "children": [
+          { "name": "历下区", "short": "历下" },
+          { "name": "市中区", "short": "市中" },
+          { "name": "槐荫区", "short": "槐荫" },
+          { "name": "天桥区", "short": "天桥" },
+          { "name": "历城区", "short": "历城" },
+          { "name": "长清区", "short": "长清" },
+          { "name": "章丘区", "short": "章丘" },
+          { "name": "济阳区", "short": "济阳" },
+          { "name": "莱芜区", "short": "莱芜" },
+          { "name": "钢城区", "short": "钢城" },
+          { "name": "平阴县", "short": "平阴" },
+          { "name": "商河县", "short": "商河" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "济南高新技术产业开发区", "short": "济南高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "青岛市",
+        "short": "青岛",
+        "children": [
+          { "name": "市南区", "short": "市南" },
+          { "name": "市北区", "short": "市北" },
+          { "name": "黄岛区", "short": "黄岛" },
+          { "name": "崂山区", "short": "崂山" },
+          { "name": "李沧区", "short": "李沧" },
+          { "name": "城阳区", "short": "城阳" },
+          { "name": "即墨区", "short": "即墨" },
+          { "name": "胶州市", "short": "胶州" },
+          { "name": "平度市", "short": "平度" },
+          { "name": "莱西市", "short": "莱西" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "青岛高新技术产业开发区", "short": "青岛高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "淄博市",
+        "short": "淄博",
+        "children": [
+          { "name": "淄川区", "short": "淄川" },
+          { "name": "张店区", "short": "张店" },
+          { "name": "博山区", "short": "博山" },
+          { "name": "临淄区", "short": "临淄" },
+          { "name": "周村区", "short": "周村" },
+          { "name": "桓台县", "short": "桓台" },
+          { "name": "高青县", "short": "高青" },
+          { "name": "沂源县", "short": "沂源" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "枣庄市",
+        "short": "枣庄",
+        "children": [
+          { "name": "市中区", "short": "市中" },
+          { "name": "薛城区", "short": "薛城" },
+          { "name": "峄城区", "short": "峄城" },
+          { "name": "台儿庄区", "short": "台儿庄" },
+          { "name": "山亭区", "short": "山亭" },
+          { "name": "滕州市", "short": "滕州" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "东营市",
+        "short": "东营",
+        "children": [
+          { "name": "东营区", "short": "东营" },
+          { "name": "河口区", "short": "河口" },
+          { "name": "垦利区", "short": "垦利" },
+          { "name": "利津县", "short": "利津" },
+          { "name": "广饶县", "short": "广饶" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "东营经济技术开发区", "short": "东营经济技术开发" },
+          { "name": "东营港经济开发区", "short": "东营港经济开发" }
+        ]
+      },
+      {
+        "name": "烟台市",
+        "short": "烟台",
+        "children": [
+          { "name": "芝罘区", "short": "芝罘" },
+          { "name": "福山区", "short": "福山" },
+          { "name": "牟平区", "short": "牟平" },
+          { "name": "莱山区", "short": "莱山" },
+          { "name": "蓬莱区", "short": "蓬莱" },
+          { "name": "龙口市", "short": "龙口" },
+          { "name": "莱阳市", "short": "莱阳" },
+          { "name": "莱州市", "short": "莱州" },
+          { "name": "招远市", "short": "招远" },
+          { "name": "栖霞市", "short": "栖霞" },
+          { "name": "海阳市", "short": "海阳" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "烟台高新技术产业开发区", "short": "烟台高新技术产业开发" },
+          { "name": "烟台经济技术开发区", "short": "烟台经济技术开发" }
+        ]
+      },
+      {
+        "name": "潍坊市",
+        "short": "潍坊",
+        "children": [
+          { "name": "潍城区", "short": "潍城" },
+          { "name": "寒亭区", "short": "寒亭" },
+          { "name": "坊子区", "short": "坊子" },
+          { "name": "奎文区", "short": "奎文" },
+          { "name": "临朐县", "short": "临朐" },
+          { "name": "昌乐县", "short": "昌乐" },
+          { "name": "青州市", "short": "青州" },
+          { "name": "诸城市", "short": "诸城" },
+          { "name": "寿光市", "short": "寿光" },
+          { "name": "安丘市", "short": "安丘" },
+          { "name": "高密市", "short": "高密" },
+          { "name": "昌邑市", "short": "昌邑" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "潍坊滨海经济技术开发区", "short": "潍坊滨海经济技术开发" }
+        ]
+      },
+      {
+        "name": "济宁市",
+        "short": "济宁",
+        "children": [
+          { "name": "任城区", "short": "任城" },
+          { "name": "兖州区", "short": "兖州" },
+          { "name": "微山县", "short": "微山" },
+          { "name": "鱼台县", "short": "鱼台" },
+          { "name": "金乡县", "short": "金乡" },
+          { "name": "嘉祥县", "short": "嘉祥" },
+          { "name": "汶上县", "short": "汶上" },
+          { "name": "泗水县", "short": "泗水" },
+          { "name": "梁山县", "short": "梁山" },
+          { "name": "曲阜市", "short": "曲阜" },
+          { "name": "邹城市", "short": "邹城" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "济宁高新技术产业开发区", "short": "济宁高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "泰安市",
+        "short": "泰安",
+        "children": [
+          { "name": "泰山区", "short": "泰山" },
+          { "name": "岱岳区", "short": "岱岳" },
+          { "name": "宁阳县", "short": "宁阳" },
+          { "name": "东平县", "short": "东平" },
+          { "name": "新泰市", "short": "新泰" },
+          { "name": "肥城市", "short": "肥城" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "威海市",
+        "short": "威海",
+        "children": [
+          { "name": "环翠区", "short": "环翠" },
+          { "name": "文登区", "short": "文登" },
+          { "name": "荣成市", "short": "荣成" },
+          { "name": "乳山市", "short": "乳山" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "威海火炬高技术产业开发区",
+            "short": "威海火炬高技术产业开发"
+          },
+          { "name": "威海经济技术开发区", "short": "威海经济技术开发" },
+          { "name": "威海临港经济技术开发区", "short": "威海临港经济技术开发" }
+        ]
+      },
+      {
+        "name": "日照市",
+        "short": "日照",
+        "children": [
+          { "name": "东港区", "short": "东港" },
+          { "name": "岚山区", "short": "岚山" },
+          { "name": "五莲县", "short": "五莲" },
+          { "name": "莒县", "short": "莒" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "日照经济技术开发区", "short": "日照经济技术开发" }
+        ]
+      },
+      {
+        "name": "临沂市",
+        "short": "临沂",
+        "children": [
+          { "name": "兰山区", "short": "兰山" },
+          { "name": "罗庄区", "short": "罗庄" },
+          { "name": "河东区", "short": "河东" },
+          { "name": "沂南县", "short": "沂南" },
+          { "name": "郯城县", "short": "郯城" },
+          { "name": "沂水县", "short": "沂水" },
+          { "name": "兰陵县", "short": "兰陵" },
+          { "name": "费县", "short": "费" },
+          { "name": "平邑县", "short": "平邑" },
+          { "name": "莒南县", "short": "莒南" },
+          { "name": "蒙阴县", "short": "蒙阴" },
+          { "name": "临沭县", "short": "临沭" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "临沂高新技术产业开发区", "short": "临沂高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "德州市",
+        "short": "德州",
+        "children": [
+          { "name": "德城区", "short": "德城" },
+          { "name": "陵城区", "short": "陵城" },
+          { "name": "宁津县", "short": "宁津" },
+          { "name": "庆云县", "short": "庆云" },
+          { "name": "临邑县", "short": "临邑" },
+          { "name": "齐河县", "short": "齐河" },
+          { "name": "平原县", "short": "平原" },
+          { "name": "夏津县", "short": "夏津" },
+          { "name": "武城县", "short": "武城" },
+          { "name": "乐陵市", "short": "乐陵" },
+          { "name": "禹城市", "short": "禹城" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "德州经济技术开发区", "short": "德州经济技术开发" },
+          { "name": "德州运河经济开发区", "short": "德州运河经济开发" }
+        ]
+      },
+      {
+        "name": "聊城市",
+        "short": "聊城",
+        "children": [
+          { "name": "东昌府区", "short": "东昌府" },
+          { "name": "茌平区", "short": "茌平" },
+          { "name": "阳谷县", "short": "阳谷" },
+          { "name": "莘县", "short": "莘" },
+          { "name": "东阿县", "short": "东阿" },
+          { "name": "冠县", "short": "冠" },
+          { "name": "高唐县", "short": "高唐" },
+          { "name": "临清市", "short": "临清" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "滨州市",
+        "short": "滨州",
+        "children": [
+          { "name": "滨城区", "short": "滨城" },
+          { "name": "沾化区", "short": "沾化" },
+          { "name": "惠民县", "short": "惠民" },
+          { "name": "阳信县", "short": "阳信" },
+          { "name": "无棣县", "short": "无棣" },
+          { "name": "博兴县", "short": "博兴" },
+          { "name": "邹平市", "short": "邹平" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "菏泽市",
+        "short": "菏泽",
+        "children": [
+          { "name": "牡丹区", "short": "牡丹" },
+          { "name": "定陶区", "short": "定陶" },
+          { "name": "曹县", "short": "曹" },
+          { "name": "单县", "short": "单" },
+          { "name": "成武县", "short": "成武" },
+          { "name": "巨野县", "short": "巨野" },
+          { "name": "郓城县", "short": "郓城" },
+          { "name": "鄄城县", "short": "鄄城" },
+          { "name": "东明县", "short": "东明" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "菏泽经济技术开发区", "short": "菏泽经济技术开发" },
+          { "name": "菏泽高新技术开发区", "short": "菏泽高新技术开发" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "河南省",
+    "short": "河南",
+    "children": [
+      {
+        "name": "郑州市",
+        "short": "郑州",
+        "children": [
+          { "name": "中原区", "short": "中原" },
+          { "name": "二七区", "short": "二七" },
+          { "name": "管城回族区", "short": "管城" },
+          { "name": "金水区", "short": "金水" },
+          { "name": "上街区", "short": "上街" },
+          { "name": "惠济区", "short": "惠济" },
+          { "name": "中牟县", "short": "中牟" },
+          { "name": "巩义市", "short": "巩义" },
+          { "name": "荥阳市", "short": "荥阳" },
+          { "name": "新密市", "short": "新密" },
+          { "name": "新郑市", "short": "新郑" },
+          { "name": "登封市", "short": "登封" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "郑州经济技术开发区", "short": "郑州经济技术开发" },
+          { "name": "郑州高新技术产业开发区", "short": "郑州高新技术产业开发" },
+          {
+            "name": "郑州航空港经济综合实验区",
+            "short": "郑州航空港经济综合实验"
+          }
+        ]
+      },
+      {
+        "name": "开封市",
+        "short": "开封",
+        "children": [
+          { "name": "龙亭区", "short": "龙亭" },
+          { "name": "顺河回族区", "short": "顺河" },
+          { "name": "鼓楼区", "short": "鼓楼" },
+          { "name": "禹王台区", "short": "禹王台" },
+          { "name": "祥符区", "short": "祥符" },
+          { "name": "杞县", "short": "杞" },
+          { "name": "通许县", "short": "通许" },
+          { "name": "尉氏县", "short": "尉氏" },
+          { "name": "兰考县", "short": "兰考" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "洛阳市",
+        "short": "洛阳",
+        "children": [
+          { "name": "老城区", "short": "老城" },
+          { "name": "西工区", "short": "西工" },
+          { "name": "瀍河回族区", "short": "瀍河" },
+          { "name": "涧西区", "short": "涧西" },
+          { "name": "吉利区", "short": "吉利" },
+          { "name": "洛龙区", "short": "洛龙" },
+          { "name": "孟津县", "short": "孟津" },
+          { "name": "新安县", "short": "新安" },
+          { "name": "栾川县", "short": "栾川" },
+          { "name": "嵩县", "short": "嵩" },
+          { "name": "汝阳县", "short": "汝阳" },
+          { "name": "宜阳县", "short": "宜阳" },
+          { "name": "洛宁县", "short": "洛宁" },
+          { "name": "伊川县", "short": "伊川" },
+          { "name": "偃师市", "short": "偃师" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "偃师区", "short": "偃师" },
+          { "name": "孟津区", "short": "孟津" },
+          { "name": "洛阳高新技术产业开发区", "short": "洛阳高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "平顶山市",
+        "short": "平顶山",
+        "children": [
+          { "name": "新华区", "short": "新华" },
+          { "name": "卫东区", "short": "卫东" },
+          { "name": "石龙区", "short": "石龙" },
+          { "name": "湛河区", "short": "湛河" },
+          { "name": "宝丰县", "short": "宝丰" },
+          { "name": "叶县", "short": "叶" },
+          { "name": "鲁山县", "short": "鲁山" },
+          { "name": "郏县", "short": "郏" },
+          { "name": "舞钢市", "short": "舞钢" },
+          { "name": "汝州市", "short": "汝州" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "平顶山高新技术产业开发区",
+            "short": "平顶山高新技术产业开发"
+          },
+          {
+            "name": "平顶山市城乡一体化示范区",
+            "short": "平顶山市城乡一体化示范"
+          }
+        ]
+      },
+      {
+        "name": "安阳市",
+        "short": "安阳",
+        "children": [
+          { "name": "文峰区", "short": "文峰" },
+          { "name": "北关区", "short": "北关" },
+          { "name": "殷都区", "short": "殷都" },
+          { "name": "龙安区", "short": "龙安" },
+          { "name": "安阳县", "short": "安阳" },
+          { "name": "汤阴县", "short": "汤阴" },
+          { "name": "滑县", "short": "滑" },
+          { "name": "内黄县", "short": "内黄" },
+          { "name": "林州市", "short": "林州" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "安阳高新技术产业开发区", "short": "安阳高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "鹤壁市",
+        "short": "鹤壁",
+        "children": [
+          { "name": "鹤山区", "short": "鹤山" },
+          { "name": "山城区", "short": "山城" },
+          { "name": "淇滨区", "short": "淇滨" },
+          { "name": "浚县", "short": "浚" },
+          { "name": "淇县", "short": "淇" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "鹤壁经济技术开发区", "short": "鹤壁经济技术开发" }
+        ]
+      },
+      {
+        "name": "新乡市",
+        "short": "新乡",
+        "children": [
+          { "name": "红旗区", "short": "红" },
+          { "name": "卫滨区", "short": "卫滨" },
+          { "name": "凤泉区", "short": "凤泉" },
+          { "name": "牧野区", "short": "牧野" },
+          { "name": "新乡县", "short": "新乡" },
+          { "name": "获嘉县", "short": "获嘉" },
+          { "name": "原阳县", "short": "原阳" },
+          { "name": "延津县", "short": "延津" },
+          { "name": "封丘县", "short": "封丘" },
+          { "name": "卫辉市", "short": "卫辉" },
+          { "name": "辉县市", "short": "辉" },
+          { "name": "长垣市", "short": "长垣" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "新乡高新技术产业开发区", "short": "新乡高新技术产业开发" },
+          { "name": "新乡经济技术开发区", "short": "新乡经济技术开发" },
+          {
+            "name": "新乡市平原城乡一体化示范区",
+            "short": "新乡市平原城乡一体化示范"
+          }
+        ]
+      },
+      {
+        "name": "焦作市",
+        "short": "焦作",
+        "children": [
+          { "name": "解放区", "short": "解放" },
+          { "name": "中站区", "short": "中站" },
+          { "name": "马村区", "short": "马村" },
+          { "name": "山阳区", "short": "山阳" },
+          { "name": "修武县", "short": "修武" },
+          { "name": "博爱县", "short": "博爱" },
+          { "name": "武陟县", "short": "武陟" },
+          { "name": "温县", "short": "温" },
+          { "name": "沁阳市", "short": "沁阳" },
+          { "name": "孟州市", "short": "孟州" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "焦作城乡一体化示范区", "short": "焦作城乡一体化示范" }
+        ]
+      },
+      {
+        "name": "濮阳市",
+        "short": "濮阳",
+        "children": [
+          { "name": "华龙区", "short": "华龙" },
+          { "name": "清丰县", "short": "清丰" },
+          { "name": "南乐县", "short": "南乐" },
+          { "name": "范县", "short": "范" },
+          { "name": "台前县", "short": "台前" },
+          { "name": "濮阳县", "short": "濮阳" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "河南濮阳工业园区", "short": "河南濮阳工业园" },
+          { "name": "濮阳经济技术开发区", "short": "濮阳经济技术开发" }
+        ]
+      },
+      {
+        "name": "许昌市",
+        "short": "许昌",
+        "children": [
+          { "name": "魏都区", "short": "魏都" },
+          { "name": "建安区", "short": "建安" },
+          { "name": "鄢陵县", "short": "鄢陵" },
+          { "name": "襄城县", "short": "襄城" },
+          { "name": "禹州市", "short": "禹州" },
+          { "name": "长葛市", "short": "长葛" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "许昌经济技术开发区", "short": "许昌经济技术开发" }
+        ]
+      },
+      {
+        "name": "漯河市",
+        "short": "漯河",
+        "children": [
+          { "name": "源汇区", "short": "源汇" },
+          { "name": "郾城区", "short": "郾城" },
+          { "name": "召陵区", "short": "召陵" },
+          { "name": "舞阳县", "short": "舞阳" },
+          { "name": "临颍县", "short": "临颍" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "漯河经济技术开发区", "short": "漯河经济技术开发" }
+        ]
+      },
+      {
+        "name": "三门峡市",
+        "short": "三门峡",
+        "children": [
+          { "name": "湖滨区", "short": "湖滨" },
+          { "name": "陕州区", "short": "陕州" },
+          { "name": "渑池县", "short": "渑池" },
+          { "name": "卢氏县", "short": "卢氏" },
+          { "name": "义马市", "short": "义马" },
+          { "name": "灵宝市", "short": "灵宝" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "河南三门峡经济开发区", "short": "河南三门峡经济开发" }
+        ]
+      },
+      {
+        "name": "南阳市",
+        "short": "南阳",
+        "children": [
+          { "name": "宛城区", "short": "宛城" },
+          { "name": "卧龙区", "short": "卧龙" },
+          { "name": "南召县", "short": "南召" },
+          { "name": "方城县", "short": "方城" },
+          { "name": "西峡县", "short": "西峡" },
+          { "name": "镇平县", "short": "镇平" },
+          { "name": "内乡县", "short": "内乡" },
+          { "name": "淅川县", "short": "淅川" },
+          { "name": "社旗县", "short": "社" },
+          { "name": "唐河县", "short": "唐河" },
+          { "name": "新野县", "short": "新野" },
+          { "name": "桐柏县", "short": "桐柏" },
+          { "name": "邓州市", "short": "邓州" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "南阳高新技术产业开发区", "short": "南阳高新技术产业开发" },
+          { "name": "南阳市城乡一体化示范区", "short": "南阳市城乡一体化示范" }
+        ]
+      },
+      {
+        "name": "商丘市",
+        "short": "商丘",
+        "children": [
+          { "name": "梁园区", "short": "梁园" },
+          { "name": "睢阳区", "short": "睢阳" },
+          { "name": "民权县", "short": "民权" },
+          { "name": "睢县", "short": "睢" },
+          { "name": "宁陵县", "short": "宁陵" },
+          { "name": "柘城县", "short": "柘城" },
+          { "name": "虞城县", "short": "虞城" },
+          { "name": "夏邑县", "short": "夏邑" },
+          { "name": "永城市", "short": "永城" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "豫东综合物流产业聚集区", "short": "豫东综合物流产业聚集" },
+          { "name": "河南商丘经济开发区", "short": "河南商丘经济开发" }
+        ]
+      },
+      {
+        "name": "信阳市",
+        "short": "信阳",
+        "children": [
+          { "name": "浉河区", "short": "浉河" },
+          { "name": "平桥区", "short": "平桥" },
+          { "name": "罗山县", "short": "罗山" },
+          { "name": "光山县", "short": "光山" },
+          { "name": "新县", "short": "新" },
+          { "name": "商城县", "short": "商城" },
+          { "name": "固始县", "short": "固始" },
+          { "name": "潢川县", "short": "潢川" },
+          { "name": "淮滨县", "short": "淮滨" },
+          { "name": "息县", "short": "息" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "信阳高新技术产业开发区", "short": "信阳高新技术产业开发" }
+        ]
+      },
+      {
+        "name": "周口市",
+        "short": "周口",
+        "children": [
+          { "name": "川汇区", "short": "川汇" },
+          { "name": "淮阳区", "short": "淮阳" },
+          { "name": "扶沟县", "short": "扶沟" },
+          { "name": "西华县", "short": "西华" },
+          { "name": "商水县", "short": "商水" },
+          { "name": "沈丘县", "short": "沈丘" },
+          { "name": "郸城县", "short": "郸城" },
+          { "name": "太康县", "short": "太康" },
+          { "name": "鹿邑县", "short": "鹿邑" },
+          { "name": "项城市", "short": "项城" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "河南周口经济开发区", "short": "河南周口经济开发" }
+        ]
+      },
+      {
+        "name": "驻马店市",
+        "short": "驻马店",
+        "children": [
+          { "name": "驿城区", "short": "驿城" },
+          { "name": "西平县", "short": "西平" },
+          { "name": "上蔡县", "short": "上蔡" },
+          { "name": "平舆县", "short": "平舆" },
+          { "name": "正阳县", "short": "正阳" },
+          { "name": "确山县", "short": "确山" },
+          { "name": "泌阳县", "short": "泌阳" },
+          { "name": "汝南县", "short": "汝南" },
+          { "name": "遂平县", "short": "遂平" },
+          { "name": "新蔡县", "short": "新蔡" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "河南驻马店经济开发区", "short": "河南驻马店经济开发" }
+        ]
+      },
+      {
+        "name": "河南省-省直辖县级行政区划",
+        "short": "河南省-省直辖县级行政区划",
+        "children": [{ "name": "济源市", "short": "济源" }]
+      }
+    ]
+  },
+  {
+    "name": "湖北省",
+    "short": "湖北",
+    "children": [
+      {
+        "name": "武汉市",
+        "short": "武汉",
+        "children": [
+          { "name": "江岸区", "short": "江岸" },
+          { "name": "江汉区", "short": "江汉" },
+          { "name": "硚口区", "short": "硚口" },
+          { "name": "汉阳区", "short": "汉阳" },
+          { "name": "武昌区", "short": "武昌" },
+          { "name": "青山区", "short": "青山" },
+          { "name": "洪山区", "short": "洪山" },
+          { "name": "东西湖区", "short": "东西湖" },
+          { "name": "汉南区", "short": "汉南" },
+          { "name": "蔡甸区", "short": "蔡甸" },
+          { "name": "江夏区", "short": "江夏" },
+          { "name": "黄陂区", "short": "黄陂" },
+          { "name": "新洲区", "short": "新洲" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "黄石市",
+        "short": "黄石",
+        "children": [
+          { "name": "黄石港区", "short": "黄石港" },
+          { "name": "西塞山区", "short": "西塞山" },
+          { "name": "下陆区", "short": "下陆" },
+          { "name": "铁山区", "short": "铁山" },
+          { "name": "阳新县", "short": "阳新" },
+          { "name": "大冶市", "short": "大冶" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "十堰市",
+        "short": "十堰",
+        "children": [
+          { "name": "茅箭区", "short": "茅箭" },
+          { "name": "张湾区", "short": "张湾" },
+          { "name": "郧阳区", "short": "郧阳" },
+          { "name": "郧西县", "short": "郧西" },
+          { "name": "竹山县", "short": "竹山" },
+          { "name": "竹溪县", "short": "竹溪" },
+          { "name": "房县", "short": "房" },
+          { "name": "丹江口市", "short": "丹江口" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "宜昌市",
+        "short": "宜昌",
+        "children": [
+          { "name": "西陵区", "short": "西陵" },
+          { "name": "伍家岗区", "short": "伍家岗" },
+          { "name": "点军区", "short": "点军" },
+          { "name": "猇亭区", "short": "猇亭" },
+          { "name": "夷陵区", "short": "夷陵" },
+          { "name": "远安县", "short": "远安" },
+          { "name": "兴山县", "short": "兴山" },
+          { "name": "秭归县", "short": "秭归" },
+          { "name": "长阳土家族自治县", "short": "长阳土家族自治" },
+          { "name": "五峰土家族自治县", "short": "五峰土家族自治" },
+          { "name": "宜都市", "short": "宜都" },
+          { "name": "当阳市", "short": "当阳" },
+          { "name": "枝江市", "short": "枝江" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "襄阳市",
+        "short": "襄阳",
+        "children": [
+          { "name": "襄城区", "short": "襄城" },
+          { "name": "樊城区", "short": "樊城" },
+          { "name": "襄州区", "short": "襄州" },
+          { "name": "南漳县", "short": "南漳" },
+          { "name": "谷城县", "short": "谷城" },
+          { "name": "保康县", "short": "保康" },
+          { "name": "老河口市", "short": "老河口" },
+          { "name": "枣阳市", "short": "枣阳" },
+          { "name": "宜城市", "short": "宜城" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "鄂州市",
+        "short": "鄂州",
+        "children": [
+          { "name": "梁子湖区", "short": "梁子湖" },
+          { "name": "华容区", "short": "华容" },
+          { "name": "鄂城区", "short": "鄂城" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "荆门市",
+        "short": "荆门",
+        "children": [
+          { "name": "东宝区", "short": "东宝" },
+          { "name": "掇刀区", "short": "掇刀" },
+          { "name": "沙洋县", "short": "沙洋" },
+          { "name": "钟祥市", "short": "钟祥" },
+          { "name": "京山市", "short": "京山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "孝感市",
+        "short": "孝感",
+        "children": [
+          { "name": "孝南区", "short": "孝南" },
+          { "name": "孝昌县", "short": "孝昌" },
+          { "name": "大悟县", "short": "大悟" },
+          { "name": "云梦县", "short": "云梦" },
+          { "name": "应城市", "short": "应城" },
+          { "name": "安陆市", "short": "安陆" },
+          { "name": "汉川市", "short": "汉川" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "荆州市",
+        "short": "荆州",
+        "children": [
+          { "name": "沙市区", "short": "沙" },
+          { "name": "荆州区", "short": "荆州" },
+          { "name": "公安县", "short": "公安" },
+          { "name": "江陵县", "short": "江陵" },
+          { "name": "石首市", "short": "石首" },
+          { "name": "洪湖市", "short": "洪湖" },
+          { "name": "松滋市", "short": "松滋" },
+          { "name": "监利市", "short": "监利" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "荆州经济技术开发区", "short": "荆州经济技术开发" }
+        ]
+      },
+      {
+        "name": "黄冈市",
+        "short": "黄冈",
+        "children": [
+          { "name": "黄州区", "short": "黄州" },
+          { "name": "团风县", "short": "团风" },
+          { "name": "红安县", "short": "红安" },
+          { "name": "罗田县", "short": "罗田" },
+          { "name": "英山县", "short": "英山" },
+          { "name": "浠水县", "short": "浠水" },
+          { "name": "蕲春县", "short": "蕲春" },
+          { "name": "黄梅县", "short": "黄梅" },
+          { "name": "麻城市", "short": "麻城" },
+          { "name": "武穴市", "short": "武穴" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "龙感湖管理区", "short": "龙感湖管理" }
+        ]
+      },
+      {
+        "name": "咸宁市",
+        "short": "咸宁",
+        "children": [
+          { "name": "咸安区", "short": "咸安" },
+          { "name": "嘉鱼县", "short": "嘉鱼" },
+          { "name": "通城县", "short": "通城" },
+          { "name": "崇阳县", "short": "崇阳" },
+          { "name": "通山县", "short": "通山" },
+          { "name": "赤壁市", "short": "赤壁" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "随州市",
+        "short": "随州",
+        "children": [
+          { "name": "曾都区", "short": "曾都" },
+          { "name": "随县", "short": "随" },
+          { "name": "广水市", "short": "广水" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "恩施土家族苗族自治州",
+        "short": "恩施土家族苗族自治州",
+        "children": [
+          { "name": "恩施市", "short": "恩施" },
+          { "name": "利川市", "short": "利川" },
+          { "name": "建始县", "short": "建始" },
+          { "name": "巴东县", "short": "巴东" },
+          { "name": "宣恩县", "short": "宣恩" },
+          { "name": "咸丰县", "short": "咸丰" },
+          { "name": "来凤县", "short": "来凤" },
+          { "name": "鹤峰县", "short": "鹤峰" }
+        ]
+      },
+      {
+        "name": "湖北省-自治区直辖县级行政区划",
+        "short": "湖北省-直辖县级行政区划",
+        "children": [
+          { "name": "仙桃市", "short": "仙桃" },
+          { "name": "潜江市", "short": "潜江" },
+          { "name": "天门市", "short": "天门" },
+          { "name": "神农架林区", "short": "神农架林" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "湖南省",
+    "short": "湖南",
+    "children": [
+      {
+        "name": "长沙市",
+        "short": "长沙",
+        "children": [
+          { "name": "芙蓉区", "short": "芙蓉" },
+          { "name": "天心区", "short": "天心" },
+          { "name": "岳麓区", "short": "岳麓" },
+          { "name": "开福区", "short": "开福" },
+          { "name": "雨花区", "short": "雨花" },
+          { "name": "望城区", "short": "望城" },
+          { "name": "长沙县", "short": "长沙" },
+          { "name": "浏阳市", "short": "浏阳" },
+          { "name": "宁乡市", "short": "宁乡" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "株洲市",
+        "short": "株洲",
+        "children": [
+          { "name": "荷塘区", "short": "荷塘" },
+          { "name": "芦淞区", "short": "芦淞" },
+          { "name": "石峰区", "short": "石峰" },
+          { "name": "天元区", "short": "天元" },
+          { "name": "渌口区", "short": "渌口" },
+          { "name": "攸县", "short": "攸" },
+          { "name": "茶陵县", "short": "茶陵" },
+          { "name": "炎陵县", "short": "炎陵" },
+          { "name": "醴陵市", "short": "醴陵" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "云龙示范区", "short": "云龙示范" }
+        ]
+      },
+      {
+        "name": "湘潭市",
+        "short": "湘潭",
+        "children": [
+          { "name": "雨湖区", "short": "雨湖" },
+          { "name": "岳塘区", "short": "岳塘" },
+          { "name": "湘潭县", "short": "湘潭" },
+          { "name": "湘乡市", "short": "湘乡" },
+          { "name": "韶山市", "short": "韶山" },
+          { "name": "市辖区", "short": "市辖" },
+          {
+            "name": "湖南湘潭高新技术产业园区",
+            "short": "湖南湘潭高新技术产业园"
+          },
+          { "name": "湘潭昭山示范区", "short": "湘潭昭山示范" },
+          { "name": "湘潭九华示范区", "short": "湘潭九华示范" }
+        ]
+      },
+      {
+        "name": "衡阳市",
+        "short": "衡阳",
+        "children": [
+          { "name": "珠晖区", "short": "珠晖" },
+          { "name": "雁峰区", "short": "雁峰" },
+          { "name": "石鼓区", "short": "石鼓" },
+          { "name": "蒸湘区", "short": "蒸湘" },
+          { "name": "南岳区", "short": "南岳" },
+          { "name": "衡阳县", "short": "衡阳" },
+          { "name": "衡南县", "short": "衡南" },
+          { "name": "衡山县", "short": "衡山" },
+          { "name": "衡东县", "short": "衡东" },
+          { "name": "祁东县", "short": "祁东" },
+          { "name": "耒阳市", "short": "耒阳" },
+          { "name": "常宁市", "short": "常宁" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "衡阳综合保税区", "short": "衡阳综合保税" },
+          {
+            "name": "湖南衡阳高新技术产业园区",
+            "short": "湖南衡阳高新技术产业园"
+          },
+          { "name": "湖南衡阳松木经济开发区", "short": "湖南衡阳松木经济开发" }
+        ]
+      },
+      {
+        "name": "邵阳市",
+        "short": "邵阳",
+        "children": [
+          { "name": "双清区", "short": "双清" },
+          { "name": "大祥区", "short": "大祥" },
+          { "name": "北塔区", "short": "北塔" },
+          { "name": "新邵县", "short": "新邵" },
+          { "name": "邵阳县", "short": "邵阳" },
+          { "name": "隆回县", "short": "隆回" },
+          { "name": "洞口县", "short": "洞口" },
+          { "name": "绥宁县", "short": "绥宁" },
+          { "name": "新宁县", "short": "新宁" },
+          { "name": "城步苗族自治县", "short": "城步苗族自治" },
+          { "name": "武冈市", "short": "武冈" },
+          { "name": "邵东市", "short": "邵东" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "岳阳市",
+        "short": "岳阳",
+        "children": [
+          { "name": "岳阳楼区", "short": "岳阳楼" },
+          { "name": "云溪区", "short": "云溪" },
+          { "name": "君山区", "short": "君山" },
+          { "name": "岳阳县", "short": "岳阳" },
+          { "name": "华容县", "short": "华容" },
+          { "name": "湘阴县", "short": "湘阴" },
+          { "name": "平江县", "short": "平江" },
+          { "name": "汨罗市", "short": "汨罗" },
+          { "name": "临湘市", "short": "临湘" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "岳阳市屈原管理区", "short": "岳阳市屈原管理" }
+        ]
+      },
+      {
+        "name": "常德市",
+        "short": "常德",
+        "children": [
+          { "name": "武陵区", "short": "武陵" },
+          { "name": "鼎城区", "short": "鼎城" },
+          { "name": "安乡县", "short": "安乡" },
+          { "name": "汉寿县", "short": "汉寿" },
+          { "name": "澧县", "short": "澧" },
+          { "name": "临澧县", "short": "临澧" },
+          { "name": "桃源县", "short": "桃源" },
+          { "name": "石门县", "short": "石门" },
+          { "name": "津市市", "short": "津" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "常德市西洞庭管理区", "short": "常德市西洞庭管理" }
+        ]
+      },
+      {
+        "name": "张家界市",
+        "short": "张家界",
+        "children": [
+          { "name": "永定区", "short": "永定" },
+          { "name": "武陵源区", "short": "武陵源" },
+          { "name": "慈利县", "short": "慈利" },
+          { "name": "桑植县", "short": "桑植" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "益阳市",
+        "short": "益阳",
+        "children": [
+          { "name": "资阳区", "short": "资阳" },
+          { "name": "赫山区", "short": "赫山" },
+          { "name": "南县", "short": "南" },
+          { "name": "桃江县", "short": "桃江" },
+          { "name": "安化县", "short": "安化" },
+          { "name": "沅江市", "short": "沅江" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "益阳市大通湖管理区", "short": "益阳市大通湖管理" },
+          {
+            "name": "湖南益阳高新技术产业园区",
+            "short": "湖南益阳高新技术产业园"
+          }
+        ]
+      },
+      {
+        "name": "郴州市",
+        "short": "郴州",
+        "children": [
+          { "name": "北湖区", "short": "北湖" },
+          { "name": "苏仙区", "short": "苏仙" },
+          { "name": "桂阳县", "short": "桂阳" },
+          { "name": "宜章县", "short": "宜章" },
+          { "name": "永兴县", "short": "永兴" },
+          { "name": "嘉禾县", "short": "嘉禾" },
+          { "name": "临武县", "short": "临武" },
+          { "name": "汝城县", "short": "汝城" },
+          { "name": "桂东县", "short": "桂东" },
+          { "name": "安仁县", "short": "安仁" },
+          { "name": "资兴市", "short": "资兴" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "永州市",
+        "short": "永州",
+        "children": [
+          { "name": "零陵区", "short": "零陵" },
+          { "name": "冷水滩区", "short": "冷水滩" },
+          { "name": "祁阳县", "short": "祁阳" },
+          { "name": "东安县", "short": "东安" },
+          { "name": "双牌县", "short": "双牌" },
+          { "name": "道县", "short": "道" },
+          { "name": "江永县", "short": "江永" },
+          { "name": "宁远县", "short": "宁远" },
+          { "name": "蓝山县", "short": "蓝山" },
+          { "name": "新田县", "short": "新田" },
+          { "name": "江华瑶族自治县", "short": "江华瑶族自治" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "永州经济技术开发区", "short": "永州经济技术开发" },
+          { "name": "永州市回龙圩管理区", "short": "永州市回龙圩管理" },
+          { "name": "祁阳市", "short": "祁阳" }
+        ]
+      },
+      {
+        "name": "怀化市",
+        "short": "怀化",
+        "children": [
+          { "name": "鹤城区", "short": "鹤城" },
+          { "name": "中方县", "short": "中方" },
+          { "name": "沅陵县", "short": "沅陵" },
+          { "name": "辰溪县", "short": "辰溪" },
+          { "name": "溆浦县", "short": "溆浦" },
+          { "name": "会同县", "short": "会同" },
+          { "name": "麻阳苗族自治县", "short": "麻阳苗族自治" },
+          { "name": "新晃侗族自治县", "short": "新晃侗族自治" },
+          { "name": "芷江侗族自治县", "short": "芷江侗族自治" },
+          { "name": "靖州苗族侗族自治县", "short": "靖州苗族侗族自治" },
+          { "name": "通道侗族自治县", "short": "通道侗族自治" },
+          { "name": "洪江市", "short": "洪江" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "怀化市洪江管理区", "short": "怀化市洪江管理" }
+        ]
+      },
+      {
+        "name": "娄底市",
+        "short": "娄底",
+        "children": [
+          { "name": "娄星区", "short": "娄星" },
+          { "name": "双峰县", "short": "双峰" },
+          { "name": "新化县", "short": "新化" },
+          { "name": "冷水江市", "short": "冷水江" },
+          { "name": "涟源市", "short": "涟源" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "湘西土家族苗族自治州",
+        "short": "湘西土家族苗族自治州",
+        "children": [
+          { "name": "吉首市", "short": "吉首" },
+          { "name": "泸溪县", "short": "泸溪" },
+          { "name": "凤凰县", "short": "凤凰" },
+          { "name": "花垣县", "short": "花垣" },
+          { "name": "保靖县", "short": "保靖" },
+          { "name": "古丈县", "short": "古丈" },
+          { "name": "永顺县", "short": "永顺" },
+          { "name": "龙山县", "short": "龙山" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "广东省",
+    "short": "广东",
+    "children": [
+      {
+        "name": "广州市",
+        "short": "广州",
+        "children": [
+          { "name": "荔湾区", "short": "荔湾" },
+          { "name": "越秀区", "short": "越秀" },
+          { "name": "海珠区", "short": "海珠" },
+          { "name": "天河区", "short": "天河" },
+          { "name": "白云区", "short": "白云" },
+          { "name": "黄埔区", "short": "黄埔" },
+          { "name": "番禺区", "short": "番禺" },
+          { "name": "花都区", "short": "花都" },
+          { "name": "南沙区", "short": "南沙" },
+          { "name": "从化区", "short": "从化" },
+          { "name": "增城区", "short": "增城" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "韶关市",
+        "short": "韶关",
+        "children": [
+          { "name": "武江区", "short": "武江" },
+          { "name": "浈江区", "short": "浈江" },
+          { "name": "曲江区", "short": "曲江" },
+          { "name": "始兴县", "short": "始兴" },
+          { "name": "仁化县", "short": "仁化" },
+          { "name": "翁源县", "short": "翁源" },
+          { "name": "乳源瑶族自治县", "short": "乳源瑶族自治" },
+          { "name": "新丰县", "short": "新丰" },
+          { "name": "乐昌市", "short": "乐昌" },
+          { "name": "南雄市", "short": "南雄" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "深圳市",
+        "short": "深圳",
+        "children": [
+          { "name": "罗湖区", "short": "罗湖" },
+          { "name": "福田区", "short": "福田" },
+          { "name": "南山区", "short": "南山" },
+          { "name": "宝安区", "short": "宝安" },
+          { "name": "龙岗区", "short": "龙岗" },
+          { "name": "盐田区", "short": "盐田" },
+          { "name": "龙华区", "short": "龙华" },
+          { "name": "坪山区", "short": "坪山" },
+          { "name": "光明区", "short": "光明" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "珠海市",
+        "short": "珠海",
+        "children": [
+          { "name": "香洲区", "short": "香洲" },
+          { "name": "斗门区", "short": "斗门" },
+          { "name": "金湾区", "short": "金湾" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "汕头市",
+        "short": "汕头",
+        "children": [
+          { "name": "龙湖区", "short": "龙湖" },
+          { "name": "金平区", "short": "金平" },
+          { "name": "濠江区", "short": "濠江" },
+          { "name": "潮阳区", "short": "潮阳" },
+          { "name": "潮南区", "short": "潮南" },
+          { "name": "澄海区", "short": "澄海" },
+          { "name": "南澳县", "short": "南澳" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "佛山市",
+        "short": "佛山",
+        "children": [
+          { "name": "禅城区", "short": "禅城" },
+          { "name": "南海区", "short": "南海" },
+          { "name": "顺德区", "short": "顺德" },
+          { "name": "三水区", "short": "三水" },
+          { "name": "高明区", "short": "高明" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "江门市",
+        "short": "江门",
+        "children": [
+          { "name": "蓬江区", "short": "蓬江" },
+          { "name": "江海区", "short": "江海" },
+          { "name": "新会区", "short": "新会" },
+          { "name": "台山市", "short": "台山" },
+          { "name": "开平市", "short": "开平" },
+          { "name": "鹤山市", "short": "鹤山" },
+          { "name": "恩平市", "short": "恩平" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "湛江市",
+        "short": "湛江",
+        "children": [
+          { "name": "赤坎区", "short": "赤坎" },
+          { "name": "霞山区", "short": "霞山" },
+          { "name": "坡头区", "short": "坡头" },
+          { "name": "麻章区", "short": "麻章" },
+          { "name": "遂溪县", "short": "遂溪" },
+          { "name": "徐闻县", "short": "徐闻" },
+          { "name": "廉江市", "short": "廉江" },
+          { "name": "雷州市", "short": "雷州" },
+          { "name": "吴川市", "short": "吴川" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "茂名市",
+        "short": "茂名",
+        "children": [
+          { "name": "茂南区", "short": "茂南" },
+          { "name": "电白区", "short": "电白" },
+          { "name": "高州市", "short": "高州" },
+          { "name": "化州市", "short": "化州" },
+          { "name": "信宜市", "short": "信宜" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "肇庆市",
+        "short": "肇庆",
+        "children": [
+          { "name": "端州区", "short": "端州" },
+          { "name": "鼎湖区", "short": "鼎湖" },
+          { "name": "高要区", "short": "高要" },
+          { "name": "广宁县", "short": "广宁" },
+          { "name": "怀集县", "short": "怀集" },
+          { "name": "封开县", "short": "封开" },
+          { "name": "德庆县", "short": "德庆" },
+          { "name": "四会市", "short": "四会" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "惠州市",
+        "short": "惠州",
+        "children": [
+          { "name": "惠城区", "short": "惠城" },
+          { "name": "惠阳区", "short": "惠阳" },
+          { "name": "博罗县", "short": "博罗" },
+          { "name": "惠东县", "short": "惠东" },
+          { "name": "龙门县", "short": "龙门" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "梅州市",
+        "short": "梅州",
+        "children": [
+          { "name": "梅江区", "short": "梅江" },
+          { "name": "梅县区", "short": "梅" },
+          { "name": "大埔县", "short": "大埔" },
+          { "name": "丰顺县", "short": "丰顺" },
+          { "name": "五华县", "short": "五华" },
+          { "name": "平远县", "short": "平远" },
+          { "name": "蕉岭县", "short": "蕉岭" },
+          { "name": "兴宁市", "short": "兴宁" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "汕尾市",
+        "short": "汕尾",
+        "children": [
+          { "name": "城区", "short": "城" },
+          { "name": "海丰县", "short": "海丰" },
+          { "name": "陆河县", "short": "陆河" },
+          { "name": "陆丰市", "short": "陆丰" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "河源市",
+        "short": "河源",
+        "children": [
+          { "name": "源城区", "short": "源城" },
+          { "name": "紫金县", "short": "紫金" },
+          { "name": "龙川县", "short": "龙川" },
+          { "name": "连平县", "short": "连平" },
+          { "name": "和平县", "short": "和平" },
+          { "name": "东源县", "short": "东源" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "阳江市",
+        "short": "阳江",
+        "children": [
+          { "name": "江城区", "short": "江城" },
+          { "name": "阳东区", "short": "阳东" },
+          { "name": "阳西县", "short": "阳西" },
+          { "name": "阳春市", "short": "阳春" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "清远市",
+        "short": "清远",
+        "children": [
+          { "name": "清城区", "short": "清城" },
+          { "name": "清新区", "short": "清新" },
+          { "name": "佛冈县", "short": "佛冈" },
+          { "name": "阳山县", "short": "阳山" },
+          { "name": "连山壮族瑶族自治县", "short": "连山瑶族自治" },
+          { "name": "连南瑶族自治县", "short": "连南瑶族自治" },
+          { "name": "英德市", "short": "英德" },
+          { "name": "连州市", "short": "连州" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      { "name": "东莞市", "short": "东莞" },
+      { "name": "中山市", "short": "中山" },
+      {
+        "name": "潮州市",
+        "short": "潮州",
+        "children": [
+          { "name": "湘桥区", "short": "湘桥" },
+          { "name": "潮安区", "short": "潮安" },
+          { "name": "饶平县", "short": "饶平" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "揭阳市",
+        "short": "揭阳",
+        "children": [
+          { "name": "榕城区", "short": "榕城" },
+          { "name": "揭东区", "short": "揭东" },
+          { "name": "揭西县", "short": "揭西" },
+          { "name": "惠来县", "short": "惠来" },
+          { "name": "普宁市", "short": "普宁" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "云浮市",
+        "short": "云浮",
+        "children": [
+          { "name": "云城区", "short": "云城" },
+          { "name": "云安区", "short": "云安" },
+          { "name": "新兴县", "short": "新兴" },
+          { "name": "郁南县", "short": "郁南" },
+          { "name": "罗定市", "short": "罗定" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "广西壮族自治区",
+    "short": "广西",
+    "children": [
+      {
+        "name": "南宁市",
+        "short": "南宁",
+        "children": [
+          { "name": "兴宁区", "short": "兴宁" },
+          { "name": "青秀区", "short": "青秀" },
+          { "name": "江南区", "short": "江南" },
+          { "name": "西乡塘区", "short": "西乡塘" },
+          { "name": "良庆区", "short": "良庆" },
+          { "name": "邕宁区", "short": "邕宁" },
+          { "name": "武鸣区", "short": "武鸣" },
+          { "name": "隆安县", "short": "隆安" },
+          { "name": "马山县", "short": "马山" },
+          { "name": "上林县", "short": "上林" },
+          { "name": "宾阳县", "short": "宾阳" },
+          { "name": "横县", "short": "横" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "横州市", "short": "横州" }
+        ]
+      },
+      {
+        "name": "柳州市",
+        "short": "柳州",
+        "children": [
+          { "name": "城中区", "short": "城中" },
+          { "name": "鱼峰区", "short": "鱼峰" },
+          { "name": "柳南区", "short": "柳南" },
+          { "name": "柳北区", "short": "柳北" },
+          { "name": "柳江区", "short": "柳江" },
+          { "name": "柳城县", "short": "柳城" },
+          { "name": "鹿寨县", "short": "鹿寨" },
+          { "name": "融安县", "short": "融安" },
+          { "name": "融水苗族自治县", "short": "融水苗族自治" },
+          { "name": "三江侗族自治县", "short": "三江侗族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "桂林市",
+        "short": "桂林",
+        "children": [
+          { "name": "秀峰区", "short": "秀峰" },
+          { "name": "叠彩区", "short": "叠彩" },
+          { "name": "象山区", "short": "象山" },
+          { "name": "七星区", "short": "七星" },
+          { "name": "雁山区", "short": "雁山" },
+          { "name": "临桂区", "short": "临桂" },
+          { "name": "阳朔县", "short": "阳朔" },
+          { "name": "灵川县", "short": "灵川" },
+          { "name": "全州县", "short": "全州" },
+          { "name": "兴安县", "short": "兴安" },
+          { "name": "永福县", "short": "永福" },
+          { "name": "灌阳县", "short": "灌阳" },
+          { "name": "龙胜各族自治县", "short": "龙胜各族自治" },
+          { "name": "资源县", "short": "资源" },
+          { "name": "平乐县", "short": "平乐" },
+          { "name": "恭城瑶族自治县", "short": "恭城瑶族自治" },
+          { "name": "荔浦市", "short": "荔浦" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "梧州市",
+        "short": "梧州",
+        "children": [
+          { "name": "万秀区", "short": "万秀" },
+          { "name": "长洲区", "short": "长洲" },
+          { "name": "龙圩区", "short": "龙圩" },
+          { "name": "苍梧县", "short": "苍梧" },
+          { "name": "藤县", "short": "藤" },
+          { "name": "蒙山县", "short": "蒙山" },
+          { "name": "岑溪市", "short": "岑溪" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "北海市",
+        "short": "北海",
+        "children": [
+          { "name": "海城区", "short": "海城" },
+          { "name": "银海区", "short": "银海" },
+          { "name": "铁山港区", "short": "铁山港" },
+          { "name": "合浦县", "short": "合浦" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "防城港市",
+        "short": "防城港",
+        "children": [
+          { "name": "港口区", "short": "港口" },
+          { "name": "防城区", "short": "防城" },
+          { "name": "上思县", "short": "上思" },
+          { "name": "东兴市", "short": "东兴" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "钦州市",
+        "short": "钦州",
+        "children": [
+          { "name": "钦南区", "short": "钦南" },
+          { "name": "钦北区", "short": "钦北" },
+          { "name": "灵山县", "short": "灵山" },
+          { "name": "浦北县", "short": "浦北" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "贵港市",
+        "short": "贵港",
+        "children": [
+          { "name": "港北区", "short": "港北" },
+          { "name": "港南区", "short": "港南" },
+          { "name": "覃塘区", "short": "覃塘" },
+          { "name": "平南县", "short": "平南" },
+          { "name": "桂平市", "short": "桂平" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "玉林市",
+        "short": "玉林",
+        "children": [
+          { "name": "玉州区", "short": "玉州" },
+          { "name": "福绵区", "short": "福绵" },
+          { "name": "容县", "short": "容" },
+          { "name": "陆川县", "short": "陆川" },
+          { "name": "博白县", "short": "博白" },
+          { "name": "兴业县", "short": "兴业" },
+          { "name": "北流市", "short": "北流" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "百色市",
+        "short": "百色",
+        "children": [
+          { "name": "右江区", "short": "右江" },
+          { "name": "田阳区", "short": "田阳" },
+          { "name": "田东县", "short": "田东" },
+          { "name": "德保县", "short": "德保" },
+          { "name": "那坡县", "short": "那坡" },
+          { "name": "凌云县", "short": "凌云" },
+          { "name": "乐业县", "short": "乐业" },
+          { "name": "田林县", "short": "田林" },
+          { "name": "西林县", "short": "西林" },
+          { "name": "隆林各族自治县", "short": "隆林各族自治" },
+          { "name": "靖西市", "short": "靖西" },
+          { "name": "平果市", "short": "平果" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "贺州市",
+        "short": "贺州",
+        "children": [
+          { "name": "八步区", "short": "八步" },
+          { "name": "平桂区", "short": "平桂" },
+          { "name": "昭平县", "short": "昭平" },
+          { "name": "钟山县", "short": "钟山" },
+          { "name": "富川瑶族自治县", "short": "富川瑶族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "河池市",
+        "short": "河池",
+        "children": [
+          { "name": "金城江区", "short": "金城江" },
+          { "name": "宜州区", "short": "宜州" },
+          { "name": "南丹县", "short": "南丹" },
+          { "name": "天峨县", "short": "天峨" },
+          { "name": "凤山县", "short": "凤山" },
+          { "name": "东兰县", "short": "东兰" },
+          { "name": "罗城仫佬族自治县", "short": "罗城仫佬族自治" },
+          { "name": "环江毛南族自治县", "short": "环江毛南族自治" },
+          { "name": "巴马瑶族自治县", "short": "巴马瑶族自治" },
+          { "name": "都安瑶族自治县", "short": "都安瑶族自治" },
+          { "name": "大化瑶族自治县", "short": "大化瑶族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "来宾市",
+        "short": "来宾",
+        "children": [
+          { "name": "兴宾区", "short": "兴宾" },
+          { "name": "忻城县", "short": "忻城" },
+          { "name": "象州县", "short": "象州" },
+          { "name": "武宣县", "short": "武宣" },
+          { "name": "金秀瑶族自治县", "short": "金秀瑶族自治" },
+          { "name": "合山市", "short": "合山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "崇左市",
+        "short": "崇左",
+        "children": [
+          { "name": "江州区", "short": "江州" },
+          { "name": "扶绥县", "short": "扶绥" },
+          { "name": "宁明县", "short": "宁明" },
+          { "name": "龙州县", "short": "龙州" },
+          { "name": "大新县", "short": "大新" },
+          { "name": "天等县", "short": "天等" },
+          { "name": "凭祥市", "short": "凭祥" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "海南省",
+    "short": "海南",
+    "children": [
+      {
+        "name": "海口市",
+        "short": "海口",
+        "children": [
+          { "name": "秀英区", "short": "秀英" },
+          { "name": "龙华区", "short": "龙华" },
+          { "name": "琼山区", "short": "琼山" },
+          { "name": "美兰区", "short": "美兰" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "三亚市",
+        "short": "三亚",
+        "children": [
+          { "name": "海棠区", "short": "海棠" },
+          { "name": "吉阳区", "short": "吉阳" },
+          { "name": "天涯区", "short": "天涯" },
+          { "name": "崖州区", "short": "崖州" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "三沙市",
+        "short": "三沙",
+        "children": [
+          { "name": "西沙群岛", "short": "西沙群岛" },
+          { "name": "南沙群岛", "short": "南沙群岛" },
+          {
+            "name": "中沙群岛的岛礁及其海域",
+            "short": "中沙群岛的岛礁及其海域"
+          }
+        ]
+      },
+      { "name": "儋州市", "short": "儋州" },
+      {
+        "name": "海南省-自治区直辖县级行政区划",
+        "short": "海南省-直辖县级行政区划",
+        "children": [
+          { "name": "五指山市", "short": "五指山" },
+          { "name": "琼海市", "short": "琼海" },
+          { "name": "文昌市", "short": "文昌" },
+          { "name": "万宁市", "short": "万宁" },
+          { "name": "东方市", "short": "东方" },
+          { "name": "定安县", "short": "定安" },
+          { "name": "屯昌县", "short": "屯昌" },
+          { "name": "澄迈县", "short": "澄迈" },
+          { "name": "临高县", "short": "临高" },
+          { "name": "白沙黎族自治县", "short": "白沙黎族自治" },
+          { "name": "昌江黎族自治县", "short": "昌江黎族自治" },
+          { "name": "乐东黎族自治县", "short": "乐东黎族自治" },
+          { "name": "陵水黎族自治县", "short": "陵水黎族自治" },
+          { "name": "保亭黎族苗族自治县", "short": "保亭黎族苗族自治" },
+          { "name": "琼中黎族苗族自治县", "short": "琼中黎族苗族自治" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "重庆市",
+    "short": "重庆",
+    "children": [
+      { "name": "万州区", "short": "万州" },
+      { "name": "涪陵区", "short": "涪陵" },
+      { "name": "渝中区", "short": "渝中" },
+      { "name": "大渡口区", "short": "大渡口" },
+      { "name": "江北区", "short": "江北" },
+      { "name": "沙坪坝区", "short": "沙坪坝" },
+      { "name": "九龙坡区", "short": "九龙坡" },
+      { "name": "南岸区", "short": "南岸" },
+      { "name": "北碚区", "short": "北碚" },
+      { "name": "綦江区", "short": "綦江" },
+      { "name": "大足区", "short": "大足" },
+      { "name": "渝北区", "short": "渝北" },
+      { "name": "巴南区", "short": "巴南" },
+      { "name": "黔江区", "short": "黔江" },
+      { "name": "长寿区", "short": "长寿" },
+      { "name": "江津区", "short": "江津" },
+      { "name": "合川区", "short": "合川" },
+      { "name": "永川区", "short": "永川" },
+      { "name": "南川区", "short": "南川" },
+      { "name": "璧山区", "short": "璧山" },
+      { "name": "铜梁区", "short": "铜梁" },
+      { "name": "潼南区", "short": "潼南" },
+      { "name": "荣昌区", "short": "荣昌" },
+      { "name": "开州区", "short": "开州" },
+      { "name": "梁平区", "short": "梁平" },
+      { "name": "武隆区", "short": "武隆" },
+      { "name": "城口县", "short": "城口" },
+      { "name": "丰都县", "short": "丰都" },
+      { "name": "垫江县", "short": "垫江" },
+      { "name": "忠县", "short": "忠" },
+      { "name": "云阳县", "short": "云阳" },
+      { "name": "奉节县", "short": "奉节" },
+      { "name": "巫山县", "short": "巫山" },
+      { "name": "巫溪县", "short": "巫溪" },
+      { "name": "石柱土家族自治县", "short": "石柱土家族自治" },
+      { "name": "秀山土家族苗族自治县", "short": "秀山土家族苗族自治" },
+      { "name": "酉阳土家族苗族自治县", "short": "酉阳土家族苗族自治" },
+      { "name": "彭水苗族土家族自治县", "short": "彭水苗族土家族自治" }
+    ]
+  },
+  {
+    "name": "四川省",
+    "short": "四川",
+    "children": [
+      {
+        "name": "成都市",
+        "short": "成都",
+        "children": [
+          { "name": "锦江区", "short": "锦江" },
+          { "name": "青羊区", "short": "青羊" },
+          { "name": "金牛区", "short": "金牛" },
+          { "name": "武侯区", "short": "武侯" },
+          { "name": "成华区", "short": "成华" },
+          { "name": "龙泉驿区", "short": "龙泉驿" },
+          { "name": "青白江区", "short": "青白江" },
+          { "name": "新都区", "short": "新都" },
+          { "name": "温江区", "short": "温江" },
+          { "name": "双流区", "short": "双流" },
+          { "name": "郫都区", "short": "郫都" },
+          { "name": "新津区", "short": "新津" },
+          { "name": "金堂县", "short": "金堂" },
+          { "name": "大邑县", "short": "大邑" },
+          { "name": "蒲江县", "short": "蒲江" },
+          { "name": "都江堰市", "short": "都江堰" },
+          { "name": "彭州市", "short": "彭州" },
+          { "name": "邛崃市", "short": "邛崃" },
+          { "name": "崇州市", "short": "崇州" },
+          { "name": "简阳市", "short": "简阳" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "自贡市",
+        "short": "自贡",
+        "children": [
+          { "name": "自流井区", "short": "自流井" },
+          { "name": "贡井区", "short": "贡井" },
+          { "name": "大安区", "short": "大安" },
+          { "name": "沿滩区", "short": "沿滩" },
+          { "name": "荣县", "short": "荣" },
+          { "name": "富顺县", "short": "富顺" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "攀枝花市",
+        "short": "攀枝花",
+        "children": [
+          { "name": "东区", "short": "东" },
+          { "name": "西区", "short": "西" },
+          { "name": "仁和区", "short": "仁和" },
+          { "name": "米易县", "short": "米易" },
+          { "name": "盐边县", "short": "盐边" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "泸州市",
+        "short": "泸州",
+        "children": [
+          { "name": "江阳区", "short": "江阳" },
+          { "name": "纳溪区", "short": "纳溪" },
+          { "name": "龙马潭区", "short": "龙马潭" },
+          { "name": "泸县", "short": "泸" },
+          { "name": "合江县", "short": "合江" },
+          { "name": "叙永县", "short": "叙永" },
+          { "name": "古蔺县", "short": "古蔺" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "德阳市",
+        "short": "德阳",
+        "children": [
+          { "name": "旌阳区", "short": "旌阳" },
+          { "name": "罗江区", "short": "罗江" },
+          { "name": "中江县", "short": "中江" },
+          { "name": "广汉市", "short": "广汉" },
+          { "name": "什邡市", "short": "什邡" },
+          { "name": "绵竹市", "short": "绵竹" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "绵阳市",
+        "short": "绵阳",
+        "children": [
+          { "name": "涪城区", "short": "涪城" },
+          { "name": "游仙区", "short": "游仙" },
+          { "name": "安州区", "short": "安州" },
+          { "name": "三台县", "short": "三台" },
+          { "name": "盐亭县", "short": "盐亭" },
+          { "name": "梓潼县", "short": "梓潼" },
+          { "name": "北川羌族自治县", "short": "北川羌族自治" },
+          { "name": "平武县", "short": "平武" },
+          { "name": "江油市", "short": "江油" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "广元市",
+        "short": "广元",
+        "children": [
+          { "name": "利州区", "short": "利州" },
+          { "name": "昭化区", "short": "昭化" },
+          { "name": "朝天区", "short": "朝天" },
+          { "name": "旺苍县", "short": "旺苍" },
+          { "name": "青川县", "short": "青川" },
+          { "name": "剑阁县", "short": "剑阁" },
+          { "name": "苍溪县", "short": "苍溪" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "遂宁市",
+        "short": "遂宁",
+        "children": [
+          { "name": "船山区", "short": "船山" },
+          { "name": "安居区", "short": "安居" },
+          { "name": "蓬溪县", "short": "蓬溪" },
+          { "name": "大英县", "short": "大英" },
+          { "name": "射洪市", "short": "射洪" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "内江市",
+        "short": "内江",
+        "children": [
+          { "name": "市中区", "short": "市中" },
+          { "name": "东兴区", "short": "东兴" },
+          { "name": "威远县", "short": "威远" },
+          { "name": "资中县", "short": "资中" },
+          { "name": "隆昌市", "short": "隆昌" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "内江经济开发区", "short": "内江经济开发" }
+        ]
+      },
+      {
+        "name": "乐山市",
+        "short": "乐山",
+        "children": [
+          { "name": "市中区", "short": "市中" },
+          { "name": "沙湾区", "short": "沙湾" },
+          { "name": "五通桥区", "short": "五通桥" },
+          { "name": "金口河区", "short": "金口河" },
+          { "name": "犍为县", "short": "犍为" },
+          { "name": "井研县", "short": "井研" },
+          { "name": "夹江县", "short": "夹江" },
+          { "name": "沐川县", "short": "沐川" },
+          { "name": "峨边彝族自治县", "short": "峨边彝族自治" },
+          { "name": "马边彝族自治县", "short": "马边彝族自治" },
+          { "name": "峨眉山市", "short": "峨眉山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "南充市",
+        "short": "南充",
+        "children": [
+          { "name": "顺庆区", "short": "顺庆" },
+          { "name": "高坪区", "short": "高坪" },
+          { "name": "嘉陵区", "short": "嘉陵" },
+          { "name": "南部县", "short": "南部" },
+          { "name": "营山县", "short": "营山" },
+          { "name": "蓬安县", "short": "蓬安" },
+          { "name": "仪陇县", "short": "仪陇" },
+          { "name": "西充县", "short": "西充" },
+          { "name": "阆中市", "short": "阆中" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "眉山市",
+        "short": "眉山",
+        "children": [
+          { "name": "东坡区", "short": "东坡" },
+          { "name": "彭山区", "short": "彭山" },
+          { "name": "仁寿县", "short": "仁寿" },
+          { "name": "洪雅县", "short": "洪雅" },
+          { "name": "丹棱县", "short": "丹棱" },
+          { "name": "青神县", "short": "青神" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "宜宾市",
+        "short": "宜宾",
+        "children": [
+          { "name": "翠屏区", "short": "翠屏" },
+          { "name": "南溪区", "short": "南溪" },
+          { "name": "叙州区", "short": "叙州" },
+          { "name": "江安县", "short": "江安" },
+          { "name": "长宁县", "short": "长宁" },
+          { "name": "高县", "short": "高" },
+          { "name": "珙县", "short": "珙" },
+          { "name": "筠连县", "short": "筠连" },
+          { "name": "兴文县", "short": "兴文" },
+          { "name": "屏山县", "short": "屏山" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "广安市",
+        "short": "广安",
+        "children": [
+          { "name": "广安区", "short": "广安" },
+          { "name": "前锋区", "short": "前锋" },
+          { "name": "岳池县", "short": "岳池" },
+          { "name": "武胜县", "short": "武胜" },
+          { "name": "邻水县", "short": "邻水" },
+          { "name": "华蓥市", "short": "华蓥" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "达州市",
+        "short": "达州",
+        "children": [
+          { "name": "通川区", "short": "通川" },
+          { "name": "达川区", "short": "达川" },
+          { "name": "宣汉县", "short": "宣汉" },
+          { "name": "开江县", "short": "开江" },
+          { "name": "大竹县", "short": "大竹" },
+          { "name": "渠县", "short": "渠" },
+          { "name": "万源市", "short": "万源" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "达州经济开发区", "short": "达州经济开发" }
+        ]
+      },
+      {
+        "name": "雅安市",
+        "short": "雅安",
+        "children": [
+          { "name": "雨城区", "short": "雨城" },
+          { "name": "名山区", "short": "名山" },
+          { "name": "荥经县", "short": "荥经" },
+          { "name": "汉源县", "short": "汉源" },
+          { "name": "石棉县", "short": "石棉" },
+          { "name": "天全县", "short": "天全" },
+          { "name": "芦山县", "short": "芦山" },
+          { "name": "宝兴县", "short": "宝兴" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "巴中市",
+        "short": "巴中",
+        "children": [
+          { "name": "巴州区", "short": "巴州" },
+          { "name": "恩阳区", "short": "恩阳" },
+          { "name": "通江县", "short": "通江" },
+          { "name": "南江县", "short": "南江" },
+          { "name": "平昌县", "short": "平昌" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "巴中经济开发区", "short": "巴中经济开发" }
+        ]
+      },
+      {
+        "name": "资阳市",
+        "short": "资阳",
+        "children": [
+          { "name": "雁江区", "short": "雁江" },
+          { "name": "安岳县", "short": "安岳" },
+          { "name": "乐至县", "short": "乐至" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "阿坝藏族羌族自治州",
+        "short": "阿坝藏族羌族自治州",
+        "children": [
+          { "name": "马尔康市", "short": "马尔康" },
+          { "name": "汶川县", "short": "汶川" },
+          { "name": "理县", "short": "理" },
+          { "name": "茂县", "short": "茂" },
+          { "name": "松潘县", "short": "松潘" },
+          { "name": "九寨沟县", "short": "九寨沟" },
+          { "name": "金川县", "short": "金川" },
+          { "name": "小金县", "short": "小金" },
+          { "name": "黑水县", "short": "黑水" },
+          { "name": "壤塘县", "short": "壤塘" },
+          { "name": "阿坝县", "short": "阿坝" },
+          { "name": "若尔盖县", "short": "若尔盖" },
+          { "name": "红原县", "short": "红原" }
+        ]
+      },
+      {
+        "name": "甘孜藏族自治州",
+        "short": "甘孜藏族自治州",
+        "children": [
+          { "name": "康定市", "short": "康定" },
+          { "name": "泸定县", "short": "泸定" },
+          { "name": "丹巴县", "short": "丹巴" },
+          { "name": "九龙县", "short": "九龙" },
+          { "name": "雅江县", "short": "雅江" },
+          { "name": "道孚县", "short": "道孚" },
+          { "name": "炉霍县", "short": "炉霍" },
+          { "name": "甘孜县", "short": "甘孜" },
+          { "name": "新龙县", "short": "新龙" },
+          { "name": "德格县", "short": "德格" },
+          { "name": "白玉县", "short": "白玉" },
+          { "name": "石渠县", "short": "石渠" },
+          { "name": "色达县", "short": "色达" },
+          { "name": "理塘县", "short": "理塘" },
+          { "name": "巴塘县", "short": "巴塘" },
+          { "name": "乡城县", "short": "乡城" },
+          { "name": "稻城县", "short": "稻城" },
+          { "name": "得荣县", "short": "得荣" }
+        ]
+      },
+      {
+        "name": "凉山彝族自治州",
+        "short": "凉山彝族自治州",
+        "children": [
+          { "name": "西昌市", "short": "西昌" },
+          { "name": "木里藏族自治县", "short": "木里藏族自治" },
+          { "name": "盐源县", "short": "盐源" },
+          { "name": "德昌县", "short": "德昌" },
+          { "name": "会理县", "short": "会理" },
+          { "name": "会东县", "short": "会东" },
+          { "name": "宁南县", "short": "宁南" },
+          { "name": "普格县", "short": "普格" },
+          { "name": "布拖县", "short": "布拖" },
+          { "name": "金阳县", "short": "金阳" },
+          { "name": "昭觉县", "short": "昭觉" },
+          { "name": "喜德县", "short": "喜德" },
+          { "name": "冕宁县", "short": "冕宁" },
+          { "name": "越西县", "short": "越西" },
+          { "name": "甘洛县", "short": "甘洛" },
+          { "name": "美姑县", "short": "美姑" },
+          { "name": "雷波县", "short": "雷波" },
+          { "name": "会理市", "short": "会理" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "贵州省",
+    "short": "贵州",
+    "children": [
+      {
+        "name": "贵阳市",
+        "short": "贵阳",
+        "children": [
+          { "name": "南明区", "short": "南明" },
+          { "name": "云岩区", "short": "云岩" },
+          { "name": "花溪区", "short": "花溪" },
+          { "name": "乌当区", "short": "乌当" },
+          { "name": "白云区", "short": "白云" },
+          { "name": "观山湖区", "short": "观山湖" },
+          { "name": "开阳县", "short": "开阳" },
+          { "name": "息烽县", "short": "息烽" },
+          { "name": "修文县", "short": "修文" },
+          { "name": "清镇市", "short": "清镇" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "六盘水市",
+        "short": "六盘水",
+        "children": [
+          { "name": "钟山区", "short": "钟山" },
+          { "name": "六枝特区", "short": "六枝特" },
+          { "name": "水城区", "short": "水城" },
+          { "name": "盘州市", "short": "盘州" }
+        ]
+      },
+      {
+        "name": "遵义市",
+        "short": "遵义",
+        "children": [
+          { "name": "红花岗区", "short": "红花岗" },
+          { "name": "汇川区", "short": "汇川" },
+          { "name": "播州区", "short": "播州" },
+          { "name": "桐梓县", "short": "桐梓" },
+          { "name": "绥阳县", "short": "绥阳" },
+          { "name": "正安县", "short": "正安" },
+          { "name": "道真仡佬族苗族自治县", "short": "道真仡佬族苗族自治" },
+          { "name": "务川仡佬族苗族自治县", "short": "务川仡佬族苗族自治" },
+          { "name": "凤冈县", "short": "凤冈" },
+          { "name": "湄潭县", "short": "湄潭" },
+          { "name": "余庆县", "short": "余庆" },
+          { "name": "习水县", "short": "习水" },
+          { "name": "赤水市", "short": "赤水" },
+          { "name": "仁怀市", "short": "仁怀" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "安顺市",
+        "short": "安顺",
+        "children": [
+          { "name": "西秀区", "short": "西秀" },
+          { "name": "平坝区", "short": "平坝" },
+          { "name": "普定县", "short": "普定" },
+          { "name": "镇宁布依族苗族自治县", "short": "镇宁布依族苗族自治" },
+          { "name": "关岭布依族苗族自治县", "short": "关岭布依族苗族自治" },
+          { "name": "紫云苗族布依族自治县", "short": "紫云苗族布依族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "毕节市",
+        "short": "毕节",
+        "children": [
+          { "name": "七星关区", "short": "七星关" },
+          { "name": "大方县", "short": "大方" },
+          { "name": "黔西县", "short": "黔西" },
+          { "name": "金沙县", "short": "金沙" },
+          { "name": "织金县", "short": "织金" },
+          { "name": "纳雍县", "short": "纳雍" },
+          { "name": "威宁彝族回族苗族自治县", "short": "威宁彝族苗族自治" },
+          { "name": "赫章县", "short": "赫章" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "黔西市", "short": "黔西" }
+        ]
+      },
+      {
+        "name": "铜仁市",
+        "short": "铜仁",
+        "children": [
+          { "name": "碧江区", "short": "碧江" },
+          { "name": "万山区", "short": "万山" },
+          { "name": "江口县", "short": "江口" },
+          { "name": "玉屏侗族自治县", "short": "玉屏侗族自治" },
+          { "name": "石阡县", "short": "石阡" },
+          { "name": "思南县", "short": "思南" },
+          { "name": "印江土家族苗族自治县", "short": "印江土家族苗族自治" },
+          { "name": "德江县", "short": "德江" },
+          { "name": "沿河土家族自治县", "short": "沿河土家族自治" },
+          { "name": "松桃苗族自治县", "short": "松桃苗族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "黔西南布依族苗族自治州",
+        "short": "黔西南布依族苗族自治州",
+        "children": [
+          { "name": "兴义市", "short": "兴义" },
+          { "name": "兴仁市", "short": "兴仁" },
+          { "name": "普安县", "short": "普安" },
+          { "name": "晴隆县", "short": "晴隆" },
+          { "name": "贞丰县", "short": "贞丰" },
+          { "name": "望谟县", "short": "望谟" },
+          { "name": "册亨县", "short": "册亨" },
+          { "name": "安龙县", "short": "安龙" }
+        ]
+      },
+      {
+        "name": "黔东南苗族侗族自治州",
+        "short": "黔东南苗族侗族自治州",
+        "children": [
+          { "name": "凯里市", "short": "凯里" },
+          { "name": "黄平县", "short": "黄平" },
+          { "name": "施秉县", "short": "施秉" },
+          { "name": "三穗县", "short": "三穗" },
+          { "name": "镇远县", "short": "镇远" },
+          { "name": "岑巩县", "short": "岑巩" },
+          { "name": "天柱县", "short": "天柱" },
+          { "name": "锦屏县", "short": "锦屏" },
+          { "name": "剑河县", "short": "剑河" },
+          { "name": "台江县", "short": "台江" },
+          { "name": "黎平县", "short": "黎平" },
+          { "name": "榕江县", "short": "榕江" },
+          { "name": "从江县", "short": "从江" },
+          { "name": "雷山县", "short": "雷山" },
+          { "name": "麻江县", "short": "麻江" },
+          { "name": "丹寨县", "short": "丹寨" }
+        ]
+      },
+      {
+        "name": "黔南布依族苗族自治州",
+        "short": "黔南布依族苗族自治州",
+        "children": [
+          { "name": "都匀市", "short": "都匀" },
+          { "name": "福泉市", "short": "福泉" },
+          { "name": "荔波县", "short": "荔波" },
+          { "name": "贵定县", "short": "贵定" },
+          { "name": "瓮安县", "short": "瓮安" },
+          { "name": "独山县", "short": "独山" },
+          { "name": "平塘县", "short": "平塘" },
+          { "name": "罗甸县", "short": "罗甸" },
+          { "name": "长顺县", "short": "长顺" },
+          { "name": "龙里县", "short": "龙里" },
+          { "name": "惠水县", "short": "惠水" },
+          { "name": "三都水族自治县", "short": "三都水族自治" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "云南省",
+    "short": "云南",
+    "children": [
+      {
+        "name": "昆明市",
+        "short": "昆明",
+        "children": [
+          { "name": "五华区", "short": "五华" },
+          { "name": "盘龙区", "short": "盘龙" },
+          { "name": "官渡区", "short": "官渡" },
+          { "name": "西山区", "short": "西山" },
+          { "name": "东川区", "short": "东川" },
+          { "name": "呈贡区", "short": "呈贡" },
+          { "name": "晋宁区", "short": "晋宁" },
+          { "name": "富民县", "short": "富民" },
+          { "name": "宜良县", "short": "宜良" },
+          { "name": "石林彝族自治县", "short": "石林彝族自治" },
+          { "name": "嵩明县", "short": "嵩明" },
+          { "name": "禄劝彝族苗族自治县", "short": "禄劝彝族苗族自治" },
+          { "name": "寻甸回族彝族自治县", "short": "寻甸彝族自治" },
+          { "name": "安宁市", "short": "安宁" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "曲靖市",
+        "short": "曲靖",
+        "children": [
+          { "name": "麒麟区", "short": "麒麟" },
+          { "name": "沾益区", "short": "沾益" },
+          { "name": "马龙区", "short": "马龙" },
+          { "name": "陆良县", "short": "陆良" },
+          { "name": "师宗县", "short": "师宗" },
+          { "name": "罗平县", "short": "罗平" },
+          { "name": "富源县", "short": "富源" },
+          { "name": "会泽县", "short": "会泽" },
+          { "name": "宣威市", "short": "宣威" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "玉溪市",
+        "short": "玉溪",
+        "children": [
+          { "name": "红塔区", "short": "红塔" },
+          { "name": "江川区", "short": "江川" },
+          { "name": "通海县", "short": "通海" },
+          { "name": "华宁县", "short": "华宁" },
+          { "name": "易门县", "short": "易门" },
+          { "name": "峨山彝族自治县", "short": "峨山彝族自治" },
+          { "name": "新平彝族傣族自治县", "short": "新平彝族傣族自治" },
+          {
+            "name": "元江哈尼族彝族傣族自治县",
+            "short": "元江哈尼族彝族傣族自治"
+          },
+          { "name": "澄江市", "short": "澄江" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "保山市",
+        "short": "保山",
+        "children": [
+          { "name": "隆阳区", "short": "隆阳" },
+          { "name": "施甸县", "short": "施甸" },
+          { "name": "龙陵县", "short": "龙陵" },
+          { "name": "昌宁县", "short": "昌宁" },
+          { "name": "腾冲市", "short": "腾冲" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "昭通市",
+        "short": "昭通",
+        "children": [
+          { "name": "昭阳区", "short": "昭阳" },
+          { "name": "鲁甸县", "short": "鲁甸" },
+          { "name": "巧家县", "short": "巧家" },
+          { "name": "盐津县", "short": "盐津" },
+          { "name": "大关县", "short": "大关" },
+          { "name": "永善县", "short": "永善" },
+          { "name": "绥江县", "short": "绥江" },
+          { "name": "镇雄县", "short": "镇雄" },
+          { "name": "彝良县", "short": "彝良" },
+          { "name": "威信县", "short": "威信" },
+          { "name": "水富市", "short": "水富" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "丽江市",
+        "short": "丽江",
+        "children": [
+          { "name": "古城区", "short": "古城" },
+          { "name": "玉龙纳西族自治县", "short": "玉龙纳西族自治" },
+          { "name": "永胜县", "short": "永胜" },
+          { "name": "华坪县", "short": "华坪" },
+          { "name": "宁蒗彝族自治县", "short": "宁蒗彝族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "普洱市",
+        "short": "普洱",
+        "children": [
+          { "name": "思茅区", "short": "思茅" },
+          { "name": "宁洱哈尼族彝族自治县", "short": "宁洱哈尼族彝族自治" },
+          { "name": "墨江哈尼族自治县", "short": "墨江哈尼族自治" },
+          { "name": "景东彝族自治县", "short": "景东彝族自治" },
+          { "name": "景谷傣族彝族自治县", "short": "景谷傣族彝族自治" },
+          {
+            "name": "镇沅彝族哈尼族拉祜族自治县",
+            "short": "镇沅彝族哈尼族拉祜族自治"
+          },
+          { "name": "江城哈尼族彝族自治县", "short": "江城哈尼族彝族自治" },
+          {
+            "name": "孟连傣族拉祜族佤族自治县",
+            "short": "孟连傣族拉祜族佤族自治"
+          },
+          { "name": "澜沧拉祜族自治县", "short": "澜沧拉祜族自治" },
+          { "name": "西盟佤族自治县", "short": "西盟佤族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "临沧市",
+        "short": "临沧",
+        "children": [
+          { "name": "临翔区", "short": "临翔" },
+          { "name": "凤庆县", "short": "凤庆" },
+          { "name": "云县", "short": "云" },
+          { "name": "永德县", "short": "永德" },
+          { "name": "镇康县", "short": "镇康" },
+          {
+            "name": "双江拉祜族佤族布朗族傣族自治县",
+            "short": "双江拉祜族佤族布朗族傣族自治"
+          },
+          { "name": "耿马傣族佤族自治县", "short": "耿马傣族佤族自治" },
+          { "name": "沧源佤族自治县", "short": "沧源佤族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "楚雄彝族自治州",
+        "short": "楚雄彝族自治州",
+        "children": [
+          { "name": "楚雄市", "short": "楚雄" },
+          { "name": "双柏县", "short": "双柏" },
+          { "name": "牟定县", "short": "牟定" },
+          { "name": "南华县", "short": "南华" },
+          { "name": "姚安县", "short": "姚安" },
+          { "name": "大姚县", "short": "大姚" },
+          { "name": "永仁县", "short": "永仁" },
+          { "name": "元谋县", "short": "元谋" },
+          { "name": "武定县", "short": "武定" },
+          { "name": "禄丰县", "short": "禄丰" },
+          { "name": "禄丰市", "short": "禄丰" }
+        ]
+      },
+      {
+        "name": "红河哈尼族彝族自治州",
+        "short": "红河哈尼族彝族自治州",
+        "children": [
+          { "name": "个旧市", "short": "个旧" },
+          { "name": "开远市", "short": "开远" },
+          { "name": "蒙自市", "short": "蒙自" },
+          { "name": "弥勒市", "short": "弥勒" },
+          { "name": "屏边苗族自治县", "short": "屏边苗族自治" },
+          { "name": "建水县", "short": "建水" },
+          { "name": "石屏县", "short": "石屏" },
+          { "name": "泸西县", "short": "泸西" },
+          { "name": "元阳县", "short": "元阳" },
+          { "name": "红河县", "short": "红河" },
+          { "name": "金平苗族瑶族傣族自治县", "short": "金平苗族瑶族傣族自治" },
+          { "name": "绿春县", "short": "绿春" },
+          { "name": "河口瑶族自治县", "short": "河口瑶族自治" }
+        ]
+      },
+      {
+        "name": "文山壮族苗族自治州",
+        "short": "文山苗族自治州",
+        "children": [
+          { "name": "文山市", "short": "文山" },
+          { "name": "砚山县", "short": "砚山" },
+          { "name": "西畴县", "short": "西畴" },
+          { "name": "麻栗坡县", "short": "麻栗坡" },
+          { "name": "马关县", "short": "马关" },
+          { "name": "丘北县", "short": "丘北" },
+          { "name": "广南县", "short": "广南" },
+          { "name": "富宁县", "short": "富宁" }
+        ]
+      },
+      {
+        "name": "西双版纳傣族自治州",
+        "short": "西双版纳傣族自治州",
+        "children": [
+          { "name": "景洪市", "short": "景洪" },
+          { "name": "勐海县", "short": "勐海" },
+          { "name": "勐腊县", "short": "勐腊" }
+        ]
+      },
+      {
+        "name": "大理白族自治州",
+        "short": "大理白族自治州",
+        "children": [
+          { "name": "大理市", "short": "大理" },
+          { "name": "漾濞彝族自治县", "short": "漾濞彝族自治" },
+          { "name": "祥云县", "short": "祥云" },
+          { "name": "宾川县", "short": "宾川" },
+          { "name": "弥渡县", "short": "弥渡" },
+          { "name": "南涧彝族自治县", "short": "南涧彝族自治" },
+          { "name": "巍山彝族回族自治县", "short": "巍山彝族自治" },
+          { "name": "永平县", "short": "永平" },
+          { "name": "云龙县", "short": "云龙" },
+          { "name": "洱源县", "short": "洱源" },
+          { "name": "剑川县", "short": "剑川" },
+          { "name": "鹤庆县", "short": "鹤庆" }
+        ]
+      },
+      {
+        "name": "德宏傣族景颇族自治州",
+        "short": "德宏傣族景颇族自治州",
+        "children": [
+          { "name": "瑞丽市", "short": "瑞丽" },
+          { "name": "芒市", "short": "芒" },
+          { "name": "梁河县", "short": "梁河" },
+          { "name": "盈江县", "short": "盈江" },
+          { "name": "陇川县", "short": "陇川" }
+        ]
+      },
+      {
+        "name": "怒江傈僳族自治州",
+        "short": "怒江傈僳族自治州",
+        "children": [
+          { "name": "泸水市", "short": "泸水" },
+          { "name": "福贡县", "short": "福贡" },
+          { "name": "贡山独龙族怒族自治县", "short": "贡山独龙族怒族自治" },
+          { "name": "兰坪白族普米族自治县", "short": "兰坪白族普米族自治" }
+        ]
+      },
+      {
+        "name": "迪庆藏族自治州",
+        "short": "迪庆藏族自治州",
+        "children": [
+          { "name": "香格里拉市", "short": "香格里拉" },
+          { "name": "德钦县", "short": "德钦" },
+          { "name": "维西傈僳族自治县", "short": "维西傈僳族自治" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "西藏自治区",
+    "short": "西藏",
+    "children": [
+      {
+        "name": "拉萨市",
+        "short": "拉萨",
+        "children": [
+          { "name": "城关区", "short": "城关" },
+          { "name": "堆龙德庆区", "short": "堆龙德庆" },
+          { "name": "达孜区", "short": "达孜" },
+          { "name": "林周县", "short": "林周" },
+          { "name": "当雄县", "short": "当雄" },
+          { "name": "尼木县", "short": "尼木" },
+          { "name": "曲水县", "short": "曲水" },
+          { "name": "墨竹工卡县", "short": "墨竹工卡" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "格尔木藏青工业园区", "short": "格尔木藏青工业园" },
+          { "name": "拉萨经济技术开发区", "short": "拉萨经济技术开发" },
+          { "name": "西藏文化旅游创意园区", "short": "西藏文化旅游创意园" },
+          { "name": "达孜工业园区", "short": "达孜工业园" }
+        ]
+      },
+      {
+        "name": "日喀则市",
+        "short": "日喀则",
+        "children": [
+          { "name": "桑珠孜区", "short": "桑珠孜" },
+          { "name": "南木林县", "short": "南木林" },
+          { "name": "江孜县", "short": "江孜" },
+          { "name": "定日县", "short": "定日" },
+          { "name": "萨迦县", "short": "萨迦" },
+          { "name": "拉孜县", "short": "拉孜" },
+          { "name": "昂仁县", "short": "昂仁" },
+          { "name": "谢通门县", "short": "谢通门" },
+          { "name": "白朗县", "short": "白朗" },
+          { "name": "仁布县", "short": "仁布" },
+          { "name": "康马县", "short": "康马" },
+          { "name": "定结县", "short": "定结" },
+          { "name": "仲巴县", "short": "仲巴" },
+          { "name": "亚东县", "short": "亚东" },
+          { "name": "吉隆县", "short": "吉隆" },
+          { "name": "聂拉木县", "short": "聂拉木" },
+          { "name": "萨嘎县", "short": "萨嘎" },
+          { "name": "岗巴县", "short": "岗巴" }
+        ]
+      },
+      {
+        "name": "昌都市",
+        "short": "昌都",
+        "children": [
+          { "name": "卡若区", "short": "卡若" },
+          { "name": "江达县", "short": "江达" },
+          { "name": "贡觉县", "short": "贡觉" },
+          { "name": "类乌齐县", "short": "类乌齐" },
+          { "name": "丁青县", "short": "丁青" },
+          { "name": "察雅县", "short": "察雅" },
+          { "name": "八宿县", "short": "八宿" },
+          { "name": "左贡县", "short": "左贡" },
+          { "name": "芒康县", "short": "芒康" },
+          { "name": "洛隆县", "short": "洛隆" },
+          { "name": "边坝县", "short": "边坝" }
+        ]
+      },
+      {
+        "name": "林芝市",
+        "short": "林芝",
+        "children": [
+          { "name": "巴宜区", "short": "巴宜" },
+          { "name": "工布江达县", "short": "工布江达" },
+          { "name": "米林县", "short": "米林" },
+          { "name": "墨脱县", "short": "墨脱" },
+          { "name": "波密县", "short": "波密" },
+          { "name": "察隅县", "short": "察隅" },
+          { "name": "朗县", "short": "朗" }
+        ]
+      },
+      {
+        "name": "山南市",
+        "short": "山南",
+        "children": [
+          { "name": "乃东区", "short": "乃东" },
+          { "name": "扎囊县", "short": "扎囊" },
+          { "name": "贡嘎县", "short": "贡嘎" },
+          { "name": "桑日县", "short": "桑日" },
+          { "name": "琼结县", "short": "琼结" },
+          { "name": "曲松县", "short": "曲松" },
+          { "name": "措美县", "short": "措美" },
+          { "name": "洛扎县", "short": "洛扎" },
+          { "name": "加查县", "short": "加查" },
+          { "name": "隆子县", "short": "隆子" },
+          { "name": "错那县", "short": "错那" },
+          { "name": "浪卡子县", "short": "浪卡子" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "那曲市",
+        "short": "那曲",
+        "children": [
+          { "name": "色尼区", "short": "色尼" },
+          { "name": "嘉黎县", "short": "嘉黎" },
+          { "name": "比如县", "short": "比如" },
+          { "name": "聂荣县", "short": "聂荣" },
+          { "name": "安多县", "short": "安多" },
+          { "name": "申扎县", "short": "申扎" },
+          { "name": "索县", "short": "索" },
+          { "name": "班戈县", "short": "班戈" },
+          { "name": "巴青县", "short": "巴青" },
+          { "name": "尼玛县", "short": "尼玛" },
+          { "name": "双湖县", "short": "双湖" }
+        ]
+      },
+      {
+        "name": "阿里地区",
+        "short": "阿里地",
+        "children": [
+          { "name": "普兰县", "short": "普兰" },
+          { "name": "札达县", "short": "札达" },
+          { "name": "噶尔县", "short": "噶尔" },
+          { "name": "日土县", "short": "日土" },
+          { "name": "革吉县", "short": "革吉" },
+          { "name": "改则县", "short": "改则" },
+          { "name": "措勤县", "short": "措勤" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "陕西省",
+    "short": "陕西",
+    "children": [
+      {
+        "name": "西安市",
+        "short": "西安",
+        "children": [
+          { "name": "新城区", "short": "新城" },
+          { "name": "碑林区", "short": "碑林" },
+          { "name": "莲湖区", "short": "莲湖" },
+          { "name": "灞桥区", "short": "灞桥" },
+          { "name": "未央区", "short": "未央" },
+          { "name": "雁塔区", "short": "雁塔" },
+          { "name": "阎良区", "short": "阎良" },
+          { "name": "临潼区", "short": "临潼" },
+          { "name": "长安区", "short": "长安" },
+          { "name": "高陵区", "short": "高陵" },
+          { "name": "鄠邑区", "short": "鄠邑" },
+          { "name": "蓝田县", "short": "蓝田" },
+          { "name": "周至县", "short": "周至" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "铜川市",
+        "short": "铜川",
+        "children": [
+          { "name": "王益区", "short": "王益" },
+          { "name": "印台区", "short": "印台" },
+          { "name": "耀州区", "short": "耀州" },
+          { "name": "宜君县", "short": "宜君" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "宝鸡市",
+        "short": "宝鸡",
+        "children": [
+          { "name": "渭滨区", "short": "渭滨" },
+          { "name": "金台区", "short": "金台" },
+          { "name": "陈仓区", "short": "陈仓" },
+          { "name": "凤翔县", "short": "凤翔" },
+          { "name": "岐山县", "short": "岐山" },
+          { "name": "扶风县", "short": "扶风" },
+          { "name": "眉县", "short": "眉" },
+          { "name": "陇县", "short": "陇" },
+          { "name": "千阳县", "short": "千阳" },
+          { "name": "麟游县", "short": "麟游" },
+          { "name": "凤县", "short": "凤" },
+          { "name": "太白县", "short": "太白" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "凤翔区", "short": "凤翔" }
+        ]
+      },
+      {
+        "name": "咸阳市",
+        "short": "咸阳",
+        "children": [
+          { "name": "秦都区", "short": "秦都" },
+          { "name": "杨陵区", "short": "杨陵" },
+          { "name": "渭城区", "short": "渭城" },
+          { "name": "三原县", "short": "三原" },
+          { "name": "泾阳县", "short": "泾阳" },
+          { "name": "乾县", "short": "乾" },
+          { "name": "礼泉县", "short": "礼泉" },
+          { "name": "永寿县", "short": "永寿" },
+          { "name": "长武县", "short": "长武" },
+          { "name": "旬邑县", "short": "旬邑" },
+          { "name": "淳化县", "short": "淳化" },
+          { "name": "武功县", "short": "武功" },
+          { "name": "兴平市", "short": "兴平" },
+          { "name": "彬州市", "short": "彬州" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "渭南市",
+        "short": "渭南",
+        "children": [
+          { "name": "临渭区", "short": "临渭" },
+          { "name": "华州区", "short": "华州" },
+          { "name": "潼关县", "short": "潼关" },
+          { "name": "大荔县", "short": "大荔" },
+          { "name": "合阳县", "short": "合阳" },
+          { "name": "澄城县", "short": "澄城" },
+          { "name": "蒲城县", "short": "蒲城" },
+          { "name": "白水县", "short": "白水" },
+          { "name": "富平县", "short": "富平" },
+          { "name": "韩城市", "short": "韩城" },
+          { "name": "华阴市", "short": "华阴" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "延安市",
+        "short": "延安",
+        "children": [
+          { "name": "宝塔区", "short": "宝塔" },
+          { "name": "安塞区", "short": "安塞" },
+          { "name": "延长县", "short": "延长" },
+          { "name": "延川县", "short": "延川" },
+          { "name": "志丹县", "short": "志丹" },
+          { "name": "吴起县", "short": "吴起" },
+          { "name": "甘泉县", "short": "甘泉" },
+          { "name": "富县", "short": "富" },
+          { "name": "洛川县", "short": "洛川" },
+          { "name": "宜川县", "short": "宜川" },
+          { "name": "黄龙县", "short": "黄龙" },
+          { "name": "黄陵县", "short": "黄陵" },
+          { "name": "子长市", "short": "子长" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "汉中市",
+        "short": "汉中",
+        "children": [
+          { "name": "汉台区", "short": "汉台" },
+          { "name": "南郑区", "short": "南郑" },
+          { "name": "城固县", "short": "城固" },
+          { "name": "洋县", "short": "洋" },
+          { "name": "西乡县", "short": "西乡" },
+          { "name": "勉县", "short": "勉" },
+          { "name": "宁强县", "short": "宁强" },
+          { "name": "略阳县", "short": "略阳" },
+          { "name": "镇巴县", "short": "镇巴" },
+          { "name": "留坝县", "short": "留坝" },
+          { "name": "佛坪县", "short": "佛坪" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "榆林市",
+        "short": "榆林",
+        "children": [
+          { "name": "榆阳区", "short": "榆阳" },
+          { "name": "横山区", "short": "横山" },
+          { "name": "府谷县", "short": "府谷" },
+          { "name": "靖边县", "short": "靖边" },
+          { "name": "定边县", "short": "定边" },
+          { "name": "绥德县", "short": "绥德" },
+          { "name": "米脂县", "short": "米脂" },
+          { "name": "佳县", "short": "佳" },
+          { "name": "吴堡县", "short": "吴堡" },
+          { "name": "清涧县", "short": "清涧" },
+          { "name": "子洲县", "short": "子洲" },
+          { "name": "神木市", "short": "神木" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "安康市",
+        "short": "安康",
+        "children": [
+          { "name": "汉滨区", "short": "汉滨" },
+          { "name": "汉阴县", "short": "汉阴" },
+          { "name": "石泉县", "short": "石泉" },
+          { "name": "宁陕县", "short": "宁陕" },
+          { "name": "紫阳县", "short": "紫阳" },
+          { "name": "岚皋县", "short": "岚皋" },
+          { "name": "平利县", "short": "平利" },
+          { "name": "镇坪县", "short": "镇坪" },
+          { "name": "旬阳县", "short": "旬阳" },
+          { "name": "白河县", "short": "白河" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "旬阳市", "short": "旬阳" }
+        ]
+      },
+      {
+        "name": "商洛市",
+        "short": "商洛",
+        "children": [
+          { "name": "商州区", "short": "商州" },
+          { "name": "洛南县", "short": "洛南" },
+          { "name": "丹凤县", "short": "丹凤" },
+          { "name": "商南县", "short": "商南" },
+          { "name": "山阳县", "short": "山阳" },
+          { "name": "镇安县", "short": "镇安" },
+          { "name": "柞水县", "short": "柞水" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "甘肃省",
+    "short": "甘肃",
+    "children": [
+      {
+        "name": "兰州市",
+        "short": "兰州",
+        "children": [
+          { "name": "城关区", "short": "城关" },
+          { "name": "七里河区", "short": "七里河" },
+          { "name": "西固区", "short": "西固" },
+          { "name": "安宁区", "short": "安宁" },
+          { "name": "红古区", "short": "红古" },
+          { "name": "永登县", "short": "永登" },
+          { "name": "皋兰县", "short": "皋兰" },
+          { "name": "榆中县", "short": "榆中" },
+          { "name": "市辖区", "short": "市辖" },
+          { "name": "兰州新区", "short": "兰州新" }
+        ]
+      },
+      {
+        "name": "嘉峪关市",
+        "short": "嘉峪关",
+        "children": [{ "name": "市辖区", "short": "市辖" }]
+      },
+      {
+        "name": "金昌市",
+        "short": "金昌",
+        "children": [
+          { "name": "金川区", "short": "金川" },
+          { "name": "永昌县", "short": "永昌" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "白银市",
+        "short": "白银",
+        "children": [
+          { "name": "白银区", "short": "白银" },
+          { "name": "平川区", "short": "平川" },
+          { "name": "靖远县", "short": "靖远" },
+          { "name": "会宁县", "short": "会宁" },
+          { "name": "景泰县", "short": "景泰" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "天水市",
+        "short": "天水",
+        "children": [
+          { "name": "秦州区", "short": "秦州" },
+          { "name": "麦积区", "short": "麦积" },
+          { "name": "清水县", "short": "清水" },
+          { "name": "秦安县", "short": "秦安" },
+          { "name": "甘谷县", "short": "甘谷" },
+          { "name": "武山县", "short": "武山" },
+          { "name": "张家川回族自治县", "short": "张家川自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "武威市",
+        "short": "武威",
+        "children": [
+          { "name": "凉州区", "short": "凉州" },
+          { "name": "民勤县", "short": "民勤" },
+          { "name": "古浪县", "short": "古浪" },
+          { "name": "天祝藏族自治县", "short": "天祝藏族自治" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "张掖市",
+        "short": "张掖",
+        "children": [
+          { "name": "甘州区", "short": "甘州" },
+          { "name": "肃南裕固族自治县", "short": "肃南裕固族自治" },
+          { "name": "民乐县", "short": "民乐" },
+          { "name": "临泽县", "short": "临泽" },
+          { "name": "高台县", "short": "高台" },
+          { "name": "山丹县", "short": "山丹" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "平凉市",
+        "short": "平凉",
+        "children": [
+          { "name": "崆峒区", "short": "崆峒" },
+          { "name": "泾川县", "short": "泾川" },
+          { "name": "灵台县", "short": "灵台" },
+          { "name": "崇信县", "short": "崇信" },
+          { "name": "庄浪县", "short": "庄浪" },
+          { "name": "静宁县", "short": "静宁" },
+          { "name": "华亭市", "short": "华亭" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "酒泉市",
+        "short": "酒泉",
+        "children": [
+          { "name": "肃州区", "short": "肃州" },
+          { "name": "金塔县", "short": "金塔" },
+          { "name": "瓜州县", "short": "瓜州" },
+          { "name": "肃北蒙古族自治县", "short": "肃北蒙古族自治" },
+          { "name": "阿克塞哈萨克族自治县", "short": "阿克塞哈萨克族自治" },
+          { "name": "玉门市", "short": "玉门" },
+          { "name": "敦煌市", "short": "敦煌" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "庆阳市",
+        "short": "庆阳",
+        "children": [
+          { "name": "西峰区", "short": "西峰" },
+          { "name": "庆城县", "short": "庆城" },
+          { "name": "环县", "short": "环" },
+          { "name": "华池县", "short": "华池" },
+          { "name": "合水县", "short": "合水" },
+          { "name": "正宁县", "short": "正宁" },
+          { "name": "宁县", "short": "宁" },
+          { "name": "镇原县", "short": "镇原" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "定西市",
+        "short": "定西",
+        "children": [
+          { "name": "安定区", "short": "安定" },
+          { "name": "通渭县", "short": "通渭" },
+          { "name": "陇西县", "short": "陇西" },
+          { "name": "渭源县", "short": "渭源" },
+          { "name": "临洮县", "short": "临洮" },
+          { "name": "漳县", "short": "漳" },
+          { "name": "岷县", "short": "岷" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "陇南市",
+        "short": "陇南",
+        "children": [
+          { "name": "武都区", "short": "武都" },
+          { "name": "成县", "short": "成" },
+          { "name": "文县", "short": "文" },
+          { "name": "宕昌县", "short": "宕昌" },
+          { "name": "康县", "short": "康" },
+          { "name": "西和县", "short": "西和" },
+          { "name": "礼县", "short": "礼" },
+          { "name": "徽县", "short": "徽" },
+          { "name": "两当县", "short": "两当" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "临夏回族自治州",
+        "short": "临夏自治州",
+        "children": [
+          { "name": "临夏市", "short": "临夏" },
+          { "name": "临夏县", "short": "临夏" },
+          { "name": "康乐县", "short": "康乐" },
+          { "name": "永靖县", "short": "永靖" },
+          { "name": "广河县", "short": "广河" },
+          { "name": "和政县", "short": "和政" },
+          { "name": "东乡族自治县", "short": "东乡族自治" },
+          {
+            "name": "积石山保安族东乡族撒拉族自治县",
+            "short": "积石山保安族东乡族撒拉族自治"
+          }
+        ]
+      },
+      {
+        "name": "甘南藏族自治州",
+        "short": "甘南藏族自治州",
+        "children": [
+          { "name": "合作市", "short": "合作" },
+          { "name": "临潭县", "short": "临潭" },
+          { "name": "卓尼县", "short": "卓尼" },
+          { "name": "舟曲县", "short": "舟曲" },
+          { "name": "迭部县", "short": "迭部" },
+          { "name": "玛曲县", "short": "玛曲" },
+          { "name": "碌曲县", "short": "碌曲" },
+          { "name": "夏河县", "short": "夏河" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "青海省",
+    "short": "青海",
+    "children": [
+      {
+        "name": "西宁市",
+        "short": "西宁",
+        "children": [
+          { "name": "城东区", "short": "城东" },
+          { "name": "城中区", "short": "城中" },
+          { "name": "城西区", "short": "城西" },
+          { "name": "城北区", "short": "城北" },
+          { "name": "湟中区", "short": "湟中" },
+          { "name": "大通回族土族自治县", "short": "大通土族自治" },
+          { "name": "湟源县", "short": "湟源" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "海东市",
+        "short": "海东",
+        "children": [
+          { "name": "乐都区", "short": "乐都" },
+          { "name": "平安区", "short": "平安" },
+          { "name": "民和回族土族自治县", "short": "民和土族自治" },
+          { "name": "互助土族自治县", "short": "互助土族自治" },
+          { "name": "化隆回族自治县", "short": "化隆自治" },
+          { "name": "循化撒拉族自治县", "short": "循化撒拉族自治" }
+        ]
+      },
+      {
+        "name": "海北藏族自治州",
+        "short": "海北藏族自治州",
+        "children": [
+          { "name": "门源回族自治县", "short": "门源自治" },
+          { "name": "祁连县", "short": "祁连" },
+          { "name": "海晏县", "short": "海晏" },
+          { "name": "刚察县", "short": "刚察" }
+        ]
+      },
+      {
+        "name": "黄南藏族自治州",
+        "short": "黄南藏族自治州",
+        "children": [
+          { "name": "同仁市", "short": "同仁" },
+          { "name": "尖扎县", "short": "尖扎" },
+          { "name": "泽库县", "short": "泽库" },
+          { "name": "河南蒙古族自治县", "short": "河南蒙古族自治" }
+        ]
+      },
+      {
+        "name": "海南藏族自治州",
+        "short": "海南藏族自治州",
+        "children": [
+          { "name": "共和县", "short": "共和" },
+          { "name": "同德县", "short": "同德" },
+          { "name": "贵德县", "short": "贵德" },
+          { "name": "兴海县", "short": "兴海" },
+          { "name": "贵南县", "short": "贵南" }
+        ]
+      },
+      {
+        "name": "果洛藏族自治州",
+        "short": "果洛藏族自治州",
+        "children": [
+          { "name": "玛沁县", "short": "玛沁" },
+          { "name": "班玛县", "short": "班玛" },
+          { "name": "甘德县", "short": "甘德" },
+          { "name": "达日县", "short": "达日" },
+          { "name": "久治县", "short": "久治" },
+          { "name": "玛多县", "short": "玛多" }
+        ]
+      },
+      {
+        "name": "玉树藏族自治州",
+        "short": "玉树藏族自治州",
+        "children": [
+          { "name": "玉树市", "short": "玉树" },
+          { "name": "杂多县", "short": "杂多" },
+          { "name": "称多县", "short": "称多" },
+          { "name": "治多县", "short": "治多" },
+          { "name": "囊谦县", "short": "囊谦" },
+          { "name": "曲麻莱县", "short": "曲麻莱" }
+        ]
+      },
+      {
+        "name": "海西蒙古族藏族自治州",
+        "short": "海西蒙古族藏族自治州",
+        "children": [
+          { "name": "格尔木市", "short": "格尔木" },
+          { "name": "德令哈市", "short": "德令哈" },
+          { "name": "茫崖市", "short": "茫崖" },
+          { "name": "乌兰县", "short": "乌兰" },
+          { "name": "都兰县", "short": "都兰" },
+          { "name": "天峻县", "short": "天峻" },
+          { "name": "大柴旦行政委员会", "short": "大柴旦行政委员会" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "宁夏回族自治区",
+    "short": "宁夏",
+    "children": [
+      {
+        "name": "银川市",
+        "short": "银川",
+        "children": [
+          { "name": "兴庆区", "short": "兴庆" },
+          { "name": "西夏区", "short": "西夏" },
+          { "name": "金凤区", "short": "金凤" },
+          { "name": "永宁县", "short": "永宁" },
+          { "name": "贺兰县", "short": "贺兰" },
+          { "name": "灵武市", "short": "灵武" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "石嘴山市",
+        "short": "石嘴山",
+        "children": [
+          { "name": "大武口区", "short": "大武口" },
+          { "name": "惠农区", "short": "惠农" },
+          { "name": "平罗县", "short": "平罗" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "吴忠市",
+        "short": "吴忠",
+        "children": [
+          { "name": "利通区", "short": "利通" },
+          { "name": "红寺堡区", "short": "红寺堡" },
+          { "name": "盐池县", "short": "盐池" },
+          { "name": "同心县", "short": "同心" },
+          { "name": "青铜峡市", "short": "青铜峡" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "固原市",
+        "short": "固原",
+        "children": [
+          { "name": "原州区", "short": "原州" },
+          { "name": "西吉县", "short": "西吉" },
+          { "name": "隆德县", "short": "隆德" },
+          { "name": "泾源县", "short": "泾源" },
+          { "name": "彭阳县", "short": "彭阳" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "中卫市",
+        "short": "中卫",
+        "children": [
+          { "name": "沙坡头区", "short": "沙坡头" },
+          { "name": "中宁县", "short": "中宁" },
+          { "name": "海原县", "short": "海原" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "新疆维吾尔自治区",
+    "short": "新疆",
+    "children": [
+      {
+        "name": "乌鲁木齐市",
+        "short": "乌鲁木齐",
+        "children": [
+          { "name": "天山区", "short": "天山" },
+          { "name": "沙依巴克区", "short": "沙依巴克" },
+          { "name": "新市区", "short": "新" },
+          { "name": "水磨沟区", "short": "水磨沟" },
+          { "name": "头屯河区", "short": "头屯河" },
+          { "name": "达坂城区", "short": "达坂城" },
+          { "name": "米东区", "short": "米东" },
+          { "name": "乌鲁木齐县", "short": "乌鲁木齐" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "克拉玛依市",
+        "short": "克拉玛依",
+        "children": [
+          { "name": "独山子区", "short": "独山子" },
+          { "name": "克拉玛依区", "short": "克拉玛依" },
+          { "name": "白碱滩区", "short": "白碱滩" },
+          { "name": "乌尔禾区", "short": "乌尔禾" },
+          { "name": "市辖区", "short": "市辖" }
+        ]
+      },
+      {
+        "name": "吐鲁番市",
+        "short": "吐鲁番",
+        "children": [
+          { "name": "高昌区", "short": "高昌" },
+          { "name": "鄯善县", "short": "鄯善" },
+          { "name": "托克逊县", "short": "托克逊" }
+        ]
+      },
+      {
+        "name": "哈密市",
+        "short": "哈密",
+        "children": [
+          { "name": "伊州区", "short": "伊州" },
+          { "name": "巴里坤哈萨克自治县", "short": "巴里坤哈萨克自治" },
+          { "name": "伊吾县", "short": "伊吾" }
+        ]
+      },
+      {
+        "name": "昌吉回族自治州",
+        "short": "昌吉自治州",
+        "children": [
+          { "name": "昌吉市", "short": "昌吉" },
+          { "name": "阜康市", "short": "阜康" },
+          { "name": "呼图壁县", "short": "呼图壁" },
+          { "name": "玛纳斯县", "short": "玛纳斯" },
+          { "name": "奇台县", "short": "奇台" },
+          { "name": "吉木萨尔县", "short": "吉木萨尔" },
+          { "name": "木垒哈萨克自治县", "short": "木垒哈萨克自治" }
+        ]
+      },
+      {
+        "name": "博尔塔拉蒙古自治州",
+        "short": "博尔塔拉蒙古自治州",
+        "children": [
+          { "name": "博乐市", "short": "博乐" },
+          { "name": "阿拉山口市", "short": "阿拉山口" },
+          { "name": "精河县", "short": "精河" },
+          { "name": "温泉县", "short": "温泉" }
+        ]
+      },
+      {
+        "name": "巴音郭楞蒙古自治州",
+        "short": "巴音郭楞蒙古自治州",
+        "children": [
+          { "name": "库尔勒市", "short": "库尔勒" },
+          { "name": "轮台县", "short": "轮台" },
+          { "name": "尉犁县", "short": "尉犁" },
+          { "name": "若羌县", "short": "若羌" },
+          { "name": "且末县", "short": "且末" },
+          { "name": "焉耆回族自治县", "short": "焉耆自治" },
+          { "name": "和静县", "short": "和静" },
+          { "name": "和硕县", "short": "和硕" },
+          { "name": "博湖县", "short": "博湖" },
+          { "name": "库尔勒经济技术开发区", "short": "库尔勒经济技术开发" }
+        ]
+      },
+      {
+        "name": "阿克苏地区",
+        "short": "阿克苏地",
+        "children": [
+          { "name": "阿克苏市", "short": "阿克苏" },
+          { "name": "库车市", "short": "库车" },
+          { "name": "温宿县", "short": "温宿" },
+          { "name": "沙雅县", "short": "沙雅" },
+          { "name": "新和县", "short": "新和" },
+          { "name": "拜城县", "short": "拜城" },
+          { "name": "乌什县", "short": "乌什" },
+          { "name": "阿瓦提县", "short": "阿瓦提" },
+          { "name": "柯坪县", "short": "柯坪" }
+        ]
+      },
+      {
+        "name": "克孜勒苏柯尔克孜自治州",
+        "short": "克孜勒苏柯尔克孜自治州",
+        "children": [
+          { "name": "阿图什市", "short": "阿图什" },
+          { "name": "阿克陶县", "short": "阿克陶" },
+          { "name": "阿合奇县", "short": "阿合奇" },
+          { "name": "乌恰县", "short": "乌恰" }
+        ]
+      },
+      {
+        "name": "喀什地区",
+        "short": "喀什地",
+        "children": [
+          { "name": "喀什市", "short": "喀什" },
+          { "name": "疏附县", "short": "疏附" },
+          { "name": "疏勒县", "short": "疏勒" },
+          { "name": "英吉沙县", "short": "英吉沙" },
+          { "name": "泽普县", "short": "泽普" },
+          { "name": "莎车县", "short": "莎车" },
+          { "name": "叶城县", "short": "叶城" },
+          { "name": "麦盖提县", "short": "麦盖提" },
+          { "name": "岳普湖县", "short": "岳普湖" },
+          { "name": "伽师县", "short": "伽师" },
+          { "name": "巴楚县", "short": "巴楚" },
+          { "name": "塔什库尔干塔吉克自治县", "short": "塔什库尔干塔吉克自治" }
+        ]
+      },
+      {
+        "name": "和田地区",
+        "short": "和田地",
+        "children": [
+          { "name": "和田市", "short": "和田" },
+          { "name": "和田县", "short": "和田" },
+          { "name": "墨玉县", "short": "墨玉" },
+          { "name": "皮山县", "short": "皮山" },
+          { "name": "洛浦县", "short": "洛浦" },
+          { "name": "策勒县", "short": "策勒" },
+          { "name": "于田县", "short": "于田" },
+          { "name": "民丰县", "short": "民丰" }
+        ]
+      },
+      {
+        "name": "伊犁哈萨克自治州",
+        "short": "伊犁哈萨克自治州",
+        "children": [
+          { "name": "伊宁市", "short": "伊宁" },
+          { "name": "奎屯市", "short": "奎屯" },
+          { "name": "霍尔果斯市", "short": "霍尔果斯" },
+          { "name": "伊宁县", "short": "伊宁" },
+          { "name": "察布查尔锡伯自治县", "short": "察布查尔锡伯自治" },
+          { "name": "霍城县", "short": "霍城" },
+          { "name": "巩留县", "short": "巩留" },
+          { "name": "新源县", "short": "新源" },
+          { "name": "昭苏县", "short": "昭苏" },
+          { "name": "特克斯县", "short": "特克斯" },
+          { "name": "尼勒克县", "short": "尼勒克" }
+        ]
+      },
+      {
+        "name": "塔城地区",
+        "short": "塔城地",
+        "children": [
+          { "name": "塔城市", "short": "塔城" },
+          { "name": "乌苏市", "short": "乌苏" },
+          { "name": "额敏县", "short": "额敏" },
+          { "name": "沙湾县", "short": "沙湾" },
+          { "name": "托里县", "short": "托里" },
+          { "name": "裕民县", "short": "裕民" },
+          { "name": "和布克赛尔蒙古自治县", "short": "和布克赛尔蒙古自治" },
+          { "name": "沙湾市", "short": "沙湾" }
+        ]
+      },
+      {
+        "name": "阿勒泰地区",
+        "short": "阿勒泰地",
+        "children": [
+          { "name": "阿勒泰市", "short": "阿勒泰" },
+          { "name": "布尔津县", "short": "布尔津" },
+          { "name": "富蕴县", "short": "富蕴" },
+          { "name": "福海县", "short": "福海" },
+          { "name": "哈巴河县", "short": "哈巴河" },
+          { "name": "青河县", "short": "青河" },
+          { "name": "吉木乃县", "short": "吉木乃" }
+        ]
+      },
+      {
+        "name": "新疆维吾尔自治区-自治区直辖县级行政区划",
+        "short": "新疆-直辖县级行政区划",
+        "children": [
+          { "name": "石河子市", "short": "石河子" },
+          { "name": "阿拉尔市", "short": "阿拉尔" },
+          { "name": "图木舒克市", "short": "图木舒克" },
+          { "name": "五家渠市", "short": "五家渠" },
+          { "name": "北屯市", "short": "北屯" },
+          { "name": "铁门关市", "short": "铁门关" },
+          { "name": "双河市", "short": "双河" },
+          { "name": "可克达拉市", "short": "可克达拉" },
+          { "name": "昆玉市", "short": "昆玉" },
+          { "name": "胡杨河市", "short": "胡杨河" },
+          { "name": "新星市", "short": "新星" }
+        ]
+      }
+    ]
+  },
+  { "name": "台湾省", "short": "台湾" },
+  {
+    "name": "香港特别行政区",
+    "short": "香港",
+    "children": [
+      { "name": "中西区", "short": "中西" },
+      { "name": "湾仔区", "short": "湾仔" },
+      { "name": "东区", "short": "东" },
+      { "name": "南区", "short": "南" },
+      { "name": "油尖旺区", "short": "油尖旺" },
+      { "name": "深水埗区", "short": "深水埗" },
+      { "name": "九龙城区", "short": "九龙城" },
+      { "name": "黄大仙区", "short": "黄大仙" },
+      { "name": "观塘区", "short": "观塘" },
+      { "name": "荃湾区", "short": "荃湾" },
+      { "name": "屯门区", "short": "屯门" },
+      { "name": "元朗区", "short": "元朗" },
+      { "name": "北区", "short": "北" },
+      { "name": "大埔区", "short": "大埔" },
+      { "name": "西贡区", "short": "西贡" },
+      { "name": "沙田区", "short": "沙田" },
+      { "name": "葵青区", "short": "葵青" },
+      { "name": "离岛区", "short": "离岛" }
+    ]
+  },
+  {
+    "name": "澳门特别行政区",
+    "short": "澳门",
+    "children": [
+      { "name": "花地玛堂区", "short": "花地玛堂" },
+      { "name": "花王堂区", "short": "花王堂" },
+      { "name": "望德堂区", "short": "望德堂" },
+      { "name": "大堂区", "short": "大堂" },
+      { "name": "风顺堂区", "short": "风顺堂" },
+      { "name": "嘉模堂区", "short": "嘉模堂" },
+      { "name": "路凼填海区", "short": "路凼填海" },
+      { "name": "圣方济各堂区", "short": "圣方济各堂" }
+    ]
+  }
+]
diff --git a/apps/web-antd/src/util/ship-address-copy.ts b/apps/web-antd/src/util/ship-address-copy.ts
new file mode 100644
index 00000000..5c67b28a
--- /dev/null
+++ b/apps/web-antd/src/util/ship-address-copy.ts
@@ -0,0 +1,64 @@
+/**
+ * 收货地址一键复制文案：{名字} {手机号} {省市区}{详细地址}
+ */
+import { message } from 'ant-design-vue';
+
+export type ShipAddressLike = {
+  area?: string;
+  city?: string;
+  detail?: string;
+  detail_address?: string;
+  express_address?: string;
+  express_mobile?: string;
+  express_name?: string;
+  express_region?: string;
+  mobile?: string;
+  name?: string;
+  phone?: string;
+  province?: string;
+  region?: string;
+};
+
+/**
+ * 拼装复制文本；订单场景兼容 address + express_* 双轨
+ */
+export function formatShipAddressCopyText(
+  addr?: null | ShipAddressLike,
+  fallback?: null | ShipAddressLike,
+): string {
+  const a = addr || {};
+  const f = fallback || {};
+  const name = String(a.name || f.express_name || f.name || '').trim();
+  const mobile = String(
+    a.mobile || a.phone || f.express_mobile || f.mobile || '',
+  ).trim();
+  let region = String(a.region || '').trim();
+  if (!region) {
+    region = [a.province, a.city, a.area].filter(Boolean).join('');
+  }
+  if (!region) {
+    region = String(f.express_region || f.region || '').trim();
+  }
+  const detail = String(
+    a.detail_address || a.detail || f.express_address || f.detail_address || '',
+  ).trim();
+  const place = region + detail;
+  return [name, mobile, place].filter(Boolean).join(' ');
+}
+
+/** 复制到剪贴板并 toast */
+export async function copyShipAddressText(text: string): Promise<boolean> {
+  const raw = String(text || '').trim();
+  if (!raw) {
+    message.warning('暂无地址可复制');
+    return false;
+  }
+  try {
+    await navigator.clipboard.writeText(raw);
+    message.success('已复制');
+    return true;
+  } catch {
+    message.error('复制失败');
+    return false;
+  }
+}
diff --git a/apps/web-antd/src/views/business/chat/components/ChatArea.vue b/apps/web-antd/src/views/business/chat/components/ChatArea.vue
index fbe70681..3e18a599 100644
--- a/apps/web-antd/src/views/business/chat/components/ChatArea.vue
+++ b/apps/web-antd/src/views/business/chat/components/ChatArea.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { defineEmits, defineProps } from 'vue';
 
+import { useLayoutDensityStore } from '../stores/layoutDensity.ts';
 import ChatHeader from './ChatHeader.vue';
 import MessageInput from './MessageInput.vue';
 import MessageList from './MessageList.vue';
@@ -8,6 +9,7 @@ import MessageList from './MessageList.vue';
 // 定义 props 和 emits
 const props = defineProps({
   // ... existing props
+
 });
 
 const emit = defineEmits([
@@ -17,6 +19,8 @@ const emit = defineEmits([
   'transfer-import-success',
 ]);
 
+const layoutDensityStore = useLayoutDensityStore();
+
 // 开方功能触发函数
 const handleOpenPrescription = (registerId) => {
   emit('openPrescription', registerId);
@@ -26,27 +30,159 @@ const handleOpenPrescription = (registerId) => {
 const handleEndConsultationSuccess = () => {
   emit('end-consultation-success');
 };
-
-// ... rest of the component
 </script>
 
 <template>
-  <div class="flex h-full flex-col">
-    <!-- 聊天头部 -->
+  <!--
+    chat-layout + 密度 class：用 CSS 变量统一驱动头/气泡/输入区尺寸，
+    子组件读 var(--chat-*)，避免各处硬编码多套尺寸
+  -->
+  <div
+    class="chat-layout flex h-full flex-col"
+    :class="layoutDensityStore.densityClass"
+  >
     <ChatHeader />
-
-    <!-- 消息区域 -->
-    <MessageList 
+    <MessageList
       class="flex-1"
       @open-prescription="handleOpenPrescription"
       @transfer-import-success="(data) => emit('transfer-import-success', data)"
     />
-
-    <!-- 输入区域 -->
-    <MessageInput 
-      @open-prescription="handleOpenPrescription" 
+    <MessageInput
+      @open-prescription="handleOpenPrescription"
       @end-consultation-success="handleEndConsultationSuccess"
       @transfer-import-success="(data) => emit('transfer-import-success', data)"
     />
   </div>
 </template>
+
+<style scoped>
+/**
+ * 聊天布局密度变量
+ * 小(sm)：紧凑 IM；中(md 默认)：可读压缩；大(lg)：接近历史宽松尺寸
+ */
+.chat-layout {
+  /* 中：默认 */
+  --chat-header-px: 16px;
+  --chat-header-py: 8px;
+  --chat-avatar: 36px;
+  --chat-name-size: 15px;
+  --chat-status-size: 12px;
+  --chat-msg-mb: 10px;
+  --chat-msg-gap: 10px;
+  --chat-bubble-pad: 10px;
+  --chat-text-size: 14px;
+  --chat-text-leading: 1.5;
+  --chat-image-max: 240px;
+  --chat-input-pad: 12px;
+  --chat-toolbar-pad: 4px;
+  --chat-fn-btn: 36px;
+  --chat-fn-font: 15px;
+  --chat-send-btn: 40px;
+  --chat-send-font: 15px;
+  --chat-input-gap: 10px;
+  --chat-textarea-pad-y: 10px;
+  --chat-textarea-pad-x: 14px;
+  --chat-textarea-font: 14px;
+  --chat-quick-pad-y: 6px;
+  --chat-quick-pad-x: 10px;
+  --chat-quick-gap: 6px;
+  --chat-quick-font: 12px;
+  --chat-quick-bubble-py: 4px;
+  --chat-quick-bubble-px: 10px;
+  --chat-list-pad: 12px;
+}
+
+.chat-layout--sm {
+  --chat-header-px: 12px;
+  --chat-header-py: 6px;
+  --chat-avatar: 32px;
+  --chat-name-size: 14px;
+  --chat-status-size: 11px;
+  --chat-msg-mb: 8px;
+  --chat-msg-gap: 8px;
+  --chat-bubble-pad: 8px;
+  --chat-text-size: 13px;
+  --chat-text-leading: 1.45;
+  --chat-image-max: 200px;
+  --chat-input-pad: 8px;
+  --chat-toolbar-pad: 2px;
+  --chat-fn-btn: 32px;
+  --chat-fn-font: 14px;
+  --chat-send-btn: 36px;
+  --chat-send-font: 14px;
+  --chat-input-gap: 8px;
+  --chat-textarea-pad-y: 8px;
+  --chat-textarea-pad-x: 12px;
+  --chat-textarea-font: 13px;
+  --chat-quick-pad-y: 4px;
+  --chat-quick-pad-x: 8px;
+  --chat-quick-gap: 4px;
+  --chat-quick-font: 12px;
+  --chat-quick-bubble-py: 3px;
+  --chat-quick-bubble-px: 8px;
+  --chat-list-pad: 8px;
+}
+
+.chat-layout--md {
+  /* 与 .chat-layout 默认一致，显式写出便于对照 */
+  --chat-header-px: 16px;
+  --chat-header-py: 8px;
+  --chat-avatar: 36px;
+  --chat-name-size: 15px;
+  --chat-status-size: 12px;
+  --chat-msg-mb: 10px;
+  --chat-msg-gap: 10px;
+  --chat-bubble-pad: 10px;
+  --chat-text-size: 14px;
+  --chat-text-leading: 1.5;
+  --chat-image-max: 240px;
+  --chat-input-pad: 12px;
+  --chat-toolbar-pad: 4px;
+  --chat-fn-btn: 36px;
+  --chat-fn-font: 15px;
+  --chat-send-btn: 40px;
+  --chat-send-font: 15px;
+  --chat-input-gap: 10px;
+  --chat-textarea-pad-y: 10px;
+  --chat-textarea-pad-x: 14px;
+  --chat-textarea-font: 14px;
+  --chat-quick-pad-y: 6px;
+  --chat-quick-pad-x: 10px;
+  --chat-quick-gap: 6px;
+  --chat-quick-font: 12px;
+  --chat-quick-bubble-py: 4px;
+  --chat-quick-bubble-px: 10px;
+  --chat-list-pad: 12px;
+}
+
+.chat-layout--lg {
+  --chat-header-px: 24px;
+  --chat-header-py: 16px;
+  --chat-avatar: 48px;
+  --chat-name-size: 18px;
+  --chat-status-size: 14px;
+  --chat-msg-mb: 16px;
+  --chat-msg-gap: 12px;
+  --chat-bubble-pad: 16px;
+  --chat-text-size: 16px;
+  --chat-text-leading: 1.625;
+  --chat-image-max: 400px;
+  --chat-input-pad: 20px;
+  --chat-toolbar-pad: 8px;
+  --chat-fn-btn: 44px;
+  --chat-fn-font: 18px;
+  --chat-send-btn: 52px;
+  --chat-send-font: 18px;
+  --chat-input-gap: 12px;
+  --chat-textarea-pad-y: 12px;
+  --chat-textarea-pad-x: 16px;
+  --chat-textarea-font: 14px;
+  --chat-quick-pad-y: 8px;
+  --chat-quick-pad-x: 12px;
+  --chat-quick-gap: 8px;
+  --chat-quick-font: 13px;
+  --chat-quick-bubble-py: 6px;
+  --chat-quick-bubble-px: 12px;
+  --chat-list-pad: 20px;
+}
+</style>
diff --git a/apps/web-antd/src/views/business/chat/components/ChatHeader.vue b/apps/web-antd/src/views/business/chat/components/ChatHeader.vue
index 2049e771..69cec5af 100644
--- a/apps/web-antd/src/views/business/chat/components/ChatHeader.vue
+++ b/apps/web-antd/src/views/business/chat/components/ChatHeader.vue
@@ -1,13 +1,24 @@
 <script setup>
 import { computed, ref } from 'vue';
 
-import { Avatar } from 'ant-design-vue';
+import { Avatar, Select } from 'ant-design-vue';
 
 import { useChatStore } from '../stores/chat.ts';
+import {
+  CHAT_LAYOUT_DENSITY_OPTIONS,
+  useLayoutDensityStore,
+} from '../stores/layoutDensity.ts';
 import { useThemeStore } from '../stores/theme.ts';
 
 const chatStore = useChatStore();
 const themeStore = useThemeStore();
+const layoutDensityStore = useLayoutDensityStore();
+
+/** 布局密度下拉：与 store 双向绑定，默认中 */
+const layoutDensity = computed({
+  get: () => layoutDensityStore.density,
+  set: (v) => layoutDensityStore.setDensity(v),
+});
 
 const isFriendOnline = ref(true);
 const showMoreActions = ref(false);
@@ -102,7 +113,9 @@ const viewFriendProfile = () => {
 </script>
 
 <template>
-  <div class="chat-header bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
+  <div
+    class="chat-header bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+  >
     <div class="header-content">
       <div class="friend-info">
         <div
@@ -111,10 +124,10 @@ const viewFriendProfile = () => {
         >
           <Avatar
             v-if="chatStore.currentFriend?.avatar"
-            :size="48"
+            :size="layoutDensityStore.avatarSize"
             :src="chatStore.currentFriend?.avatar"
           />
-          <Avatar v-else :size="48">
+          <Avatar v-else :size="layoutDensityStore.avatarSize">
             {{ chatStore.currentFriend?.nick_name.charAt(0) }}
           </Avatar>
         </div>
@@ -129,7 +142,10 @@ const viewFriendProfile = () => {
             <span class="status-text">
               {{ isFriendOnline ? '在线' : '离线' }}
             </span>
-            <span v-if="callStatus" class="call-status-text text-blue-500 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/20">
+            <span
+              v-if="callStatus"
+              class="call-status-text text-blue-500 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/20"
+            >
               {{ callStatusText }}
             </span>
           </p>
@@ -137,44 +153,18 @@ const viewFriendProfile = () => {
       </div>
 
       <div class="header-actions">
-<!--        &lt;!&ndash; 语音通话按钮 &ndash;&gt;-->
-<!--        <button-->
-<!--          class="action-btn voice-call-btn"-->
-<!--          title="语音通话"-->
-<!--          @click="startVoiceCall"-->
-<!--        >-->
-<!--          <i class="fas fa-phone"></i>-->
-<!--        </button>-->
-
-<!--        &lt;!&ndash; 视频通话按钮 &ndash;&gt;-->
-<!--        <button-->
-<!--          class="action-btn video-call-btn"-->
-<!--          title="视频通话"-->
-<!--          @click="startVideoCall"-->
-<!--        >-->
-<!--          <i class="fas fa-video"></i>-->
-<!--        </button>-->
-
-        <!-- 更多操作 -->
-<!--        <button-->
-<!--          class="action-btn more-btn"-->
-<!--          title="更多操作"-->
-<!--          @click="showMoreActions = !showMoreActions"-->
-<!--        >-->
-<!--          <i class="fas fa-ellipsis-v"></i>-->
-<!--        </button>-->
-
-<!--        &lt;!&ndash; 更多操作菜单 &ndash;&gt;-->
-<!--        <div v-if="showMoreActions" class="more-actions-menu">-->
-<!--&lt;!&ndash;          <div class="menu-item" @click="clearChatHistory">&ndash;&gt;-->
-<!--&lt;!&ndash;            <i class="fas fa-trash"></i>&ndash;&gt;-->
-<!--&lt;!&ndash;            <span>清空聊天记录</span>&ndash;&gt;-->
-<!--&lt;!&ndash;          </div>&ndash;&gt;-->
-<!--          <div class="menu-item" @click="viewFriendProfile">-->
-<!--            <i class="fas fa-user"></i>-->
-<!--            <span>查看资料</span>-->
-<!--          </div>-->
-<!--        </div>-->
+        <!-- 布局密度：大/中/小，默认中，写入 localStorage -->
+        <div class="layout-density-select" title="聊天布局大小">
+          <span class="layout-density-label">布局</span>
+          <Select
+            v-model:value="layoutDensity"
+            :options="CHAT_LAYOUT_DENSITY_OPTIONS"
+            size="small"
+            style="width: 64px"
+            :dropdown-match-select-width="false"
+            placeholder="中"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -183,6 +173,7 @@ const viewFriendProfile = () => {
 <style scoped>
 .chat-header {
   position: relative;
+  padding: var(--chat-header-py, 8px) var(--chat-header-px, 16px);
 }
 
 .header-content {
@@ -193,41 +184,57 @@ const viewFriendProfile = () => {
 
 .friend-info {
   display: flex;
+  gap: 10px;
   align-items: center;
-  gap: 12px;
+  min-width: 0;
 }
 
 .friend-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  color: white;
+  width: var(--chat-avatar, 36px);
+  height: var(--chat-avatar, 36px);
+  font-size: calc(var(--chat-avatar, 36px) * 0.38);
   font-weight: bold;
-  font-size: 18px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  color: white;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }
 
 .friend-details {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
+  min-width: 0;
 }
 
 .friend-name {
-  font-size: 18px;
-  font-weight: 600;
   margin: 0;
+  font-size: var(--chat-name-size, 15px);
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 .friend-status {
   display: flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
   margin: 0;
-  font-size: 14px;
+  font-size: var(--chat-status-size, 12px);
+}
+
+.layout-density-select {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.layout-density-label {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground, 215 16% 47%));
+  white-space: nowrap;
 }
 
 .status-dot {
@@ -259,107 +266,107 @@ const viewFriendProfile = () => {
 
 /* 添加通话状态样式 */
 .call-status-text {
+  padding: 2px 6px;
   margin-left: 8px;
   font-size: 13px;
   font-weight: 500;
-  padding: 2px 6px;
   border-radius: 4px;
 }
 
 .header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
   position: relative;
+  display: flex;
+  gap: 12px;
+  align-items: center;
 }
 
 .action-btn {
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 50%;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
+  width: 40px;
+  height: 40px;
   font-size: 16px;
-  position: relative;
+  cursor: pointer;
+  border: none;
+  border-radius: 50%;
+  transition: all 0.3s ease;
 }
 
 .voice-call-btn {
-  background: linear-gradient(135deg, #10b981, #059669);
   color: white;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  background: linear-gradient(135deg, #10b981, #059669);
+  box-shadow: 0 4px 12px rgb(16 185 129 / 30%);
 }
 
 .voice-call-btn:hover {
+  box-shadow: 0 6px 16px rgb(16 185 129 / 40%);
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
 }
 
 .video-call-btn {
-  background: linear-gradient(135deg, #3b82f6, #2563eb);
   color: white;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  box-shadow: 0 4px 12px rgb(59 130 246 / 30%);
 }
 
 .video-call-btn:hover {
+  box-shadow: 0 6px 16px rgb(59 130 246 / 40%);
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
 }
 
 .more-btn {
-  background: #f1f5f9;
   color: #64748b;
+  background: #f1f5f9;
   border: 1px solid #e2e8f0;
 }
 
 .more-btn:hover {
-  background: #e2e8f0;
   color: #475569;
+  background: #e2e8f0;
 }
 
 .dark .more-btn {
-  background: #374151;
   color: #9ca3af;
+  background: #374151;
   border-color: #4b5563;
 }
 
 .dark .more-btn:hover {
-  background: #4b5563;
   color: #d1d5db;
+  background: #4b5563;
 }
 
 .more-actions-menu {
   position: absolute;
   top: 100%;
   right: 0;
+  z-index: 1000;
+  min-width: 160px;
+  padding: 8px 0;
+  margin-top: 8px;
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  padding: 8px 0;
-  min-width: 160px;
-  z-index: 1000;
-  margin-top: 8px;
+  box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
 }
 
 .dark .more-actions-menu {
   background: #374151;
   border-color: #4b5563;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
 }
 
 .menu-item {
   display: flex;
-  align-items: center;
   gap: 12px;
+  align-items: center;
   padding: 12px 16px;
+  font-size: 14px;
+  color: #374151;
   cursor: pointer;
   transition: all 0.2s ease;
-  color: #374151;
-  font-size: 14px;
 }
 
 .menu-item:hover {
@@ -386,41 +393,22 @@ const viewFriendProfile = () => {
 
 @keyframes pulse {
   0% {
-    transform: scale(1);
     opacity: 1;
+    transform: scale(1);
   }
+
   50% {
-    transform: scale(1.1);
     opacity: 0.7;
+    transform: scale(1.1);
   }
+
   100% {
-    transform: scale(1);
     opacity: 1;
+    transform: scale(1);
   }
 }
 
-/* 响应式设计 */
 @media (max-width: 768px) {
-  .chat-header {
-    @apply px-4 py-3;
-  }
-
-  .friend-avatar {
-    width: 40px;
-    height: 40px;
-    font-size: 16px;
-  }
-
-  .friend-name {
-    font-size: 16px;
-  }
-
-  .action-btn {
-    width: 36px;
-    height: 36px;
-    font-size: 14px;
-  }
-
   .header-actions {
     gap: 8px;
   }
diff --git a/apps/web-antd/src/views/business/chat/components/CustomTextarea.vue b/apps/web-antd/src/views/business/chat/components/CustomTextarea.vue
index 481dd960..36e095d8 100644
--- a/apps/web-antd/src/views/business/chat/components/CustomTextarea.vue
+++ b/apps/web-antd/src/views/business/chat/components/CustomTextarea.vue
@@ -1,89 +1,57 @@
-<template>
-  <div
-    class="custom-textarea-container bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600"
-    :class="{ 'focused': isFocused, 'disabled': disabled }"
-    @drop="handleDrop"
-    @dragover="handleDragOver"
-    @dragenter="handleDragEnter"
-    @dragleave="handleDragLeave"
-  >
-        <textarea
-          ref="textareaRef"
-          :value="modelValue"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          :readonly="readonly"
-          :maxlength="maxlength"
-          :rows="rows"
-          class="custom-textarea"
-          @input="handleInput"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @keydown="handleKeydown"
-          @paste="handlePaste"
-        ></textarea>
-
-    <div class="textarea-actions" v-if="clearable || $slots.actions">
-      <button
-        v-if="clearable && modelValue && !disabled"
-        class="clear-btn"
-        @click="handleClear"
-        type="button"
-      >
-        <i class="fas fa-times"></i>
-      </button>
-      <slot name="actions"></slot>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import {ref, nextTick, watch} from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
 const props = defineProps({
   modelValue: {
     type: String,
-    default: ''
+    default: '',
   },
   placeholder: {
     type: String,
-    default: ''
+    default: '',
   },
   disabled: {
     type: Boolean,
-    default: false
+    default: false,
   },
   readonly: {
     type: Boolean,
-    default: false
+    default: false,
   },
   clearable: {
     type: Boolean,
-    default: false
+    default: false,
   },
   maxlength: {
     type: Number,
-    default: undefined
+    default: undefined,
   },
   rows: {
     type: Number,
-    default: 3
+    default: 3,
   },
   autoResize: {
     type: Boolean,
-    default: false
+    default: false,
   },
   maxRows: {
     type: Number,
-    default: 6
+    default: 6,
   },
   detectPaste: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'clear', 'keydown', 'paste-file']);
+const emit = defineEmits([
+  'update:modelValue',
+  'focus',
+  'blur',
+  'clear',
+  'keydown',
+  'paste-file',
+]);
 
 const textareaRef = ref(null);
 const isFocused = ref(false);
@@ -166,11 +134,11 @@ const autoResize = () => {
     const textarea = textareaRef.value;
     textarea.style.height = 'auto';
 
-    const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+    const lineHeight = Number.parseInt(getComputedStyle(textarea).lineHeight);
     const maxHeight = lineHeight * props.maxRows;
     const scrollHeight = textarea.scrollHeight;
 
-    textarea.style.height = Math.min(scrollHeight, maxHeight) + 'px';
+    textarea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
   });
 };
 
@@ -183,24 +151,66 @@ const blur = () => {
 };
 
 // 监听内容变化自动调整高度
-watch(() => props.modelValue, () => {
-  if (props.autoResize) {
-    autoResize();
-  }
-});
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.autoResize) {
+      autoResize();
+    }
+  },
+);
 
 defineExpose({
   focus,
-  blur
+  blur,
 });
 </script>
 
+<template>
+  <div
+    class="custom-textarea-container bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600"
+    :class="{ focused: isFocused, disabled }"
+    @drop="handleDrop"
+    @dragover="handleDragOver"
+    @dragenter="handleDragEnter"
+    @dragleave="handleDragLeave"
+  >
+    <textarea
+      ref="textareaRef"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :maxlength="maxlength"
+      :rows="rows"
+      class="custom-textarea"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keydown="handleKeydown"
+      @paste="handlePaste"
+    ></textarea>
+
+    <div class="textarea-actions" v-if="clearable || $slots.actions">
+      <button
+        v-if="clearable && modelValue && !disabled"
+        class="clear-btn"
+        @click="handleClear"
+        type="button"
+      >
+        <i class="fas fa-times"></i>
+      </button>
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .custom-textarea-container {
   position: relative;
+  overflow: hidden;
   border-radius: 12px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
 }
 
 .custom-textarea-container:hover {
@@ -213,17 +223,17 @@ defineExpose({
 
 .custom-textarea-container.focused {
   border-color: #4361ee;
-  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
+  box-shadow: 0 0 0 4px rgb(67 97 238 / 10%);
 }
 
 .dark .custom-textarea-container.focused {
-  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.2);
+  box-shadow: 0 0 0 4px rgb(67 97 238 / 20%);
 }
 
 .custom-textarea-container.disabled {
+  cursor: not-allowed;
   background: #f8fafc;
   border-color: #e2e8f0;
-  cursor: not-allowed;
 }
 
 .dark .custom-textarea-container.disabled {
@@ -233,14 +243,14 @@ defineExpose({
 
 .custom-textarea {
   width: 100%;
-  border: none;
-  outline: none;
-  background: transparent;
-  padding: 12px 16px;
-  font-size: 14px;
+  padding: var(--chat-textarea-pad-y, 10px) var(--chat-textarea-pad-x, 14px);
+  font-family: inherit;
+  font-size: var(--chat-textarea-font, 14px);
   line-height: 1.5;
   resize: none;
-  font-family: inherit;
+  outline: none;
+  background: transparent;
+  border: none;
 }
 
 .custom-textarea::placeholder {
@@ -252,8 +262,8 @@ defineExpose({
 }
 
 .custom-textarea:disabled {
-  cursor: not-allowed;
   color: #94a3b8;
+  cursor: not-allowed;
 }
 
 .dark .custom-textarea:disabled {
@@ -269,16 +279,16 @@ defineExpose({
 }
 
 .clear-btn {
-  background: none;
-  border: none;
-  color: #94a3b8;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 4px;
+  color: #94a3b8;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  transition: all 0.2s ease;
 }
 
 .clear-btn:hover {
diff --git a/apps/web-antd/src/views/business/chat/components/MessageBubble.vue b/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
index cc5930be..15f17ebe 100644
--- a/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
+++ b/apps/web-antd/src/views/business/chat/components/MessageBubble.vue
@@ -6,14 +6,35 @@ import { useVbenModal } from '@vben/common-ui';
 import { useUserStore } from '@vben/stores';
 
 // 勿用 message 作 toast 名：会覆盖 props.message，导致模板 message_type 全失效
-import { Avatar, Button, Image, message as antdMessage } from 'ant-design-vue';
+import { message as antdMessage, Avatar, Button, Image } from 'ant-design-vue';
 
 import { usePrescriptionStore } from '#/store/prescription';
 import { getChatMessageRegisterInfoApi } from '#/views/business/chat/api';
 import { useChatStore } from '#/views/business/chat/stores/chat';
 import { sendMessage } from '#/views/business/chat/utils/request';
-import { getDrugsByRegisterId as getDrugsByRegisterIdPharmacy } from '#/views/doctor/online-consultation/api/index';
 import { getDrugsByRegisterId as getDrugsByRegisterIdClinic } from '#/views/doctor/online-consultation-clinic/api/index';
+import { getDrugsByRegisterId as getDrugsByRegisterIdPharmacy } from '#/views/doctor/online-consultation/api/index';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  isSent: {
+    type: Boolean,
+    default: false,
+  },
+  senderInfo: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'show-user-profile',
+  'open-prescription',
+  'transfer-import-success',
+]);
 
 // 辅助函数：按需解析消息内容
 const getParsedContent = (messageType, messageContent) => {
@@ -21,8 +42,8 @@ const getParsedContent = (messageType, messageContent) => {
   if ([4, 9, 10, 11, 12, 13, 14].includes(messageType)) {
     try {
       return JSON.parse(messageContent);
-    } catch (e) {
-      console.error('解析消息内容失败:', e);
+    } catch (error) {
+      console.error('解析消息内容失败:', error);
       return messageContent;
     }
   }
@@ -50,42 +71,29 @@ const getMessageTypeName = (messageType) => {
   };
   return types[messageType] || 'unknown';
 };
+import { XgVideoPlayer } from '#/components/video-player';
 import { getPrescriptionCheckStatusApi } from '#/views/business/order/prescription/api';
 import { receptionApi } from '#/views/doctor/doctor-reception/api';
 import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
 import RefusalOfTreatmentModal from '#/views/doctor/doctor-reception/components/RefusalOfTreatmentModal.vue';
-
-import previewMedia from '../composables/useMediaPreview.ts';
-import { useThemeStore } from '../stores/theme.ts';
-import { useUserStore as chatUseUserStore } from '../stores/user';
-import AudioMessage from './AudioMessage.vue';
-import { XgVideoPlayer } from '#/components/video-player';
-import PatientExperienceCard from '#/views/doctor/online-consultation/components/PatientExperienceCard.vue';
-import FollowUpDrugAssistantCard from './FollowUpDrugAssistantCard.vue';
-import ProductCard from '#/views/doctor/online-consultation/components/ProductCard.vue';
 import EndConsultationCard from '#/views/doctor/online-consultation/components/EndConsultationCard.vue';
+import PatientExperienceCard from '#/views/doctor/online-consultation/components/PatientExperienceCard.vue';
+import ProductCard from '#/views/doctor/online-consultation/components/ProductCard.vue';
 import TransferPrescriptionMessageCard from '#/views/doctor/online-consultation/components/TransferPrescriptionMessageCard.vue';
 import TransferPrescriptionViewDrawer from '#/views/doctor/online-consultation/components/TransferPrescriptionViewDrawer.vue';
 
-const props = defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-  isSent: {
-    type: Boolean,
-    default: false,
-  },
-  senderInfo: {
-    type: Object,
-    required: true,
-  },
-});
-const emit = defineEmits(['show-user-profile', 'open-prescription', 'transfer-import-success']);
+import previewMedia from '../composables/useMediaPreview.ts';
+import { useLayoutDensityStore } from '../stores/layoutDensity.ts';
+import { useThemeStore } from '../stores/theme.ts';
+import { useUserStore as chatUseUserStore } from '../stores/user';
+import AudioMessage from './AudioMessage.vue';
+import FollowUpDrugAssistantCard from './FollowUpDrugAssistantCard.vue';
+
 const chatUserStore = chatUseUserStore();
 const userStore = useUserStore();
 const chatStore = useChatStore();
 const themeStore = useThemeStore();
+const layoutDensityStore = useLayoutDensityStore();
 const route = useRoute();
 const prescriptionStore = usePrescriptionStore();
 
@@ -94,7 +102,9 @@ const isClinicModule = computed(() => {
   return route.path.includes('online-consultation-clinic');
 });
 const getDrugsByRegisterId = computed(() => {
-  return isClinicModule.value ? getDrugsByRegisterIdClinic : getDrugsByRegisterIdPharmacy;
+  return isClinicModule.value
+    ? getDrugsByRegisterIdClinic
+    : getDrugsByRegisterIdPharmacy;
 });
 
 // 转接方查看抽屉相关
@@ -154,17 +164,18 @@ const checkPrescriptionStatus = (parsedContent) => {
   // 如果 status 不存在，才调用 API（作为备用方案）
   if (parsedContent && parsedContent.id) {
     getPrescriptionCheckStatusApi({ id: parsedContent.id }).then((res) => {
-    statusInfo.value.status = res.status;
-    statusInfo.value.text = prescriptionStatusMap[res.status];
-    return prescriptionStatusMap[res.status];
-  });
+      statusInfo.value.status = res.status;
+      statusInfo.value.text = prescriptionStatusMap[res.status];
+      return prescriptionStatusMap[res.status];
+    });
   }
 };
 
 // 计算属性：解析后的消息内容
 const parsedContent = computed(() => {
   // 确保 message_content 字段存在，优先使用 message_content，其次使用 content
-  const messageContent = props.message.message_content || props.message.content || '';
+  const messageContent =
+    props.message.message_content || props.message.content || '';
   return getParsedContent(props.message.message_type, messageContent);
 });
 
@@ -208,15 +219,15 @@ const registerCardDrugRows = computed(() => {
   const fallbackQty =
     pc.number != null && pc.number !== '' ? Number(pc.number) : 1;
   const arr = pc.selected_western_drugs;
-  if (Array.isArray(arr) && arr.length) {
+  if (Array.isArray(arr) && arr.length > 0) {
     return arr.map((d, idx) => {
-      const q = d?.quantity != null ? Number(d.quantity) : fallbackQty;
+      const q = d?.quantity == null ? fallbackQty : Number(d.quantity);
       return {
         key: String(d?.drug_id || d?.id || idx),
         name: d?.name || '',
         specification: d?.specification || d?.spec || d?.drug_spec || '',
         image: d?.image || d?.drug_image || '',
-        quantity: q >= 1 ? q : 1,
+        quantity: Math.max(q, 1),
       };
     });
   }
@@ -227,7 +238,7 @@ const registerCardDrugRows = computed(() => {
         name: pc.drug.name,
         specification: pc.drug.specification || pc.drug.spec || '',
         image: pc.drug.image || pc.drug.drug_image || '',
-        quantity: fallbackQty >= 1 ? fallbackQty : 1,
+        quantity: Math.max(fallbackQty, 1),
       },
     ];
   }
@@ -272,7 +283,10 @@ const handleAddRegisterDrugsToPrescription = async () => {
   }
   let storeId = prescriptionStore.myStoreId;
   if (!storeId || storeId === 0) {
-    if (prescriptionStore.myStoreList && prescriptionStore.myStoreList.length > 0) {
+    if (
+      prescriptionStore.myStoreList &&
+      prescriptionStore.myStoreList.length > 0
+    ) {
       storeId = prescriptionStore.myStoreList[0].id;
     } else {
       antdMessage.warning('请先选择诊所');
@@ -321,7 +335,7 @@ const canAddFollowUpDrugsToRx = computed(() => {
   if (!isFollowUpDrugAssistant.value || props.isSent) return false;
   const pc = parsedContent.value;
   const drugs = pc && Array.isArray(pc.drugs) ? pc.drugs : [];
-  if (!drugs.length) return false;
+  if (drugs.length === 0) return false;
   return !!(
     prescriptionStore.currentRegisterId ||
     chatStore.currentFriend?.register_id ||
@@ -408,7 +422,8 @@ const handleViewTransferDetail = (transferData) => {
 // 处理转接方导入成功
 const handleTransferImportSuccess = (prescriptionData) => {
   // 触发打开处方模态框事件
-  const registerId = transferRegisterId.value || chatStore.currentFriend?.register_id;
+  const registerId =
+    transferRegisterId.value || chatStore.currentFriend?.register_id;
   if (registerId) {
     emit('open-prescription', registerId);
   }
@@ -528,17 +543,16 @@ const formatDateTime = (timestamp) => {
 const getSexText = (sex) => {
   return sex === 1 ? '男' : '女';
 };
-
 </script>
 
 <template>
   <div
     :class="isSent ? 'flex-row-reverse' : 'flex-row'"
-    class="mb-4 flex items-start gap-3"
+    class="message-row flex items-start"
   >
     <RefusalOfTreatmentModals />
     <PrescriptionDetailModal />
-    <!-- 头像 -->
+    <!-- 头像：尺寸跟随布局密度 -->
     <div
       v-if="isSent"
       :style="avatarStyle"
@@ -547,10 +561,10 @@ const getSexText = (sex) => {
     >
       <Avatar
         v-if="userStore.userInfo?.avatar"
-        :size="48"
+        :size="layoutDensityStore.avatarSize"
         :src="userStore.userInfo?.avatar"
       />
-      <Avatar v-else :size="48">
+      <Avatar v-else :size="layoutDensityStore.avatarSize">
         {{ userStore.userInfo?.nick_name.charAt(0) }}
       </Avatar>
     </div>
@@ -560,8 +574,16 @@ const getSexText = (sex) => {
       class="cursor-pointer rounded-full"
       @click="showUserProfile"
     >
-      <Avatar v-if="senderInfo.avatar" :size="48" :src="senderInfo.avatar" />
-      <Avatar v-else :size="48">{{ senderInfo.nick_name.charAt(0) }}</Avatar>
+      <Avatar
+        v-if="senderInfo.avatar"
+        :size="layoutDensityStore.avatarSize"
+        :src="senderInfo.avatar"
+      />
+      <Avatar v-else :size="layoutDensityStore.avatarSize">
+{{
+        senderInfo.nick_name.charAt(0)
+      }}
+</Avatar>
     </div>
 
     <!-- 消息内容区域 -->
@@ -580,13 +602,15 @@ const getSexText = (sex) => {
         {{ senderInfo.nick_name }}
       </div>
 
-      <!-- 消息气泡 -->
-      <div :class="bubbleClasses" class="relative rounded-2xl p-4 shadow-sm">
+      <!-- 消息气泡：padding 由密度变量控制 -->
+      <div
+        :class="bubbleClasses"
+        class="message-bubble-pad relative rounded-2xl shadow-sm"
+      >
         <!-- 图片消息 -->
         <div
           v-if="message.message_type === 1"
           class="image-message relative cursor-pointer"
-          style="width: 400px;"
           @click="handlePreviewMedia(parsedContent, 'image')"
         >
           <Image
@@ -672,19 +696,24 @@ const getSexText = (sex) => {
                   :class="{
                     'bg-yellow-100 text-yellow-800':
                       registerCardDisplay.status === 0,
-                    'bg-blue-100 text-blue-800': registerCardDisplay.status === 1,
+                    'bg-blue-100 text-blue-800':
+                      registerCardDisplay.status === 1,
                     'bg-red-100 text-red-800': registerCardDisplay.status === 2,
                     'bg-red-100 text-red-800': registerCardDisplay.status === 3,
-                    'bg-gray-100 text-gray-800': registerCardDisplay.status === 4,
+                    'bg-gray-100 text-gray-800':
+                      registerCardDisplay.status === 4,
                     'bg-purple-100 text-purple-800':
                       registerCardDisplay.status === 5,
                     'bg-indigo-100 text-indigo-800':
                       registerCardDisplay.status === 6,
-                    'bg-pink-100 text-pink-800': registerCardDisplay.status === 7,
+                    'bg-pink-100 text-pink-800':
+                      registerCardDisplay.status === 7,
                   }"
                   class="rounded-full px-2 py-1 text-xs font-medium"
                 >
-                  {{ registerStatusMap[registerCardDisplay.status] || '未知状态' }}
+                  {{
+                    registerStatusMap[registerCardDisplay.status] || '未知状态'
+                  }}
                 </div>
               </div>
 
@@ -715,7 +744,8 @@ const getSexText = (sex) => {
               <div
                 :class="{
                   'bg-red-100 text-red-800': registerCardDisplay.is_pay === 0,
-                  'bg-green-100 text-green-800': registerCardDisplay.is_pay === 1,
+                  'bg-green-100 text-green-800':
+                    registerCardDisplay.is_pay === 1,
                 }"
                 class="rounded-full px-2 py-1 text-xs font-medium"
               >
@@ -728,7 +758,9 @@ const getSexText = (sex) => {
             >
               <div class="flex items-center gap-1">
                 <i class="fas fa-user text-xs"></i>
-                <span>{{ registerCardDisplay.user_patient?.name || '未知' }}</span>
+                <span>{{
+                  registerCardDisplay.user_patient?.name || '未知'
+                }}</span>
               </div>
               <div class="flex items-center gap-1">
                 <i class="fas fa-birthday-cake text-xs"></i>
@@ -736,7 +768,9 @@ const getSexText = (sex) => {
               </div>
               <div class="flex items-center gap-1">
                 <i class="fas fa-venus-mars text-xs"></i>
-                <span>{{ getSexText(registerCardDisplay.user_patient?.sex) }}</span>
+                <span>{{
+                  getSexText(registerCardDisplay.user_patient?.sex)
+                }}</span>
               </div>
               <div class="flex items-center gap-1">
                 <i class="fas fa-phone text-xs"></i>
@@ -790,7 +824,9 @@ const getSexText = (sex) => {
               </span>
             </div>
             <div v-if="registerCardDrugRows.length" class="space-y-2">
-              <div class="font-medium text-gray-600 dark:text-gray-300">所选药品：</div>
+              <div class="font-medium text-gray-600 dark:text-gray-300">
+                所选药品：
+              </div>
               <div
                 v-for="row in registerCardDrugRows"
                 :key="row.key"
@@ -805,7 +841,9 @@ const getSexText = (sex) => {
                   :preview="{ src: row.image }"
                 />
                 <div class="min-w-0 flex-1">
-                  <div class="text-gray-800 dark:text-gray-100">{{ row.name || '药品' }}</div>
+                  <div class="text-gray-800 dark:text-gray-100">
+                    {{ row.name || '药品' }}
+                  </div>
                   <div
                     v-if="row.specification"
                     class="text-xs text-gray-400 dark:text-gray-500"
@@ -813,9 +851,9 @@ const getSexText = (sex) => {
                     {{ row.specification }}
                   </div>
                 </div>
-                <span class="flex-shrink-0 font-medium text-gray-700 dark:text-gray-200"
-                  >×{{ row.quantity }}</span
-                >
+                <span
+                  class="flex-shrink-0 font-medium text-gray-700 dark:text-gray-200"
+                  >×{{ row.quantity }}</span>
               </div>
             </div>
           </div>
@@ -830,14 +868,20 @@ const getSexText = (sex) => {
             </div>
 
             <!-- 接诊/拒诊按钮 - 只在待就诊状态显示 -->
-            <div v-if="registerCardDisplay.status === 1" class="mt-2 flex gap-2">
+            <div
+              v-if="registerCardDisplay.status === 1"
+              class="mt-2 flex gap-2"
+            >
               <Button
                 :loading="registerOperating"
                 class="flex-1"
                 size="small"
                 type="primary"
                 @click="
-                  acceptRegister(registerCardDisplay.id, registerCardDisplay.order_no)
+                  acceptRegister(
+                    registerCardDisplay.id,
+                    registerCardDisplay.order_no,
+                  )
                 "
               >
                 <i class="fas fa-check mr-1"></i>
@@ -849,7 +893,10 @@ const getSexText = (sex) => {
                 danger
                 size="small"
                 @click="
-                  rejectRegister(registerCardDisplay.id, registerCardDisplay.order_no)
+                  rejectRegister(
+                    registerCardDisplay.id,
+                    registerCardDisplay.order_no,
+                  )
                 "
               >
                 <i class="fas fa-times mr-1"></i>
@@ -1017,9 +1064,7 @@ const getSexText = (sex) => {
                 class="text-sm"
               >
                 <span class="w-20 text-gray-500">用药情况：</span>
-                {{
-                  parsedContent.hasUsedDrug === '1' ? '使用过' : '未使用过'
-                }}
+                {{ parsedContent.hasUsedDrug === '1' ? '使用过' : '未使用过' }}
               </p>
 
               <!-- 医生信息 -->
@@ -1034,10 +1079,7 @@ const getSexText = (sex) => {
         </div>
 
         <!-- 系统消息/价格更新卡片 (type=9) -->
-        <div
-          v-else-if="message.message_type === 9"
-          class="system-message-card"
-        >
+        <div v-else-if="message.message_type === 9" class="system-message-card">
           <div
             v-if="parsedContent?.type === 'price_update'"
             class="price-update-card"
@@ -1050,7 +1092,7 @@ const getSexText = (sex) => {
             </div>
             <div class="price-update-content">
               <p class="price-message">{{ parsedContent.message }}</p>
-              
+
               <!-- 订单信息 -->
               <div class="order-info">
                 <div class="info-item">
@@ -1070,7 +1112,13 @@ const getSexText = (sex) => {
                     运费
                   </span>
                   <span class="price-value shipping-fee">
-                    <span v-if="parsedContent.is_free_shipping === 1 || parsedContent.is_free_shipping === '1'" class="free-shipping-tag">
+                    <span
+                      v-if="
+                        parsedContent.is_free_shipping === 1 ||
+                        parsedContent.is_free_shipping === '1'
+                      "
+                      class="free-shipping-tag"
+                    >
                       <i class="fas fa-check-circle"></i>
                       包邮
                     </span>
@@ -1131,9 +1179,7 @@ const getSexText = (sex) => {
 
         <!-- 通话消息 -->
         <div
-          v-else-if="
-            message.message_type === 6 || message.message_type === 7
-          "
+          v-else-if="message.message_type === 6 || message.message_type === 7"
           class="call-message"
         >
           <div class="call-info">
@@ -1148,9 +1194,18 @@ const getSexText = (sex) => {
           </div>
         </div>
 
-        <!-- 文本消息 -->
-        <div v-else class="whitespace-pre-wrap text-base leading-relaxed">
-          <span v-html="formatTextWithLinks(parsedContent || message.message_content || message.content || '')"></span>
+        <!-- 文本消息：字号/行高随密度 -->
+        <div v-else class="bubble-text whitespace-pre-wrap">
+          <span
+            v-html="
+              formatTextWithLinks(
+                parsedContent ||
+                  message.message_content ||
+                  message.content ||
+                  '',
+              )
+            "
+          ></span>
         </div>
       </div>
 
@@ -1180,10 +1235,30 @@ const getSexText = (sex) => {
 </template>
 
 <style scoped>
+/* 行间距、气泡内边距、正文、图片宽度均读父级 chat-layout 密度变量 */
+.message-row {
+  gap: var(--chat-msg-gap, 10px);
+  margin-bottom: var(--chat-msg-mb, 10px);
+}
+
+.message-bubble-pad {
+  padding: var(--chat-bubble-pad, 10px);
+}
+
+.bubble-text {
+  font-size: var(--chat-text-size, 14px);
+  line-height: var(--chat-text-leading, 1.5);
+}
+
+.image-message {
+  width: var(--chat-image-max, 240px);
+  max-width: 100%;
+}
+
 .message-bubble {
   position: relative;
   max-width: 100%;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   transition: all 0.2s ease;
 }
 
@@ -1195,49 +1270,50 @@ const getSexText = (sex) => {
 .bubble-bg {
   background: linear-gradient(135deg, #4361ee, #3f37c9);
 }
+
 .bubble-bg.dark {
   background: linear-gradient(135deg, #4361ee, #3f37c9);
 }
 
 .message-bubble.received.bubble-bg {
-  background: white;
   color: #1a202c;
+  background: white;
   border: 1px solid #e2e8f0;
   border-bottom-left-radius: 4px;
 }
 
 .message-bubble.received.dark.bubble-bg {
-  background: #374151;
   color: #f7fafc;
+  background: #374151;
   border-color: #4b5563;
 }
 
 .video-message {
   position: relative;
-  border-radius: 12px;
-  overflow: hidden;
   max-width: 300px;
+  overflow: hidden;
+  border-radius: 12px;
 }
 
 .video-thumbnail {
+  display: block;
   width: 100%;
   height: auto;
   max-height: 200px;
   object-fit: cover;
-  display: block;
 }
 
 .video-overlay {
   position: absolute;
   inset: 0;
-  background: linear-gradient(
-    to bottom,
-    transparent 0%,
-    rgba(0, 0, 0, 0.3) 100%
-  );
   display: flex;
   align-items: center;
   justify-content: center;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgb(0 0 0 / 30%) 100%
+  );
   opacity: 0;
   transition: opacity 0.3s ease;
 }
@@ -1247,34 +1323,34 @@ const getSexText = (sex) => {
 }
 
 .play-button {
-  width: 60px;
-  height: 60px;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  width: 60px;
+  height: 60px;
   font-size: 24px;
+  color: white;
+  background: rgb(0 0 0 / 70%);
+  border-radius: 50%;
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
 }
 
 .play-button:hover {
-  background: rgba(0, 0, 0, 0.8);
+  background: rgb(0 0 0 / 80%);
   transform: scale(1.1);
 }
 
 .video-duration {
   position: absolute;
-  bottom: 8px;
   right: 8px;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
+  bottom: 8px;
   padding: 2px 6px;
-  border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
+  color: white;
+  background: rgb(0 0 0 / 70%);
+  border-radius: 4px;
 }
 
 .call-message {
@@ -1286,8 +1362,8 @@ const getSexText = (sex) => {
 
 .call-info {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   font-weight: 500;
 }
 
@@ -1306,42 +1382,42 @@ const getSexText = (sex) => {
 }
 
 .url-preview {
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background: white;
   display: flex;
+  gap: 12px;
   align-items: flex-start;
   padding: 12px;
-  gap: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  transition: all 0.3s ease;
 }
 
 .url-preview:hover {
   border-color: #4361ee;
+  box-shadow: 0 8px 20px rgb(67 97 238 / 15%);
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.15);
 }
 
 .message-bubble.sent .url-preview {
-  border-color: rgba(255, 255, 255, 0.3);
-  background: rgba(255, 255, 255, 0.1);
+  background: rgb(255 255 255 / 10%);
+  border-color: rgb(255 255 255 / 30%);
   backdrop-filter: blur(10px);
 }
 
 .message-bubble.received.dark .url-preview {
-  border-color: #4b5563;
   background: #4b5563;
+  border-color: #4b5563;
 }
 
 .url-favicon {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  width: 20px;
+  height: 20px;
 }
 
 .url-favicon img {
@@ -1357,15 +1433,15 @@ const getSexText = (sex) => {
 }
 
 .url-title {
-  font-weight: 600;
-  font-size: 14px;
-  margin-bottom: 4px;
-  color: #1a202c;
-  line-height: 1.4;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  margin-bottom: 4px;
   overflow: hidden;
+  -webkit-line-clamp: 2;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #1a202c;
+  -webkit-box-orient: vertical;
 }
 
 .message-bubble.sent .url-title {
@@ -1377,18 +1453,18 @@ const getSexText = (sex) => {
 }
 
 .url-description {
-  font-size: 12px;
-  color: #64748b;
-  margin-bottom: 4px;
-  line-height: 1.3;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  margin-bottom: 4px;
   overflow: hidden;
+  -webkit-line-clamp: 2;
+  font-size: 12px;
+  line-height: 1.3;
+  color: #64748b;
+  -webkit-box-orient: vertical;
 }
 
 .message-bubble.sent .url-description {
-  color: rgba(255, 255, 255, 0.8);
+  color: rgb(255 255 255 / 80%);
 }
 
 .message-bubble.received.dark .url-description {
@@ -1397,12 +1473,12 @@ const getSexText = (sex) => {
 
 .url-domain {
   font-size: 11px;
-  color: #94a3b8;
   font-weight: 500;
+  color: #94a3b8;
 }
 
 .message-bubble.sent .url-domain {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgb(255 255 255 / 70%);
 }
 
 .message-bubble.received.dark .url-domain {
@@ -1410,11 +1486,11 @@ const getSexText = (sex) => {
 }
 
 .url-thumbnail {
+  flex-shrink: 0;
   width: 60px;
   height: 60px;
-  flex-shrink: 0;
-  border-radius: 8px;
   overflow: hidden;
+  border-radius: 8px;
 }
 
 .url-thumbnail img {
@@ -1440,7 +1516,7 @@ const getSexText = (sex) => {
 }
 
 .message-bubble.sent :deep(.text-link) {
-  color: rgba(255, 255, 255, 0.9);
+  color: rgb(255 255 255 / 90%);
 }
 
 .message-bubble.sent :deep(.text-link:hover) {
@@ -1482,11 +1558,13 @@ const getSexText = (sex) => {
 
 .price-update-card {
   @apply rounded-xl border border-orange-200 bg-gradient-to-r from-orange-50 to-amber-50 p-4 shadow-sm dark:border-orange-700 dark:from-orange-900/30 dark:to-amber-900/30;
+
   transition: all 0.3s ease;
 }
 
 .price-update-card:hover {
   @apply shadow-md;
+
   transform: translateY(-2px);
 }
 
@@ -1600,9 +1678,9 @@ const getSexText = (sex) => {
 /* 图片和视频消息发送样式 */
 .message-bubble.sent .image-message,
 .message-bubble.sent .video-message {
-  opacity: 0.9;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgb(255 255 255 / 20%);
   border-radius: 12px;
+  opacity: 0.9;
 }
 
 /* 通话消息发送样式 */
diff --git a/apps/web-antd/src/views/business/chat/components/MessageInput.vue b/apps/web-antd/src/views/business/chat/components/MessageInput.vue
index c6511caf..05a77eee 100644
--- a/apps/web-antd/src/views/business/chat/components/MessageInput.vue
+++ b/apps/web-antd/src/views/business/chat/components/MessageInput.vue
@@ -1,9 +1,13 @@
 <script setup>
-import { ref, provide, nextTick, onMounted, onUnmounted, computed } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, provide, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import { message, Modal } from 'ant-design-vue';
-import { PlusOutlined, CloseOutlined } from '@ant-design/icons-vue';
+
+import { usePrescriptionStore } from '#/store/prescription';
+import { getTransferPrescriptionByRegisterApi } from '#/views/business/chat/api/transferPrescription';
+import TransferPrescriptionViewDrawer from '#/views/doctor/online-consultation/components/TransferPrescriptionViewDrawer.vue';
 
 import { useFileUpload } from '../composables/useFileUpload.ts';
 import { useRecording } from '../composables/useRecording.ts';
@@ -11,21 +15,38 @@ import { useChatStore } from '../stores/chat.ts';
 import { useThemeStore } from '../stores/theme.ts';
 import { useUserStore } from '../stores/user.ts';
 import { sendMessage } from '../utils/request.ts';
-import { usePrescriptionStore } from '#/store/prescription';
-import { getTransferPrescriptionByRegisterApi } from '#/views/business/chat/api/transferPrescription';
-import TransferPrescriptionViewDrawer from '#/views/doctor/online-consultation/components/TransferPrescriptionViewDrawer.vue';
 
+// 定义 props
+const props = defineProps({
+  currentFriend: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+// 定义 emits
+const emit = defineEmits([
+  'sendMessage',
+  'openPrescription', // 添加开方事件
+  'end-consultation-success', // 结束接诊成功事件
+  'transfer-import-success', // 转接方导入成功事件
+]);
 // 根据路由判断是在线复诊-药店还是在线复诊-诊所
 const route = useRoute();
 const isClinicModule = computed(() => {
   return route.path.includes('online-consultation-clinic');
 });
 
-// 动态导入对应的API和组件
-import { endConsultation as endConsultationPharmacy, getDrugsByRegisterId as getDrugsByRegisterIdPharmacy } from '#/views/doctor/online-consultation/api/index';
-import { endConsultation as endConsultationClinic, getDrugsByRegisterId as getDrugsByRegisterIdClinic } from '#/views/doctor/online-consultation-clinic/api/index';
-import QuickReplyBubblesPharmacy from '#/views/doctor/online-consultation/components/QuickReplyBubbles.vue';
+import {
+  endConsultation as endConsultationClinic,
+  getDrugsByRegisterId as getDrugsByRegisterIdClinic,
+} from '#/views/doctor/online-consultation-clinic/api/index';
 import QuickReplyBubblesClinic from '#/views/doctor/online-consultation-clinic/components/QuickReplyBubbles.vue';
+// 动态导入对应的API和组件
+import {
+  endConsultation as endConsultationPharmacy,
+  getDrugsByRegisterId as getDrugsByRegisterIdPharmacy,
+} from '#/views/doctor/online-consultation/api/index';
+import QuickReplyBubblesPharmacy from '#/views/doctor/online-consultation/components/QuickReplyBubbles.vue';
 
 // 根据模块选择对应的API和组件
 const endConsultation = computed(() => {
@@ -33,25 +54,22 @@ const endConsultation = computed(() => {
 });
 
 const getDrugsByRegisterId = computed(() => {
-  return isClinicModule.value ? getDrugsByRegisterIdClinic : getDrugsByRegisterIdPharmacy;
+  return isClinicModule.value
+    ? getDrugsByRegisterIdClinic
+    : getDrugsByRegisterIdPharmacy;
 });
 
 const QuickReplyBubbles = computed(() => {
-  return isClinicModule.value ? QuickReplyBubblesClinic : QuickReplyBubblesPharmacy;
+  return isClinicModule.value
+    ? QuickReplyBubblesClinic
+    : QuickReplyBubblesPharmacy;
 });
 
+import { prepareImageForUpload } from '#/utils/prepare-image-upload';
+
 import CustomTextarea from './CustomTextarea.vue';
 import EmojiPicker from './EmojiPicker.vue';
 import FileUploadPreview from './FileUploadPreview.vue';
-import { prepareImageForUpload } from '#/utils/prepare-image-upload';
-
-// 定义 props
-const props = defineProps({
-  currentFriend: {
-    type: Object,
-    default: () => ({})
-  }
-});
 
 const userStore = useUserStore();
 const chatStore = useChatStore();
@@ -104,7 +122,7 @@ const sendUploadedFile = () => {
     room_id: chatStore.currentFriend.room_id,
     read: true,
     duration: 0,
-    isSent: true,  // 标记为自己发送的消息，确保显示在右侧
+    isSent: true, // 标记为自己发送的消息，确保显示在右侧
   };
 
   chatStore.addMessage(messageObj, userStore.currentUser.doctor_id);
@@ -113,7 +131,7 @@ const sendUploadedFile = () => {
   sendMessage({
     senderId: userStore.currentUser.doctor_id,
     receiverId: chatStore.currentFriend.id,
-    roomId: chatStore.currentFriend.room_id,  // 添加房间ID
+    roomId: chatStore.currentFriend.room_id, // 添加房间ID
     type: uploadPreview.value.type,
     content: uploadPreview.value.url,
   }).catch((error) => {
@@ -339,14 +357,6 @@ onUnmounted(() => {
   window.removeEventListener('audioRecorded', handleAudioRecorded);
 });
 
-// 定义 emits
-const emit = defineEmits([
-  'sendMessage',
-  'openPrescription', // 添加开方事件
-  'end-consultation-success', // 结束接诊成功事件
-  'transfer-import-success' // 转接方导入成功事件
-]);
-
 // 开方功能触发函数
 const handleOpenPrescription = () => {
   // 获取当前会话的register_id，这里假设可以通过某种方式获取
@@ -383,8 +393,14 @@ const handleAddPatientProductsToPrescription = async () => {
     const registerId = chatStore.currentFriend?.register_id;
     if (registerId) {
       // 根据模块选择对应的存储前缀
-      const storagePrefix = isClinicModule.value ? 'onlineConsultationClinic-' : 'onlineConsultation-';
-      prescriptionStore.initializePrescription(registerId, false, storagePrefix);
+      const storagePrefix = isClinicModule.value
+        ? 'onlineConsultationClinic-'
+        : 'onlineConsultation-';
+      prescriptionStore.initializePrescription(
+        registerId,
+        false,
+        storagePrefix,
+      );
     } else {
       message.warning('请先接诊患者');
       return;
@@ -394,7 +410,10 @@ const handleAddPatientProductsToPrescription = async () => {
   // 获取诊所ID
   let storeId = prescriptionStore.myStoreId;
   if (!storeId || storeId === 0) {
-    if (prescriptionStore.myStoreList && prescriptionStore.myStoreList.length > 0) {
+    if (
+      prescriptionStore.myStoreList &&
+      prescriptionStore.myStoreList.length > 0
+    ) {
       storeId = prescriptionStore.myStoreList[0].id;
     } else {
       message.warning('请先选择诊所');
@@ -405,8 +424,9 @@ const handleAddPatientProductsToPrescription = async () => {
   try {
     // 根据 register_id 获取药品信息
     const res = await getDrugsByRegisterId.value(
-      prescriptionStore.currentRegisterId || chatStore.currentFriend?.register_id,
-      storeId
+      prescriptionStore.currentRegisterId ||
+        chatStore.currentFriend?.register_id,
+      storeId,
     );
     const drugList = res?.result || res?.data || res || [];
 
@@ -427,7 +447,11 @@ const handleAddPatientProductsToPrescription = async () => {
     if (addedCount > 0) {
       message.success(`已成功添加 ${addedCount} 个药品到处方单`);
       // 触发打开处方模态框事件
-      emit('openPrescription', prescriptionStore.currentRegisterId || chatStore.currentFriend?.register_id);
+      emit(
+        'openPrescription',
+        prescriptionStore.currentRegisterId ||
+          chatStore.currentFriend?.register_id,
+      );
     } else {
       message.warning('所有药品已在处方中');
     }
@@ -459,7 +483,7 @@ const handleEndConsultation = () => {
         await endConsultationFn({
           register_id: registerId,
           doctor_id: userStore.currentUser?.doctor_id || '39',
-          reason: '医生主动结束'
+          reason: '医生主动结束',
         });
 
         message.success('结束接诊成功');
@@ -468,7 +492,7 @@ const handleEndConsultation = () => {
         console.error('结束接诊失败:', error);
         message.error('结束接诊失败，请重试');
       }
-    }
+    },
   });
 };
 
@@ -500,18 +524,22 @@ const handleOpenTransferView = async () => {
 const handleTransferImportSuccess = (prescriptionData) => {
   // 触发打开处方模态框的事件
   emit('transfer-import-success', prescriptionData);
-  emit('openPrescription', transferRegisterId.value || chatStore.currentFriend?.register_id);
+  emit(
+    'openPrescription',
+    transferRegisterId.value || chatStore.currentFriend?.register_id,
+  );
 };
-
 </script>
 
 <template>
-  <div class="message-input-container flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+  <div
+    class="message-input-container flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700"
+  >
     <!-- 快速回复气泡（仅在线复诊场景显示） -->
     <component
       :is="QuickReplyBubbles"
       v-if="chatStore.currentFriend"
-      :doctor-id="'32'"
+      doctor-id="32"
       @select-reply="handleQuickReplySelect"
     />
 
@@ -527,7 +555,7 @@ const handleTransferImportSuccess = (prescriptionData) => {
         title="开方"
       >
         <i class="fas fa-file-medical"></i>
-<!--        <i class="fas fa-prescription"></i>-->
+        <!--        <i class="fas fa-prescription"></i>-->
       </button>
       <button
         class="function-btn"
@@ -536,13 +564,13 @@ const handleTransferImportSuccess = (prescriptionData) => {
       >
         <i class="fas fa-image"></i>
       </button>
-<!--      <button-->
-<!--        class="function-btn"-->
-<!--        @click="triggerFileInput('video')"-->
-<!--        title="发送视频"-->
-<!--      >-->
-<!--        <i class="fas fa-video"></i>-->
-<!--      </button>-->
+      <!--      <button-->
+      <!--        class="function-btn"-->
+      <!--        @click="triggerFileInput('video')"-->
+      <!--        title="发送视频"-->
+      <!--      >-->
+      <!--        <i class="fas fa-video"></i>-->
+      <!--      </button>-->
       <button
         :class="{ active: showEmojiPicker }"
         class="function-btn"
@@ -551,18 +579,18 @@ const handleTransferImportSuccess = (prescriptionData) => {
       >
         <i class="fas fa-smile"></i>
       </button>
-<!--      <button-->
-<!--        :class="{ recording: isRecording }"-->
-<!--        class="function-btn record-btn"-->
-<!--        title="按住录音"-->
-<!--        @mousedown="startRecording"-->
-<!--        @mouseleave="stopRecording"-->
-<!--        @mouseup="stopRecording"-->
-<!--        @touchend="stopRecording"-->
-<!--        @touchstart="startRecording"-->
-<!--      >-->
-<!--        <i class="fas fa-microphone"></i>-->
-<!--      </button>-->
+      <!--      <button-->
+      <!--        :class="{ recording: isRecording }"-->
+      <!--        class="function-btn record-btn"-->
+      <!--        title="按住录音"-->
+      <!--        @mousedown="startRecording"-->
+      <!--        @mouseleave="stopRecording"-->
+      <!--        @mouseup="stopRecording"-->
+      <!--        @touchend="stopRecording"-->
+      <!--        @touchstart="startRecording"-->
+      <!--      >-->
+      <!--        <i class="fas fa-microphone"></i>-->
+      <!--      </button>-->
       <!-- 添加药品按钮（仅在线复诊场景显示） -->
       <button
         v-if="showOnlineConsultationButtons"
@@ -646,9 +674,9 @@ const handleTransferImportSuccess = (prescriptionData) => {
 
 <style scoped>
 .message-input-container {
-  padding: 20px;
   position: relative;
-  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  padding: var(--chat-input-pad, 12px);
+  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
 }
 
 .dark .message-input-container {
@@ -658,14 +686,14 @@ const handleTransferImportSuccess = (prescriptionData) => {
 .input-container {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--chat-input-gap, 10px);
 }
 
 .toolbar {
   display: flex;
   align-items: center;
-  padding: 8px;
-  border-top: 1px solid #e2e8f0;
+  padding: var(--chat-toolbar-pad, 4px) 0;
+  border-top: none;
 }
 
 .dark .toolbar {
@@ -673,15 +701,15 @@ const handleTransferImportSuccess = (prescriptionData) => {
 }
 
 .function-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 5px 10px;
-  border-radius: 4px;
-  margin-right: 5px;
   display: flex;
   align-items: center;
+  padding: 5px 10px;
+  margin-right: 5px;
   color: #666;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 4px;
 }
 
 .dark .function-btn {
@@ -697,8 +725,8 @@ const handleTransferImportSuccess = (prescriptionData) => {
 }
 
 .prescription-button {
-  color: #455cda;
   font-weight: 500;
+  color: #455cda;
 }
 
 .prescription-button:hover {
@@ -706,33 +734,33 @@ const handleTransferImportSuccess = (prescriptionData) => {
 }
 
 .end-consultation-btn {
-  color: #ff4d4f;
   font-weight: 500;
+  color: #ff4d4f;
 }
 
 .end-consultation-btn:hover {
-  background-color: #fff1f0;
   color: #ff4d4f;
+  background-color: #fff1f0;
 }
 
 .dark .end-consultation-btn:hover {
-  background-color: rgba(255, 77, 79, 0.2);
   color: #ff4d4f;
+  background-color: rgb(255 77 79 / 20%);
 }
 
 .transfer-view-btn {
-  color: #f97316;
   font-weight: 500;
+  color: #f97316;
 }
 
 .transfer-view-btn:hover {
-  background-color: #fff7ed;
   color: #f97316;
+  background-color: #fff7ed;
 }
 
 .dark .transfer-view-btn:hover {
-  background-color: rgba(249, 115, 22, 0.2);
   color: #f97316;
+  background-color: rgb(249 115 22 / 20%);
 }
 
 .function-buttons {
@@ -743,38 +771,40 @@ const handleTransferImportSuccess = (prescriptionData) => {
 
 .function-btn {
   position: relative;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  border: none;
-  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
-  color: #64748b;
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  width: var(--chat-fn-btn, 36px);
+  height: var(--chat-fn-btn, 36px);
+  padding: 0;
+  margin-right: 6px;
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  font-size: var(--chat-fn-font, 15px);
+  color: #64748b;
+  cursor: pointer;
+  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .function-btn:hover {
-  background: linear-gradient(135deg, #4361ee, #3f37c9);
   color: white;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  box-shadow: 0 8px 20px rgb(67 97 238 / 30%);
   transform: translateY(-2px) scale(1.05);
-  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
 }
 
 .function-btn.active {
-  background: linear-gradient(135deg, #4361ee, #3f37c9);
   color: white;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
   transform: scale(1.1);
 }
 
 .function-btn.recording {
-  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
   color: white;
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
   animation: pulse-recording 1s infinite;
 }
 
@@ -782,9 +812,11 @@ const handleTransferImportSuccess = (prescriptionData) => {
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.1);
   }
+
   100% {
     transform: scale(1);
   }
@@ -794,22 +826,23 @@ const handleTransferImportSuccess = (prescriptionData) => {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   width: 60px;
   height: 60px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
+  border: 2px solid rgb(255 255 255 / 30%);
   border-radius: 50%;
+  transform: translate(-50%, -50%);
   animation: wave-expand 1.5s infinite;
 }
 
 @keyframes wave-expand {
   0% {
-    transform: translate(-50%, -50%) scale(0.8);
     opacity: 1;
+    transform: translate(-50%, -50%) scale(0.8);
   }
+
   100% {
-    transform: translate(-50%, -50%) scale(1.5);
     opacity: 0;
+    transform: translate(-50%, -50%) scale(1.5);
   }
 }
 
@@ -819,8 +852,8 @@ const handleTransferImportSuccess = (prescriptionData) => {
   left: 50%;
   width: 0;
   height: 0;
+  background: rgb(255 255 255 / 30%);
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.3);
   transform: translate(-50%, -50%);
   transition: all 0.6s ease;
 }
@@ -831,20 +864,20 @@ const handleTransferImportSuccess = (prescriptionData) => {
 }
 
 .dark .function-btn {
-  background: linear-gradient(135deg, #374151, #4b5563);
   color: #9ca3af;
+  background: linear-gradient(135deg, #374151, #4b5563);
 }
 
 .dark .function-btn:hover {
-  background: linear-gradient(135deg, #4361ee, #3f37c9);
   color: white;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
 }
 
 .input-section {
-  display: flex;
-  align-items: end;
-  gap: 12px;
   position: relative;
+  display: flex;
+  gap: var(--chat-input-gap, 10px);
+  align-items: end;
 }
 
 .message-textarea {
@@ -853,32 +886,33 @@ const handleTransferImportSuccess = (prescriptionData) => {
 
 .send-btn {
   position: relative;
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
-  border: none;
-  background: linear-gradient(135deg, #4361ee, #3f37c9);
-  color: white;
-  cursor: pointer;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  width: var(--chat-send-btn, 40px);
+  height: var(--chat-send-btn, 40px);
   overflow: hidden;
-  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
+  font-size: var(--chat-send-font, 15px);
+  color: white;
+  cursor: pointer;
+  background: linear-gradient(135deg, #4361ee, #3f37c9);
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px 12px rgb(67 97 238 / 30%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .send-btn:hover:not(:disabled) {
+  box-shadow: 0 8px 20px rgb(67 97 238 / 40%);
   transform: translateY(-2px) scale(1.05);
-  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
 }
 
 .send-btn:disabled {
-  background: #94a3b8;
   cursor: not-allowed;
-  transform: none;
+  background: #94a3b8;
   box-shadow: none;
+  transform: none;
 }
 
 .send-ripple {
@@ -887,8 +921,8 @@ const handleTransferImportSuccess = (prescriptionData) => {
   left: 50%;
   width: 0;
   height: 0;
+  background: rgb(255 255 255 / 40%);
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.4);
   transform: translate(-50%, -50%);
   transition: all 0.6s ease;
 }
@@ -901,23 +935,4 @@ const handleTransferImportSuccess = (prescriptionData) => {
 .hidden {
   display: none;
 }
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .function-buttons {
-    gap: 8px;
-  }
-
-  .function-btn {
-    width: 40px;
-    height: 40px;
-    font-size: 16px;
-  }
-
-  .send-btn {
-    width: 48px;
-    height: 48px;
-    font-size: 16px;
-  }
-}
 </style>
diff --git a/apps/web-antd/src/views/business/chat/components/MessageList.vue b/apps/web-antd/src/views/business/chat/components/MessageList.vue
index cb47b93a..23645018 100644
--- a/apps/web-antd/src/views/business/chat/components/MessageList.vue
+++ b/apps/web-antd/src/views/business/chat/components/MessageList.vue
@@ -4,16 +4,16 @@ import { nextTick, onMounted, ref, watch } from 'vue';
 import { MessageOutlined } from '@ant-design/icons-vue';
 import { Spin } from 'ant-design-vue';
 
+import { getTransferAssistantConfig } from '#/views/system/transfer-question/api';
+
 import { useChatStore } from '../stores/chat.ts';
 import { useUserStore } from '../stores/user.ts';
-import { getTransferAssistantConfig } from '#/views/system/transfer-question/api';
 import MessageBubble from './MessageBubble.vue';
 
+const emit = defineEmits(['open-prescription', 'transfer-import-success']);
 const userStore = useUserStore();
 const chatStore = useChatStore();
 
-const emit = defineEmits(['open-prescription', 'transfer-import-success']);
-
 const messagesContainer = ref(null);
 const loadingMessages = ref(false);
 const loadingOlderMessages = ref(false); // 加载历史消息状态
@@ -57,13 +57,17 @@ const getSenderInfo = (message) => {
   if (senderId === 'doctor_assistant') {
     return {
       nick_name: assistantConfig.value.name,
-      avatar: assistantConfig.value.avatar || assistantConfig.value.name.charAt(0),
+      avatar:
+        assistantConfig.value.avatar || assistantConfig.value.name.charAt(0),
       color: '#4cc9f0',
     };
   }
 
   // 如果是当前医生发送的消息
-  if (senderId === userStore.currentUser.doctor_id || senderId === `doctor-${userStore.currentUser.doctor_id}`) {
+  if (
+    senderId === userStore.currentUser.doctor_id ||
+    senderId === `doctor-${userStore.currentUser.doctor_id}`
+  ) {
     return {
       nick_name: userStore.currentUser.nick_name,
       avatar: userStore.currentUser.nick_name.charAt(0),
@@ -117,7 +121,6 @@ const loadOlderMessages = async () => {
 
     // 生成模拟的历史消息
     chatStore.generateOldMessages();
-
   } finally {
     loadingOlderMessages.value = false;
   }
@@ -130,11 +133,7 @@ const handleScroll = () => {
   const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value;
 
   // 滚动到顶部时加载更多
-  if (
-    scrollTop < 100 &&
-    !loadingOlderMessages.value &&
-    chatStore.hasMore
-  ) {
+  if (scrollTop < 100 && !loadingOlderMessages.value && chatStore.hasMore) {
     loadOlderMessages();
   }
 };
@@ -172,7 +171,7 @@ onMounted(() => {
 <template>
   <div
     ref="messagesContainer"
-    class="message-list-background flex-1 overflow-y-auto bg-gray-50 p-5 dark:bg-gray-900 min-h-0"
+    class="message-list-background flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900 min-h-0"
     @scroll="handleScroll"
   >
     <Spin :spinning="loadingMessages" tip="加载消息中...">
@@ -200,17 +199,22 @@ onMounted(() => {
           没有更多消息了
         </div>
 
+        <!-- 条间距由 MessageBubble.message-row 的 --chat-msg-mb 控制，外层不再叠 mb-6 -->
         <div
           v-for="(msg, index) in chatStore.messages"
           :key="msg.id || index"
-          class="clear-both mb-6"
+          class="clear-both"
         >
           <MessageBubble
             :is-sent="msg.isSent"
             :message="msg"
             :sender-info="getSenderInfo(msg)"
-            @open-prescription="(registerId) => emit('open-prescription', registerId)"
-            @transfer-import-success="(data) => emit('transfer-import-success', data)"
+            @open-prescription="
+              (registerId) => emit('open-prescription', registerId)
+            "
+            @transfer-import-success="
+              (data) => emit('transfer-import-success', data)
+            "
           />
         </div>
       </div>
@@ -218,8 +222,9 @@ onMounted(() => {
   </div>
 </template>
 
-<style>
+<style scoped>
 .message-list-background {
+  padding: var(--chat-list-pad, 12px);
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.03"><rect width="100" height="100" fill="none"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="currentColor"/></svg>');
   background-size: 200px 200px;
 }
diff --git a/apps/web-antd/src/views/business/chat/stores/layoutDensity.ts b/apps/web-antd/src/views/business/chat/stores/layoutDensity.ts
new file mode 100644
index 00000000..807b4038
--- /dev/null
+++ b/apps/web-antd/src/views/business/chat/stores/layoutDensity.ts
@@ -0,0 +1,72 @@
+import { computed, ref } from 'vue';
+
+import { defineStore } from 'pinia';
+
+/**
+ * 在线接诊聊天区布局密度（大 / 中 / 小）
+ * - 默认中：兼顾可读与消息可视高度
+ * - 持久化到 localStorage，切换会话/刷新后保持
+ */
+export type ChatLayoutDensity = 'lg' | 'md' | 'sm';
+
+const STORAGE_KEY = 'chatLayoutDensity';
+
+/** 下拉选项：大=宽松(接近原尺寸)、中=默认压缩、小=紧凑 IM */
+export const CHAT_LAYOUT_DENSITY_OPTIONS: {
+  label: string;
+  value: ChatLayoutDensity;
+}[] = [
+  { label: '大', value: 'lg' },
+  { label: '中', value: 'md' },
+  { label: '小', value: 'sm' },
+];
+
+/** 各密度对应的头像像素（Ant Avatar 需数字 size，不能只靠 CSS） */
+const AVATAR_SIZE_MAP: Record<ChatLayoutDensity, number> = {
+  sm: 32,
+  md: 36,
+  lg: 48,
+};
+
+/** 悬浮按钮尺寸 */
+const FLOAT_BTN_SIZE_MAP: Record<ChatLayoutDensity, number> = {
+  sm: 40,
+  md: 44,
+  lg: 56,
+};
+
+function readStoredDensity(): ChatLayoutDensity {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (saved === 'sm' || saved === 'md' || saved === 'lg') {
+    return saved;
+  }
+  return 'md';
+}
+
+export const useLayoutDensityStore = defineStore('chatLayoutDensity', () => {
+  const density = ref<ChatLayoutDensity>(readStoredDensity());
+
+  const avatarSize = computed(() => AVATAR_SIZE_MAP[density.value]);
+  const floatBtnSize = computed(() => FLOAT_BTN_SIZE_MAP[density.value]);
+  const densityClass = computed(() => `chat-layout--${density.value}`);
+
+  /**
+   * 切换布局密度并写入缓存
+   * 为什么：医生习惯不同，大屏偏大、笔记本偏小，需可调且跨刷新保留
+   */
+  function setDensity(next: ChatLayoutDensity) {
+    if (next !== 'sm' && next !== 'md' && next !== 'lg') {
+      return;
+    }
+    density.value = next;
+    localStorage.setItem(STORAGE_KEY, next);
+  }
+
+  return {
+    density,
+    avatarSize,
+    floatBtnSize,
+    densityClass,
+    setDensity,
+  };
+});
diff --git a/apps/web-antd/src/views/business/clinic-salesperson/earnings.vue b/apps/web-antd/src/views/business/clinic-salesperson/earnings.vue
index d28756e2..45953b37 100644
--- a/apps/web-antd/src/views/business/clinic-salesperson/earnings.vue
+++ b/apps/web-antd/src/views/business/clinic-salesperson/earnings.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
+/**
+ * 诊所业务员「我的收益」页
+ * 展示基本信息、推广二维码，以及累计获客/服务费/待结算/已结算四项汇总。
+ * 卡片统一用 GlassCard，避免再引入 antd Card（构建期也会因标签不匹配失败）。
+ */
 import { onMounted, ref } from 'vue';
 
-import { Page, useVbenModal } from "@vben/common-ui";
+import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Card, Col, Image, Row, Spin } from 'ant-design-vue';
+import { Col, Image, Row, Spin } from 'ant-design-vue';
 
-import { getSelfMyInfoApi } from '#/views/business/clinic-salesperson/api';
-
-import QrCodePreview from '#/views/business/store/settings/components/SalespersonQrCodePreview.vue';
+import { GlassCard } from '#/components/glass-card';
 import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
+import { getSelfMyInfoApi } from '#/views/business/clinic-salesperson/api';
+import QrCodePreview from '#/views/business/store/settings/components/SalespersonQrCodePreview.vue';
+
 const [QrCodePreviewModal, QrCodePreviewApi] = useVbenModal({
   connectedComponent: QrCodePreview,
 });
@@ -24,7 +30,7 @@ onMounted(async () => {
   }
 });
 
-
+/** 打开推广二维码预览弹窗（复用门店设置里的预览组件） */
 function openQrCode(item: any) {
   QrCodePreviewApi.setData({ values: item });
   QrCodePreviewApi.open();
@@ -36,55 +42,70 @@ function openQrCode(item: any) {
     <QrCodePreviewModal />
     <Spin :spinning="loading">
       <template v-if="info">
-        <Card class="mb-4" title="基本信息">
+        <GlassCard
+          class="mb-4"
+          title="基本信息"
+          icon="lucide:user-round"
+          padding="lg"
+        >
           <p>姓名：{{ info.salesperson?.nick_name }}</p>
-          <p>手机：<SensitiveText :record="info.salesperson" field="phone" /></p>
+          <p>
+            手机：
+            <SensitiveText :record="info.salesperson" field="phone" />
+          </p>
           <p>所属诊所：{{ info.store?.name }}</p>
           <div v-if="info.qr_code" class="mt-3">
             <p class="mb-2">推广二维码</p>
-            <Image :src="info.qr_code" :preview="false" :width="160" @click="openQrCode({
-              qr_code: {
-                qr_code: info.qr_code,
-                store: info.store,
-              },
-              type: 'salesperson',
-              nick_name: info.salesperson?.nick_name,
-            })" />
+            <Image
+              :src="info.qr_code"
+              :preview="false"
+              :width="160"
+              @click="
+                openQrCode({
+                  qr_code: {
+                    qr_code: info.qr_code,
+                    store: info.store,
+                  },
+                  type: 'salesperson',
+                  nick_name: info.salesperson?.nick_name,
+                })
+              "
+            />
           </div>
-        </Card>
+        </GlassCard>
 
         <Row :gutter="16">
           <Col :span="6">
-            <Card>
-              <div class="text-gray-500">累计获客</div>
-              <div class="text-2xl font-semibold text-blue-600">
+            <GlassCard padding="md" :specular="false" tone="primary">
+              <div class="text-[hsl(var(--muted-foreground))]">累计获客</div>
+              <div class="text-2xl font-semibold text-[hsl(var(--primary))]">
                 {{ info.stats?.user_number ?? 0 }}
               </div>
-            </Card>
+            </GlassCard>
           </Col>
           <Col :span="6">
-            <Card>
-              <div class="text-gray-500">累计服务费</div>
-              <div class="text-2xl font-semibold">
+            <GlassCard padding="md" :specular="false" tone="primary">
+              <div class="text-[hsl(var(--muted-foreground))]">累计服务费</div>
+              <div class="text-2xl font-semibold text-[hsl(var(--foreground))]">
                 ¥{{ info.stats?.money ?? '0.00' }}
               </div>
-            </Card>
+            </GlassCard>
           </Col>
           <Col :span="6">
-            <Card>
-              <div class="text-gray-500">待结算</div>
-              <div class="text-2xl font-semibold text-orange-600">
+            <GlassCard padding="md" :specular="false" tone="warning">
+              <div class="text-[hsl(var(--muted-foreground))]">待结算</div>
+              <div class="text-2xl font-semibold text-[hsl(var(--warning))]">
                 ¥{{ info.stats?.pending_amount ?? '0.00' }}
               </div>
-            </Card>
+            </GlassCard>
           </Col>
           <Col :span="6">
-            <Card>
-              <div class="text-gray-500">已结算</div>
-              <div class="text-2xl font-semibold text-green-600">
+            <GlassCard padding="md" :specular="false" tone="success">
+              <div class="text-[hsl(var(--muted-foreground))]">已结算</div>
+              <div class="text-2xl font-semibold text-[hsl(var(--success))]">
                 ¥{{ info.stats?.settled_amount ?? '0.00' }}
               </div>
-            </Card>
+            </GlassCard>
           </Col>
         </Row>
       </template>
diff --git a/apps/web-antd/src/views/business/clinic-salesperson/index.vue b/apps/web-antd/src/views/business/clinic-salesperson/index.vue
index 471be17a..24d61519 100644
--- a/apps/web-antd/src/views/business/clinic-salesperson/index.vue
+++ b/apps/web-antd/src/views/business/clinic-salesperson/index.vue
@@ -5,27 +5,28 @@ import { Page, useVbenModal } from '@vben/common-ui';
 
 import {
   Button,
-  Card,
   Empty,
   Input,
+  message,
   Popover,
+  Skeleton,
   Space,
   Tag,
-  message,
 } from 'ant-design-vue';
 
+import { GlassCard } from '#/components/glass-card';
+import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
 import {
   getPlatformSalespersonListApi,
   openAdminAccountApi,
 } from '#/views/business/store/settings/api';
-import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
-import QrCodePreview from '#/views/business/store/settings/components/SalespersonQrCodePreview.vue';
-import SalespersonCommissionDrawer from '#/views/system/store/components/SalespersonCommissionDrawer.vue';
 import SalespersonCreateModal from '#/views/business/store/settings/components/SalespersonCreateModal.vue';
-import SalespersonUserBindDrawer from '#/views/business/store/settings/components/SalespersonUserBindDrawer.vue';
 import SalespersonInvitedDrawer from '#/views/business/store/settings/components/SalespersonInvitedDrawer.vue';
+import QrCodePreview from '#/views/business/store/settings/components/SalespersonQrCodePreview.vue';
+import SalespersonUserBindDrawer from '#/views/business/store/settings/components/SalespersonUserBindDrawer.vue';
+import SalespersonCommissionDrawer from '#/views/system/store/components/SalespersonCommissionDrawer.vue';
 
-const listData = ref<{ total: number; items: any[] }>({ total: 0, items: [] });
+const listData = ref<{ items: any[]; total: number; }>({ total: 0, items: [] });
 const loading = ref(false);
 const storeKeyword = ref('');
 const nickName = ref('');
@@ -34,16 +35,18 @@ const page = ref(1);
 const pageSize = ref(20);
 const openingAccountId = ref(0);
 
-const commissionDrawerRef = ref<InstanceType<typeof SalespersonCommissionDrawer>>();
+const commissionDrawerRef =
+  ref<InstanceType<typeof SalespersonCommissionDrawer>>();
 const invitedDrawerRef = ref<InstanceType<typeof SalespersonInvitedDrawer>>();
 
 const [QrCodePreviewModal, QrCodePreviewApi] = useVbenModal({
   connectedComponent: QrCodePreview,
 });
 
-const [SalespersonCreateModalComponent, SalespersonCreateModalApi] = useVbenModal({
-  connectedComponent: SalespersonCreateModal,
-});
+const [SalespersonCreateModalComponent, SalespersonCreateModalApi] =
+  useVbenModal({
+    connectedComponent: SalespersonCreateModal,
+  });
 
 async function getList() {
   loading.value = true;
@@ -165,82 +168,94 @@ function tcmBaseLabel(type: number) {
       v-else
       class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
     >
-      <Card
-        v-for="item in listData.items"
-        :key="item.id"
-        :loading="loading"
-        class="rounded-lg shadow-sm"
-      >
-        <div class="mb-3 flex items-start justify-between gap-2">
-          <div>
-            <h3 class="text-lg font-semibold">{{ item.nick_name || '未知' }}</h3>
-            <p class="text-sm text-gray-500">{{ item.store_name }}</p>
-          </div>
-          <Space direction="vertical" align="end" size="small">
-            <Tag :color="splitTypeColor(item.split_type)">
-              西药·{{ splitTypeLabel(item.split_type) }}
-              <template v-if="Number(item.split_type) === 1">
-                · {{ item.split }}%
-              </template>
-            </Tag>
-            <Tag v-if="Number(item.tcm_split) > 0" color="green">
-              中药·{{ item.tcm_split }}%·{{ tcmBaseLabel(item.tcm_base_type) }}
-            </Tag>
-            <Tag :color="item.has_admin_account ? 'success' : 'default'">
-              {{ item.has_admin_account ? '已开通后台' : '未开通后台' }}
-            </Tag>
-          </Space>
-        </div>
-
-        <div class="mb-3 space-y-1 text-sm text-gray-600">
-          <div><SensitiveText :record="item" field="phone" /></div>
-          <div v-if="item.parent_nick_name" class="text-xs text-gray-500">
-            邀请人：{{ item.parent_nick_name }}
-          </div>
-          <Popover trigger="click" title="获客记录">
-            <template #content>
-              <div class="w-[420px]">
-                <SalespersonUserBindDrawer :open="true" :salesperson-id="item.id" />
-              </div>
-            </template>
-            <div class="flex cursor-pointer justify-between hover:text-blue-500">
-              <span>累计获客</span>
-              <span class="font-medium text-blue-600">{{
-                item.count?.user_number ?? 0
-              }}</span>
+      <!-- 推广员卡片：玻璃外壳 + 悬停微光；Skeleton 承接原 antd Card 的 loading 占位，刷新列表时行为不变 -->
+      <GlassCard v-for="item in listData.items" :key="item.id" hoverable>
+        <Skeleton :loading="loading" active>
+          <div class="mb-3 flex items-start justify-between gap-2">
+            <div>
+              <h3 class="text-lg font-semibold">
+                {{ item.nick_name || '未知' }}
+              </h3>
+              <p class="text-sm text-[hsl(var(--muted-foreground))]">
+                {{ item.store_name }}
+              </p>
             </div>
-          </Popover>
-          <div class="flex justify-between">
-            <span>待结算</span>
-            <span class="text-orange-600">¥{{ item.count?.pending_amount || '0.00' }}</span>
+            <Space direction="vertical" align="end" size="small">
+              <Tag :color="splitTypeColor(item.split_type)">
+                西药·{{ splitTypeLabel(item.split_type) }}
+                <template v-if="Number(item.split_type) === 1">
+                  · {{ item.split }}%
+                </template>
+              </Tag>
+              <Tag v-if="Number(item.tcm_split) > 0" color="green">
+                中药·{{ item.tcm_split }}%·{{
+                  tcmBaseLabel(item.tcm_base_type)
+                }}
+              </Tag>
+              <Tag :color="item.has_admin_account ? 'success' : 'default'">
+                {{ item.has_admin_account ? '已开通后台' : '未开通后台' }}
+              </Tag>
+            </Space>
           </div>
-        </div>
 
-        <Space wrap>
-          <Button size="small" @click="openEditModal(item)">编辑</Button>
-          <Button size="small" type="primary" @click="openCommission(item)">
-            服务费与结算
-          </Button>
-          <Button size="small" @click="invitedDrawerRef?.open(item)">
-            下级推广员
-          </Button>
-          <Button
-            v-if="item.qr_code?.qr_code"
-            size="small"
-            @click="openQrCode(item)"
-          >
-            二维码
-          </Button>
-          <Button
-            v-if="!item.has_admin_account"
-            size="small"
-            :loading="openingAccountId === item.id"
-            @click="handleOpenAdminAccount(item)"
-          >
-            开通后台
-          </Button>
-        </Space>
-      </Card>
+          <div class="mb-3 space-y-1 text-sm text-[hsl(var(--foreground)/0.8)]">
+            <div><SensitiveText :record="item" field="phone" /></div>
+            <div
+              v-if="item.parent_nick_name"
+              class="text-xs text-[hsl(var(--muted-foreground))]"
+            >
+              邀请人：{{ item.parent_nick_name }}
+            </div>
+            <Popover trigger="click" title="获客记录">
+              <template #content>
+                <div class="w-[420px]">
+                  <SalespersonUserBindDrawer
+                    :open="true"
+                    :salesperson-id="item.id"
+                  />
+                </div>
+              </template>
+              <div
+                class="flex cursor-pointer justify-between hover:text-[hsl(var(--primary))]"
+              >
+                <span>累计获客</span>
+                <span class="font-medium text-[hsl(var(--primary))]">{{
+                  item.count?.user_number ?? 0
+                }}</span>
+              </div>
+            </Popover>
+            <div class="flex justify-between">
+              <span>待结算</span>
+              <span class="text-[hsl(var(--warning))]">¥{{ item.count?.pending_amount || '0.00' }}</span>
+            </div>
+          </div>
+
+          <Space wrap>
+            <Button size="small" @click="openEditModal(item)">编辑</Button>
+            <Button size="small" type="primary" @click="openCommission(item)">
+              服务费与结算
+            </Button>
+            <Button size="small" @click="invitedDrawerRef?.open(item)">
+              下级推广员
+            </Button>
+            <Button
+              v-if="item.qr_code?.qr_code"
+              size="small"
+              @click="openQrCode(item)"
+            >
+              二维码
+            </Button>
+            <Button
+              v-if="!item.has_admin_account"
+              size="small"
+              :loading="openingAccountId === item.id"
+              @click="handleOpenAdminAccount(item)"
+            >
+              开通后台
+            </Button>
+          </Space>
+        </Skeleton>
+      </GlassCard>
     </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/business/order/prescription/api/index.ts b/apps/web-antd/src/views/business/order/prescription/api/index.ts
index c05649ca..6361e147 100644
--- a/apps/web-antd/src/views/business/order/prescription/api/index.ts
+++ b/apps/web-antd/src/views/business/order/prescription/api/index.ts
@@ -25,3 +25,14 @@ export async function getPrescriptionSourceApi(data: any) {
 export async function getPrescriptionCheckStatusApi(data: any) {
   return requestClient.get<any>(`${prefix}check-status`, { params: data });
 }
+
+/**
+ * 管理端修正异常处方状态（过期未审 → 待审/已拒绝）
+ */
+export async function changePrescriptionStatusApi(data: {
+  id: number;
+  reason: string;
+  status: number;
+}) {
+  return requestClient.post<any>(`${prefix}change-status`, data);
+}
diff --git a/apps/web-antd/src/views/business/order/prescription/components/PrescriptionOrderCardList.vue b/apps/web-antd/src/views/business/order/prescription/components/PrescriptionOrderCardList.vue
index 0b613ea6..f05c78fe 100644
--- a/apps/web-antd/src/views/business/order/prescription/components/PrescriptionOrderCardList.vue
+++ b/apps/web-antd/src/views/business/order/prescription/components/PrescriptionOrderCardList.vue
@@ -8,15 +8,23 @@
  */
 import type { ActionItem } from '#/components/table-action';
 
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
 
 import { Empty, message, Spin } from 'ant-design-vue';
 
-import { TableAction } from '#/components/table-action';
+import { CardActions } from '#/components/table-action';
 import { pillStyle, tagColorHex } from '#/utils/tagColor';
 
 import { getPrescriptionListApi } from '../api';
 import {
+  canChangePrescriptionStatus,
   PRESCRIPTION_IS_ONLINE_FALLBACK,
   PRESCRIPTION_IS_ONLINE_MAP,
   PRESCRIPTION_ORDER_TYPE_MAP,
@@ -29,6 +37,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
+  /** 异常处方改状态 */
+  changeStatus: [row: Record<string, any>];
   /** 查看处方详情（复用父级弹窗） */
   openDetail: [prescriptionId: number];
   /** 处方溯源（复用父级弹窗） */
@@ -63,25 +73,41 @@ function statusMeta(row: Record<string, any>) {
 
 /** 处方来源元数据（未知兜底线下） */
 function isOnlineMeta(row: Record<string, any>) {
-  return PRESCRIPTION_IS_ONLINE_MAP[Number(row?.is_online)] ?? PRESCRIPTION_IS_ONLINE_FALLBACK;
+  return (
+    PRESCRIPTION_IS_ONLINE_MAP[Number(row?.is_online)] ??
+    PRESCRIPTION_IS_ONLINE_FALLBACK
+  );
 }
 
-/** 行操作：与列表 #action 槽一致（查看处方/处方溯源），通过 emit 复用父级弹窗 */
-function buildActions(row: Record<string, any>): ActionItem[] {
-  return [
-    {
-      label: '查看处方',
-      type: 'link',
-      icon: 'marketeq:eye',
-      onClick: () => emit('openDetail', Number(row.id)),
-    },
-    {
-      label: '处方溯源',
-      type: 'link',
-      icon: 'mdi:timeline-text',
-      onClick: () => emit('openSource', Number(row.id)),
-    },
-  ];
+/** 行操作：主按钮 + 更多（CardActions），与列表语义一致 */
+function buildCardActions(row: Record<string, any>): {
+  actions: ActionItem[];
+  dropDownActions: ActionItem[];
+} {
+  return {
+    actions: [
+      {
+        label: '查看处方',
+        type: 'link',
+        icon: 'marketeq:eye',
+        onClick: () => emit('openDetail', Number(row.id)),
+      },
+      {
+        label: '处方溯源',
+        type: 'link',
+        icon: 'mdi:timeline-text',
+        onClick: () => emit('openSource', Number(row.id)),
+      },
+      {
+        label: '改状态',
+        type: 'link',
+        icon: 'ant-design:edit-outlined',
+        ifShow: canChangePrescriptionStatus(row),
+        onClick: () => emit('changeStatus', row),
+      },
+    ],
+    dropDownActions: [],
+  };
 }
 
 /**
@@ -99,10 +125,12 @@ async function fetchPage(targetPage: number, reset = false) {
     const res = await getPrescriptionListApi({
       page: targetPage,
       pageSize: 12,
-      ...(props.formValues || {}),
+      ...props.formValues,
     });
     if (seq !== requestSeq) return;
-    items.value = reset ? (res?.items ?? []) : [...items.value, ...(res?.items ?? [])];
+    items.value = reset
+      ? (res?.items ?? [])
+      : [...items.value, ...(res?.items ?? [])];
     page.value = res?.page ?? targetPage;
     pageCount.value = res?.page_count ?? 1;
   } catch (error) {
@@ -133,7 +161,7 @@ async function refreshKeepPage() {
     const res = await getPrescriptionListApi({
       page: 1,
       pageSize: loaded,
-      ...(props.formValues || {}),
+      ...props.formValues,
     });
     if (seq !== requestSeq) return;
     items.value = res?.items ?? [];
@@ -194,7 +222,7 @@ onBeforeUnmount(() => {
       <div v-if="items.length" class="rx-card-grid">
         <div v-for="row in items" :key="row.id" class="rx-card">
           <!-- 角落径向荧光（与提现管理统计岛同款质感装饰） -->
-          <div class="rx-card__glow" />
+          <div class="rx-card__glow"></div>
           <!-- 头部：诊所名（可点）+ 状态彩点 -->
           <div class="rx-card__head">
             <button
@@ -203,10 +231,14 @@ onBeforeUnmount(() => {
               class="rx-card__store"
               @click="emit('openStore', Number(row.store?.id || row.store_id))"
             >
-              <span class="rx-card__store-name">{{ row.store?.name || '—' }}</span>
+              <span class="rx-card__store-name">{{
+                row.store?.name || '—'
+              }}</span>
               <span class="rx-card__store-arrow">›</span>
             </button>
-            <span v-else class="rx-card__store-name">{{ row.store?.name || '—' }}</span>
+            <span v-else class="rx-card__store-name">{{
+              row.store?.name || '—'
+            }}</span>
             <span
               v-if="statusMeta(row)"
               class="rx-card__status"
@@ -227,7 +259,11 @@ onBeforeUnmount(() => {
           </div>
           <!-- 语义胶囊：处方类型 / 来源 -->
           <div class="rx-card__pills">
-            <span v-if="typeMeta(row)" class="rx-pill" :style="pillStyle(typeMeta(row)!.color)">
+            <span
+              v-if="typeMeta(row)"
+              class="rx-pill"
+              :style="pillStyle(typeMeta(row)!.color)"
+            >
               {{ typeMeta(row)!.label }}
             </span>
             <span class="rx-pill" :style="pillStyle(isOnlineMeta(row).color)">
@@ -246,21 +282,31 @@ onBeforeUnmount(() => {
             </span>
           </div>
           <!-- 拒绝原因（仅已拒绝时显示） -->
-          <div v-if="Number(row.status) === 2 && row.reject_reason" class="rx-card__reject">
+          <div
+            v-if="Number(row.status) === 2 && row.reject_reason"
+            class="rx-card__reject"
+          >
             拒绝原因：{{ row.reject_reason }}
           </div>
           <!-- 弹性占位：高度富余时把 footer 推到底（同行等高卡对齐），紧凑时保底 8px 间距 -->
           <div class="rx-card__spacer"></div>
-          <!-- 底部操作：与列表 #action 槽同语义 -->
+          <!-- 底部操作：主按钮 + 更多，对齐商品订单 CardActions -->
           <div class="rx-card__footer">
-            <TableAction :actions="buildActions(row)" :drop-down-actions="[]" />
+            <CardActions
+              :actions="buildCardActions(row).actions"
+              :drop-down-actions="buildCardActions(row).dropDownActions"
+              :max-visible="1"
+            />
           </div>
         </div>
       </div>
       <Empty v-else-if="!loading" description="暂无处方" />
     </Spin>
     <div ref="sentinelEl" class="h-8"></div>
-    <div v-if="loadingMore" class="py-3 text-center text-xs text-[hsl(var(--muted-foreground))]">
+    <div
+      v-if="loadingMore"
+      class="py-3 text-center text-xs text-[hsl(var(--muted-foreground))]"
+    >
       加载中…
     </div>
     <div
@@ -275,6 +321,7 @@ onBeforeUnmount(() => {
 <style scoped>
 .rx-card-scroll {
   height: 100%;
+
   /* 左右留 6px：卡片 hover 阴影不被容器裁出切边 */
   padding: 4px 6px 20px;
   overflow: auto;
@@ -299,9 +346,9 @@ onBeforeUnmount(() => {
     hsl(var(--primary) / 4%),
     hsl(var(--card, var(--background)))
   );
-  backdrop-filter: blur(8px);
   border: 1px solid hsl(var(--border));
   border-radius: 12px;
+  backdrop-filter: blur(8px);
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
@@ -324,7 +371,11 @@ onBeforeUnmount(() => {
   width: 110px;
   height: 110px;
   pointer-events: none;
-  background: radial-gradient(circle, hsl(var(--primary) / 18%) 0%, transparent 70%);
+  background: radial-gradient(
+    circle,
+    hsl(var(--primary) / 18%) 0%,
+    transparent 70%
+  );
   opacity: 0.4;
   transition: opacity 0.2s ease;
 }
@@ -342,9 +393,9 @@ onBeforeUnmount(() => {
 
 .rx-card__store {
   display: inline-flex;
-  min-width: 0;
-  align-items: center;
   gap: 2px;
+  align-items: center;
+  min-width: 0;
   padding: 0;
   cursor: pointer;
   background: none;
@@ -353,11 +404,11 @@ onBeforeUnmount(() => {
 
 .rx-card__store-name {
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 600;
-  letter-spacing: -0.2px;
   color: hsl(var(--foreground));
-  text-overflow: ellipsis;
+  letter-spacing: -0.2px;
   white-space: nowrap;
 }
 
@@ -444,10 +495,10 @@ onBeforeUnmount(() => {
 
 .rx-kv > em {
   overflow: hidden;
+  text-overflow: ellipsis;
   font-style: normal;
   font-weight: 500;
   color: hsl(var(--foreground));
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/apps/web-antd/src/views/business/order/prescription/components/change-status-modal.vue b/apps/web-antd/src/views/business/order/prescription/components/change-status-modal.vue
new file mode 100644
index 00000000..99e0ff7f
--- /dev/null
+++ b/apps/web-antd/src/views/business/order/prescription/components/change-status-modal.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+/**
+ * 异常处方改状态弹窗：仅过期未审 / 超时自动失效 → 待审(0) 或 已拒绝(2)
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, FormItem, Input, message, Select } from 'ant-design-vue';
+
+import { changePrescriptionStatusApi } from '../api';
+import { PRESCRIPTION_CHANGE_STATUS_OPTIONS } from '../config/constants';
+
+const row = ref<null | Record<string, any>>(null);
+const targetStatus = ref<number>(0);
+const reason = ref('');
+const onSuccess = ref<(() => void) | null>(null);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    if (!row.value?.id) return;
+    if (reason.value.trim() === '') {
+      message.error('请填写修改原因');
+      return;
+    }
+    modalApi.setState({ confirmLoading: true, loading: true });
+    try {
+      await changePrescriptionStatusApi({
+        id: Number(row.value.id),
+        status: Number(targetStatus.value),
+        reason: reason.value.trim(),
+      });
+      message.success('状态已更新');
+      onSuccess.value?.();
+      modalApi.close();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      modalApi.setState({ confirmLoading: false, loading: false });
+    }
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        onSuccess?: () => void;
+        row: Record<string, any>;
+      }>();
+      row.value = data?.row ?? null;
+      onSuccess.value = data?.onSuccess ?? null;
+      // 超时已拒绝默认改回待审；过期待审默认仍待审（重建队列）
+      targetStatus.value = Number(row.value?.status) === 2 ? 0 : 0;
+      reason.value = '';
+    } else {
+      row.value = null;
+      onSuccess.value = null;
+      reason.value = '';
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="修正处方状态" class="w-[480px]">
+    <Form layout="vertical">
+      <FormItem label="处方号">
+        <span>{{ row?.prescription_no || row?.id || '—' }}</span>
+      </FormItem>
+      <FormItem label="目标状态" required>
+        <Select
+          v-model:value="targetStatus"
+          :options="PRESCRIPTION_CHANGE_STATUS_OPTIONS"
+          class="w-full"
+          placeholder="请选择"
+        />
+      </FormItem>
+      <FormItem label="修改原因" required>
+        <Input.TextArea
+          v-model:value="reason"
+          :rows="3"
+          placeholder="说明系统异常或处理依据，便于事后追溯"
+          allow-clear
+        />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/business/order/prescription/config/constants.ts b/apps/web-antd/src/views/business/order/prescription/config/constants.ts
index b79764e7..66711699 100644
--- a/apps/web-antd/src/views/business/order/prescription/config/constants.ts
+++ b/apps/web-antd/src/views/business/order/prescription/config/constants.ts
@@ -52,3 +52,32 @@ export const PRESCRIPTION_IS_ONLINE_OPTIONS = [
   { label: '在线复诊（药店）', value: 3 },
   { label: '线下就诊', value: 0 },
 ];
+
+/** 异常处方可改目标状态（禁止直接改已通过） */
+export const PRESCRIPTION_CHANGE_STATUS_OPTIONS = [
+  { label: '待审核', value: 0 },
+  { label: '已拒绝', value: 2 },
+];
+
+/**
+ * 是否可改状态：过期仍待审，或超时自动失效的已拒绝
+ * auto_expire_time 后端已格式化为时间字符串时用 Date 解析
+ */
+export function canChangePrescriptionStatus(row: Record<string, any>): boolean {
+  const status = Number(row?.status);
+  const rejectReason = String(row?.reject_reason || '');
+  if (status === 2 && rejectReason.includes('处方审核超时自动失效')) {
+    return true;
+  }
+  if (status !== 0) return false;
+  const raw = row?.auto_expire_time;
+  if (raw == null || raw === '' || raw === 0) return false;
+  let expireTs = 0;
+  if (typeof raw === 'number') {
+    expireTs = raw;
+  } else {
+    const t = Date.parse(String(raw).replaceAll(/-/g, '/'));
+    expireTs = Number.isFinite(t) ? Math.floor(t / 1000) : 0;
+  }
+  return expireTs > 0 && expireTs < Math.floor(Date.now() / 1000);
+}
diff --git a/apps/web-antd/src/views/business/order/prescription/config/search.ts b/apps/web-antd/src/views/business/order/prescription/config/search.ts
index 20092b09..3b86a197 100644
--- a/apps/web-antd/src/views/business/order/prescription/config/search.ts
+++ b/apps/web-antd/src/views/business/order/prescription/config/search.ts
@@ -1,7 +1,7 @@
 import type { VbenFormProps } from '#/adapter/form';
 
-import { getOrderPrescriptionTypeOption } from '#/views/business/order/product-order/api';
 import { monthToTodayRangeString } from '#/utils/search-time-range';
+import { getOrderPrescriptionTypeOption } from '#/views/business/order/product-order/api';
 
 import { PRESCRIPTION_IS_ONLINE_OPTIONS } from './constants';
 
@@ -17,7 +17,8 @@ export const formOptions: VbenFormProps = {
     },
   },
   // 响应式多列：抽出 grid 后 vben form 默认单列（一行一个字段），必须显式给栅格
-  wrapperClass: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+  wrapperClass:
+    'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
   schema: [
     {
       // 放第一位：时间范围有默认值（本月至今），默认收起时必须始终可见，否则用户不知道当前查的是哪段数据
@@ -91,6 +92,31 @@ export const formOptions: VbenFormProps = {
       fieldName: 'is_online',
       label: '处方来源',
     },
+    {
+      // 门店多选：与商品订单同组件，后端 resolveRequestStoreIds + whereIn
+      component: 'StoreMultiSearch',
+      componentProps: {
+        placeholder: '输入名称或拼音首拼',
+      },
+      defaultValue: [],
+      fieldName: 'store_ids',
+      modelPropName: 'value',
+      label: '门店',
+    },
+    {
+      // 是否过期：后端按 auto_expire_time 与当前时间比较（索引范围，无重关联）
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '已过期', value: 1 },
+          { label: '未过期', value: 0 },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'is_expired',
+      label: '是否过期',
+    },
   ],
   // 控制表单是否显示折叠按钮
   showCollapseButton: true,
diff --git a/apps/web-antd/src/views/business/order/prescription/index.vue b/apps/web-antd/src/views/business/order/prescription/index.vue
index 8e8e9e1e..59db3590 100644
--- a/apps/web-antd/src/views/business/order/prescription/index.vue
+++ b/apps/web-antd/src/views/business/order/prescription/index.vue
@@ -17,18 +17,20 @@ import { Button, Tabs, Tag } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { useFreshSearchTime } from '#/composables/use-fresh-search-time';
-import { TableAction } from '#/components/table-action';
-import { monthToTodayRangeString } from '#/utils/search-time-range';
-import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
 import StoreCardModal from '#/components/store-card/StoreCardModal.vue';
 import StoreNameLink from '#/components/store-card/StoreNameLink.vue';
+import { TableAction } from '#/components/table-action';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import { useFreshSearchTime } from '#/composables/use-fresh-search-time';
+import { monthToTodayRangeString } from '#/utils/search-time-range';
 import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
 
 import { getPrescriptionListApi } from './api';
+import ChangeStatusModal from './components/change-status-modal.vue';
 import PrescriptionOrderCardList from './components/PrescriptionOrderCardList.vue';
 import PrescriptionSource from './components/source.vue';
 import {
+  canChangePrescriptionStatus,
   PRESCRIPTION_IS_ONLINE_FALLBACK,
   PRESCRIPTION_IS_ONLINE_MAP,
   PRESCRIPTION_ORDER_TYPE_MAP,
@@ -37,6 +39,10 @@ import {
 import { formOptions } from './config/search';
 import { gridOptions as baseGridOptions } from './config/table';
 
+const cardListRef = ref<InstanceType<typeof PrescriptionOrderCardList> | null>(
+  null,
+);
+
 const hasTopTableDropDownActions = ref(false);
 /** 审核状态 Tab：0待审核 / 1已通过 / 2已拒绝 */
 const statusTab = ref('0');
@@ -89,7 +95,7 @@ async function readLiveSearchValues(): Promise<Record<string, any>> {
   try {
     await nextTick();
     const live = await searchFormApi.getValues();
-    return { ...(live || {}) };
+    return { ...live };
   } catch {
     return { ...searchValues.value };
   }
@@ -141,7 +147,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         /** 始终合并顶部统一搜索条件 + 状态 Tab */
-        query: async ({ page }: { page: { currentPage: number; pageSize: number } }) => {
+        query: async ({
+          page,
+        }: {
+          page: { currentPage: number; pageSize: number };
+        }) => {
           searchValues.value = await readLiveSearchValues();
           return await getPrescriptionListApi({
             page: page.currentPage,
@@ -168,7 +178,8 @@ const freshSearchTime = useFreshSearchTime({
   },
 });
 freshSearchTimeBridge.resetSearchTime = freshSearchTime.resetSearchTime;
-freshSearchTimeBridge.markSearchTimeTouched = freshSearchTime.markSearchTimeTouched;
+freshSearchTimeBridge.markSearchTimeTouched =
+  freshSearchTime.markSearchTimeTouched;
 
 // Tab 切换：列表模式重查（卡片模式由 cardFormValues computed 触发 CardList watch）
 watch(statusTab, () => {
@@ -196,6 +207,10 @@ const [PrescriptionSourceModal, PrescriptionSourceModalApi] = useVbenModal({
   connectedComponent: PrescriptionSource,
 });
 
+const [ChangeStatusModalComp, ChangeStatusModalApi] = useVbenModal({
+  connectedComponent: ChangeStatusModal,
+});
+
 const openPrescriptionDetail = (values: number) => {
   PrescriptionDetailModalApi.setData({ values });
   PrescriptionDetailModalApi.open();
@@ -206,6 +221,52 @@ const openPrescriptionSourceModal = (id: number) => {
   PrescriptionSourceModalApi.open();
 };
 
+/** 操作后刷新：列表保留当前页；卡片走组件 reload（若有）或靠 formValues 触发 */
+function refreshAfterMutation() {
+  if (viewMode.value === 'list') {
+    gridApi.query();
+  } else {
+    (cardListRef.value as any)?.reload?.() ??
+      (cardListRef.value as any)?.refreshKeepPage?.();
+  }
+}
+
+const openChangeStatus = (row: Record<string, any>) => {
+  ChangeStatusModalApi.setData({
+    row,
+    onSuccess: refreshAfterMutation,
+  });
+  ChangeStatusModalApi.open();
+};
+
+/** 列表/卡片共用行操作 */
+function buildRowActions(row: Record<string, any>) {
+  return {
+    actions: [
+      {
+        label: '查看处方',
+        type: 'link' as const,
+        icon: 'marketeq:eye',
+        onClick: () => openPrescriptionDetail(row.id),
+      },
+      {
+        label: '处方溯源',
+        type: 'link' as const,
+        icon: 'mdi:timeline-text',
+        onClick: () => openPrescriptionSourceModal(row.id),
+      },
+      {
+        label: '改状态',
+        type: 'link' as const,
+        icon: 'ant-design:edit-outlined',
+        ifShow: canChangePrescriptionStatus(row),
+        onClick: () => openChangeStatus(row),
+      },
+    ],
+    dropDownActions: [] as any[],
+  };
+}
+
 /** 列表槽用元数据取值 helper：v-if 双重索引无法类型收窄，统一在这里兜底 */
 function rowTypeMeta(row: Record<string, any>) {
   return PRESCRIPTION_ORDER_TYPE_MAP[Number(row?.prescription_type)] ?? null;
@@ -214,7 +275,10 @@ function rowStatusMeta(row: Record<string, any>) {
   return PRESCRIPTION_STATUS_MAP[Number(row?.status)] ?? null;
 }
 function rowIsOnlineMeta(row: Record<string, any>) {
-  return PRESCRIPTION_IS_ONLINE_MAP[Number(row?.is_online)] ?? PRESCRIPTION_IS_ONLINE_FALLBACK;
+  return (
+    PRESCRIPTION_IS_ONLINE_MAP[Number(row?.is_online)] ??
+    PRESCRIPTION_IS_ONLINE_FALLBACK
+  );
 }
 </script>
 
@@ -222,6 +286,7 @@ function rowIsOnlineMeta(row: Record<string, any>) {
   <Page auto-content-height title="处方管理">
     <PrescriptionDetailModal />
     <PrescriptionSourceModal />
+    <ChangeStatusModalComp />
     <StoreCardModalComp />
     <div class="mb-3">
       <Tabs :active-key="statusTab" @change="onStatusTabChange">
@@ -231,7 +296,9 @@ function rowIsOnlineMeta(row: Record<string, any>) {
       </Tabs>
     </div>
     <!-- 顶部统一搜索（双视图共用，替代原 grid 内嵌表单） -->
-    <div class="mb-3 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3">
+    <div
+      class="mb-3 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+    >
       <SearchForm />
     </div>
     <!-- 视图切换：列表 / 卡片看板 -->
@@ -242,9 +309,7 @@ function rowIsOnlineMeta(row: Record<string, any>) {
       <template #toolbar-actions>
         <TableAction :actions="[]" :drop-down-actions="[]">
           <template #more>
-            <Button style="margin-left: 16px">
-              批量操作
-            </Button>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
           </template>
         </TableAction>
       </template>
@@ -266,8 +331,8 @@ function rowIsOnlineMeta(row: Record<string, any>) {
           <Tag v-if="rowStatusMeta(row)" :color="rowStatusMeta(row)!.color">
             {{ rowStatusMeta(row)!.label
             }}<template v-if="row.status === 2 && row.reject_reason">
-              ：{{ row.reject_reason }}</template
-            >
+              ：{{ row.reject_reason }}
+</template>
           </Tag>
         </div>
       </template>
@@ -279,31 +344,20 @@ function rowIsOnlineMeta(row: Record<string, any>) {
       <template #toolbar-tools></template>
       <template #action="{ row }">
         <TableAction
-          :actions="[
-            {
-              label: '查看处方',
-              type: 'link',
-              icon: 'marketeq:eye',
-              onClick: openPrescriptionDetail.bind(null, row.id),
-            },
-            {
-              label: '处方溯源',
-              type: 'link',
-              icon: 'mdi:timeline-text',
-              onClick: openPrescriptionSourceModal.bind(null, row.id),
-            },
-          ]"
-          :drop-down-actions="[]"
+          :actions="buildRowActions(row).actions"
+          :drop-down-actions="buildRowActions(row).dropDownActions"
         />
       </template>
     </Grid>
-    <!-- 卡片看板视图：展示内容与列表一致，弹窗复用父级（纯查看操作，无需操作后刷新句柄） -->
+    <!-- 卡片看板视图：展示内容与列表一致，弹窗复用父级 -->
     <div v-else class="rx-card-wrap">
       <PrescriptionOrderCardList
+        ref="cardListRef"
         :form-values="cardFormValues"
         @open-detail="openPrescriptionDetail"
         @open-source="openPrescriptionSourceModal"
         @open-store="openStoreCard"
+        @change-status="openChangeStatus"
       />
     </div>
   </Page>
diff --git a/apps/web-antd/src/views/business/order/product-order/components/ProductOrderCardList.vue b/apps/web-antd/src/views/business/order/product-order/components/ProductOrderCardList.vue
index 85926306..5075be6b 100644
--- a/apps/web-antd/src/views/business/order/product-order/components/ProductOrderCardList.vue
+++ b/apps/web-antd/src/views/business/order/product-order/components/ProductOrderCardList.vue
@@ -11,12 +11,25 @@
  */
 import { onMounted, ref, watch } from 'vue';
 
-import { Button, Empty, Image, message, Pagination, Spin, Switch, Tag } from 'ant-design-vue';
+import {
+  Button,
+  Empty,
+  Image,
+  message,
+  Pagination,
+  Spin,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
 
-import { CardActions } from '#/components/table-action';
 import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
-import SalespersonCommissionPanel from '#/views/business/order/components/SalespersonCommissionPanel.vue';
+import { CardActions } from '#/components/table-action';
+import {
+  copyShipAddressText,
+  formatShipAddressCopyText,
+} from '#/util/ship-address-copy';
 import { pillStyle, tagColorHex } from '#/utils/tagColor';
+import SalespersonCommissionPanel from '#/views/business/order/components/SalespersonCommissionPanel.vue';
 
 import { getOrderList } from '../api';
 import {
@@ -28,8 +41,7 @@ import {
 } from '../config/constants';
 
 const props = defineProps<{
-  /** 顶部统一搜索条件（含 search_time / patient_keyword / doctor_keyword 等） */
-  formValues?: Record<string, any>;
+  accruingOrderIds?: number[];
   /** 父级构造行操作（与列表 #action 槽同一份定义） */
   buildRowActions: (row: Record<string, any>) => {
     actions: any[];
@@ -38,22 +50,25 @@ const props = defineProps<{
   /** 金额是否可点调价（与列表 price-info 槽一致） */
   canPercentAdjust?: (row: Record<string, any>) => boolean;
   canViewInviterCommission?: boolean;
-  accruingOrderIds?: number[];
+  /** 顶部统一搜索条件（含 search_time / patient_keyword / doctor_keyword 等） */
+  formValues?: Record<string, any>;
   reversingOrderIds?: number[];
 }>();
 
 const emit = defineEmits<{
-  openStore: [storeId: number];
-  openDoctor: [row: Record<string, any>];
-  openUserPatients: [payload: { userId: number; nickname: string; avatarurl: string }];
-  openPatient: [payload: { upId: number; patientName: string }];
-  openWarehouse: [row: Record<string, any>, wh: { id: number; name: string }];
-  toggleFreeShipping: [row: Record<string, any>, checked: boolean];
-  percentAdjust: [row: Record<string, any>];
+  accrueSalesperson: [row: Record<string, any>];
   goRegister: [row: Record<string, any>];
   openChinaErpSyncLog: [row: Record<string, any>];
-  accrueSalesperson: [row: Record<string, any>];
+  openDoctor: [row: Record<string, any>];
+  openPatient: [payload: { patientName: string; upId: number; }];
+  openStore: [storeId: number];
+  openUserPatients: [
+    payload: { avatarurl: string; nickname: string; userId: number; },
+  ];
+  openWarehouse: [row: Record<string, any>, wh: { id: number; name: string }];
+  percentAdjust: [row: Record<string, any>];
   reverseSalesperson: [row: Record<string, any>, salespersonId?: number];
+  toggleFreeShipping: [row: Record<string, any>, checked: boolean];
 }>();
 
 const items = ref<any[]>([]);
@@ -99,12 +114,16 @@ function headTypeMeta(row: Record<string, any>) {
 
 /** 首个商品（商品区首图/首名展示用） */
 function firstItem(row: Record<string, any>) {
-  return Array.isArray(row.product_order_items) ? row.product_order_items[0] : null;
+  return Array.isArray(row.product_order_items)
+    ? row.product_order_items[0]
+    : null;
 }
 
 /** 商品总件数（中药按剂量折算与明细 chips 同口径） */
 function totalPieces(row: Record<string, any>) {
-  const list = Array.isArray(row.product_order_items) ? row.product_order_items : [];
+  const list = Array.isArray(row.product_order_items)
+    ? row.product_order_items
+    : [];
   return list.reduce((sum: number, item: any) => {
     const factor =
       Number(row.prescription_type) === 1 && Number(item.dosage) > 0
@@ -124,6 +143,19 @@ function expressAddress(row: Record<string, any>) {
   return [region, detail].filter(Boolean).join(' ') || '—';
 }
 
+/** 一键复制收货信息 */
+function copyCardShipAddress(row: Record<string, any>) {
+  const text = formatShipAddressCopyText(row.address, {
+    name: row.express_name || row.patient,
+    mobile: row.address?.mobile || row.patient_mobile,
+    express_name: row.express_name,
+    express_mobile: row.express_mobile,
+    express_region: row.express_region,
+    express_address: row.express_address,
+  });
+  void copyShipAddressText(text);
+}
+
 /** 挂号金额（与列表 formatRegisterAmount 同口径） */
 function registerAmount(row: Record<string, any>) {
   if (row.register_id == null || row.register_id === '') return '—';
@@ -156,7 +188,8 @@ function hasPayUser(row: Record<string, any>) {
 /** 代付展示文案：[类型]名字（医生代付回落医生名，就诊人代付回落就诊人名） */
 function payUserText(row: Record<string, any>) {
   const t = Number(row.pay_user_type || 0);
-  const typeLabel = t === 2 ? '医生' : t === 3 ? '就诊人' : t === 1 ? '用户' : '—';
+  const typeLabel =
+    t === 2 ? '医生' : t === 3 ? '就诊人' : t === 1 ? '用户' : '—';
   const nick = String(row.pay_user?.nickname || '').trim();
   let name = nick;
   if (!name && t === 2 && row.doctor?.name) name = String(row.doctor.name);
@@ -205,7 +238,7 @@ async function fetchPage(targetPage: number) {
     const res = await getOrderList({
       page: targetPage,
       pageSize: pageSize.value,
-      ...(props.formValues || {}),
+      ...props.formValues,
     });
     if (seq !== requestSeq) return;
     items.value = res?.items ?? [];
@@ -240,11 +273,11 @@ defineExpose({ reload, refreshKeepPage });
 
 /** 翻页后回到卡片区顶部，避免停在页面最底部看不到新的一页 */
 async function onPageChange(nextPage: number, nextSize: number) {
-  if (nextSize !== pageSize.value) {
+  if (nextSize === pageSize.value) {
+    page.value = nextPage;
+  } else {
     pageSize.value = nextSize;
     page.value = 1;
-  } else {
-    page.value = nextPage;
   }
   await fetchPage(page.value);
   scrollEl.value?.scrollIntoView({ block: 'start' });
@@ -276,10 +309,14 @@ onMounted(() => {
               class="po-card__store"
               @click="emit('openStore', row.store.id)"
             >
-              <span class="po-card__store-name">{{ row.store?.name || '—' }}</span>
+              <span class="po-card__store-name">{{
+                row.store?.name || '—'
+              }}</span>
               <span class="po-card__store-arrow">›</span>
             </button>
-            <span v-else class="po-card__store-name">{{ row.store?.name || '—' }}</span>
+            <span v-else class="po-card__store-name">{{
+              row.store?.name || '—'
+            }}</span>
             <span
               v-if="statusMeta(row)"
               class="po-card__status"
@@ -299,7 +336,11 @@ onMounted(() => {
             <span class="shrink-0">{{ row.created_at || '—' }}</span>
           </div>
           <div class="po-card__pills">
-            <span v-if="headTypeMeta(row)" class="po-pill" :style="pillStyle(headTypeMeta(row)!.color)">
+            <span
+              v-if="headTypeMeta(row)"
+              class="po-pill"
+              :style="pillStyle(headTypeMeta(row)!.color)"
+            >
               {{ headTypeMeta(row)!.label }}
             </span>
             <span class="po-pill" :style="pillStyle(isOnlineMeta(row).color)">
@@ -312,10 +353,18 @@ onMounted(() => {
             >
               代支付
             </span>
-            <span v-if="row.delivery_method === 1" class="po-pill" :style="pillStyle('blue')">
+            <span
+              v-if="row.delivery_method === 1"
+              class="po-pill"
+              :style="pillStyle('blue')"
+            >
               到店自提
             </span>
-            <span v-else-if="row.delivery_method === 0" class="po-pill" :style="pillStyle('green')">
+            <span
+              v-else-if="row.delivery_method === 0"
+              class="po-pill"
+              :style="pillStyle('green')"
+            >
               上门快递
             </span>
             <span
@@ -328,7 +377,10 @@ onMounted(() => {
               {{ row.is_sync_erp === 1 ? 'Erp已同步' : 'Erp未同步' }} ›
             </span>
             <template
-              v-if="Array.isArray(row.delivery_warehouses) && row.delivery_warehouses.length"
+              v-if="
+                Array.isArray(row.delivery_warehouses) &&
+                row.delivery_warehouses.length
+              "
             >
               <button
                 v-for="wh in row.delivery_warehouses"
@@ -360,12 +412,14 @@ onMounted(() => {
               <div class="po-card__goods-name">
                 {{
                   firstItem(row)
-                    ? firstItem(row).display_drug_name || firstItem(row).drug_name
+                    ? firstItem(row).display_drug_name ||
+                      firstItem(row).drug_name
                     : '无商品明细'
                 }}
               </div>
               <div v-if="firstItem(row)" class="po-card__goods-count">
-                {{ row.product_order_items.length }} 种 · 共 {{ totalPieces(row) }} 件
+                {{ row.product_order_items.length }} 种 · 共
+                {{ totalPieces(row) }} 件
                 <span class="po-card__goods-toggle">
                   {{ expandedIds.has(Number(row.id)) ? '收起' : '展开' }}
                   <i :class="expandedIds.has(Number(row.id)) ? 'up' : ''">›</i>
@@ -388,7 +442,11 @@ onMounted(() => {
           </div>
           <!-- 展开后的全部商品 chips -->
           <div
-            v-if="expandedIds.has(Number(row.id)) && Array.isArray(row.product_order_items) && row.product_order_items.length"
+            v-if="
+              expandedIds.has(Number(row.id)) &&
+              Array.isArray(row.product_order_items) &&
+              row.product_order_items.length
+            "
             class="po-card__chips"
           >
             <span
@@ -450,7 +508,7 @@ onMounted(() => {
           <!-- 行5 收货内联行：收件人 + 电话 + 地址一行截断 -->
           <div class="po-card__express">
             <i>收货</i>
-            <span class="truncate">
+            <span class="min-w-0 truncate">
               {{ row.address?.name || row.express_name || row.patient || '—' }}
               <SensitiveText
                 :record="row.address"
@@ -459,9 +517,21 @@ onMounted(() => {
               />
               · {{ expressAddress(row) }}
             </span>
+            <Button
+              v-if="Number(row.delivery_method) !== 1"
+              type="link"
+              size="small"
+              class="shrink-0 px-0"
+              @click.stop="copyCardShipAddress(row)"
+            >
+              复制
+            </Button>
           </div>
           <!-- 行6 推广员内联行（有则显示） -->
-          <div v-if="row.salesperson?.id" class="po-card__express po-card__salesperson">
+          <div
+            v-if="row.salesperson?.id"
+            class="po-card__express po-card__salesperson"
+          >
             <i>推广</i>
             <SalespersonCommissionPanel
               :row="row"
@@ -471,15 +541,21 @@ onMounted(() => {
               @accrue="(r) => emit('accrueSalesperson', r)"
               @reverse="(r, spId) => emit('reverseSalesperson', r, spId)"
             >
-              <div class="po-card__salesperson-inline flex min-w-0 flex-1 items-center gap-1.5">
+              <div
+                class="po-card__salesperson-inline flex min-w-0 flex-1 items-center gap-1.5"
+              >
                 <Image
-                  :src="row.salesperson.avatar || '/img/user-default-avatar.png'"
+                  :src="
+                    row.salesperson.avatar || '/img/user-default-avatar.png'
+                  "
                   :width="16"
                   :height="16"
                   :preview="false"
                   class="shrink-0 rounded-full object-cover"
                 />
-                <span class="truncate">{{ row.salesperson.nick_name || '—' }}</span>
+                <span class="truncate">{{
+                  row.salesperson.nick_name || '—'
+                }}</span>
                 <span class="po-card__salesperson-status">
                   {{ row.salesperson.commission_status_text || '—' }}
                 </span>
@@ -542,7 +618,10 @@ onMounted(() => {
                   checked-children="包邮"
                   un-checked-children="不包邮"
                   size="small"
-                  @change="(checked: any) => emit('toggleFreeShipping', row, Boolean(checked))"
+                  @change="
+                    (checked: any) =>
+                      emit('toggleFreeShipping', row, Boolean(checked))
+                  "
                 />
               </label>
               <!-- 卡片交互与列表解耦：只露出「详情」主操作，其余收进「···」菜单，避免按钮堆叠 -->
@@ -619,9 +698,9 @@ onMounted(() => {
 
 .po-card__store {
   display: inline-flex;
-  min-width: 0;
-  align-items: center;
   gap: 2px;
+  align-items: center;
+  min-width: 0;
   padding: 0;
   cursor: pointer;
   background: none;
@@ -630,10 +709,10 @@ onMounted(() => {
 
 .po-card__store-name {
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 16px;
   font-weight: 600;
   color: hsl(var(--foreground));
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -742,10 +821,10 @@ onMounted(() => {
 
 .po-card__goods-name {
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 15px;
   font-weight: 500;
   color: hsl(var(--foreground));
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -840,9 +919,9 @@ onMounted(() => {
 
 .po-kv > em {
   overflow: hidden;
+  text-overflow: ellipsis;
   font-style: normal;
   color: hsl(var(--foreground));
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -850,9 +929,9 @@ onMounted(() => {
   max-width: 180px;
   padding: 0;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 14px;
   color: hsl(var(--primary));
-  text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   background: none;
@@ -916,6 +995,7 @@ onMounted(() => {
 
 .po-card__amount-parts {
   display: grid;
+
   /* 药品/挂号/诊疗/采购/运费文案短，三列更紧凑不浪费横向空间 */
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
   gap: 4px 12px;
diff --git a/apps/web-antd/src/views/business/order/product-order/components/detail.vue b/apps/web-antd/src/views/business/order/product-order/components/detail.vue
index 0242fdf0..2e698c22 100644
--- a/apps/web-antd/src/views/business/order/product-order/components/detail.vue
+++ b/apps/web-antd/src/views/business/order/product-order/components/detail.vue
@@ -1,19 +1,46 @@
 <script lang="ts" setup>
+import type { QuickDiscountOption } from '#/utils/pricePercentAdjust';
+
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { useUserStore } from '@vben/stores';
 
-import { Button, Card, Descriptions, Image, Modal as AntdModal, Space, Tabs, Tag, message } from 'ant-design-vue';
+import {
+  Modal as AntdModal,
+  Button,
+  Card,
+  Descriptions,
+  Image,
+  message,
+  Space,
+  Tabs,
+  Tag,
+} from 'ant-design-vue';
 
+import {
+  adjustOrderPercent,
+  getOrderPriceAdjustConfig,
+} from '#/api/order/priceAdjust';
+import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
+import {
+  copyShipAddressText,
+  formatShipAddressCopyText,
+} from '#/util/ship-address-copy';
+import { formatDoctorOrderText } from '#/utils/prescriptionDoctorOrder';
+import {
+  formatPriceDiscountLabel,
+  normalizeQuickOptions,
+} from '#/utils/pricePercentAdjust';
 import { retrySettleApi } from '#/views/business/order/api/order-ops';
+import OrderPricePercentAdjustDrawer from '#/views/business/order/components/OrderPricePercentAdjustDrawer.vue';
+import {
+  openOrderPopup,
+  ORDER_POPUP_Z_INDEX,
+} from '#/views/business/order/utils/popup-z-index';
 import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
 
-import OrderPricePercentAdjustDrawer from '#/views/business/order/components/OrderPricePercentAdjustDrawer.vue';
-import { getOrderPriceAdjustConfig, adjustOrderPercent } from '#/api/order/priceAdjust';
-import type { QuickDiscountOption } from '#/utils/pricePercentAdjust';
-import { formatPriceDiscountLabel, normalizeQuickOptions } from '#/utils/pricePercentAdjust';
 import {
   expressDetailByOrderId,
   getOrderInfo,
@@ -21,12 +48,6 @@ import {
   recalculateMarketPriceApi,
   syncLegacyShipmentApi,
 } from '../api';
-import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
-import { formatDoctorOrderText } from '#/utils/prescriptionDoctorOrder';
-import {
-  ORDER_POPUP_Z_INDEX,
-  openOrderPopup,
-} from '#/views/business/order/utils/popup-z-index';
 import LogisticsModal from './logistics-modal.vue';
 
 defineOptions({
@@ -48,11 +69,11 @@ const retrySettling = ref(false);
 /** 从溯源抽屉打开：底下已有溯源，底栏不再重复露出「查看溯源」 */
 const fromTrace = ref(false);
 /** 页面级打开溯源（对齐就诊人：父层不关，子层叠上去） */
-const onOpenTraceFn = ref<null | ((payload: Record<string, any>) => void)>(
+const onOpenTraceFn = ref<((payload: Record<string, any>) => void) | null>(
   null,
 );
 /** 页面级打开处方详情，供底部「打印处方」复用已有打印页 */
-const onOpenPrescriptionFn = ref<null | ((pId: number) => void)>(null);
+const onOpenPrescriptionFn = ref<((pId: number) => void) | null>(null);
 
 /**
  * 超管可见：已支付且未取消/未退款时可重新结算（补齐残缺分账）
@@ -205,8 +226,11 @@ async function handleRecalculateMarketPrice() {
     return;
   }
   try {
-    const preview = await previewRecalculateMarketPriceApi({ order_id: orderId });
-    const oldPrice = preview?.old_market_price ?? data.value?.market_price ?? '0.00';
+    const preview = await previewRecalculateMarketPriceApi({
+      order_id: orderId,
+    });
+    const oldPrice =
+      preview?.old_market_price ?? data.value?.market_price ?? '0.00';
     const newPrice = preview?.expected_market_price ?? '0.00';
     const allBuyZero = Boolean(preview?.all_buy_price_zero);
     AntdModal.confirm({
@@ -228,8 +252,8 @@ async function handleRecalculateMarketPrice() {
         gridApi.value?.reload?.();
       },
     });
-  } catch (err) {
-    console.error(err);
+  } catch (error) {
+    console.error(error);
   }
 }
 
@@ -319,13 +343,15 @@ const packageTabs = computed(() => {
   const fromExpress = Array.isArray((expressDetail.value as any)?.packages)
     ? (expressDetail.value as any).packages
     : [];
-  if (fromExpress.length) return fromExpress;
-  const fromOrder = Array.isArray(data.value?.packages) ? data.value.packages : [];
+  if (fromExpress.length > 0) return fromExpress;
+  const fromOrder = Array.isArray(data.value?.packages)
+    ? data.value.packages
+    : [];
   return fromOrder;
 });
 const activePkg = ref('0');
 /** 详情内「发本包」回调（由列表传入时仅平台包裹可发） */
-const onShipPackage = ref<null | ((warehouseId: number) => void)>(null);
+const onShipPackage = ref<((warehouseId: number) => void) | null>(null);
 
 /**
  * Tab 文案：有仓名才拼括号；空串不兜底「平台/仓」
@@ -362,6 +388,20 @@ function openLogisticsModal() {
   );
 }
 
+/** 一键复制收货信息（名字 手机 省市区+详细） */
+function copyOrderShipAddress() {
+  const row = data.value || {};
+  const text = formatShipAddressCopyText(row.address, {
+    name: row.express_name,
+    mobile: row.address?.mobile || row.express_mobile,
+    express_name: row.express_name,
+    express_mobile: row.express_mobile,
+    express_region: row.express_region,
+    express_address: row.express_address,
+  });
+  void copyShipAddressText(text);
+}
+
 /**
  * 超管手动同步历史运单到分包裹表，成功后刷新详情与物流
  */
@@ -473,7 +513,11 @@ function prescriptionStatusColor() {
         </Descriptions.Item>
         <Descriptions.Item label="采购价">
           {{ data.market_price || '0.00' }} 元
-          <Tag v-if="Number(data.market_price) === 0" color="error" class="ml-1">
+          <Tag
+            v-if="Number(data.market_price) === 0"
+            color="error"
+            class="ml-1"
+          >
             采购价异常
           </Tag>
           <Button
@@ -544,10 +588,18 @@ function prescriptionStatusColor() {
         <Descriptions.Item label="处方类型">
           <Tag v-if="data.prescription_type === 1" color="orange">中药</Tag>
           <Tag v-else-if="data.prescription_type === 2" color="blue">西药</Tag>
-          <Tag v-else-if="data.prescription_type === 3" color="purple">保健食品</Tag>
-          <Tag v-else-if="data.prescription_type === 5" color="pink">产品服务包</Tag>
-          <Tag v-else-if="data.prescription_type === 6" color="cyan">非药品</Tag>
-          <Tag v-else-if="data.prescription_type === 7" color="geekblue">医疗器械</Tag>
+          <Tag v-else-if="data.prescription_type === 3" color="purple">
+保健食品
+</Tag>
+          <Tag v-else-if="data.prescription_type === 5" color="pink">
+产品服务包
+</Tag>
+          <Tag v-else-if="data.prescription_type === 6" color="cyan">
+非药品
+</Tag>
+          <Tag v-else-if="data.prescription_type === 7" color="geekblue">
+医疗器械
+</Tag>
           <Tag v-else>其他</Tag>
         </Descriptions.Item>
         <Descriptions.Item v-if="showPrescriptionStatus" label="处方状态">
@@ -558,7 +610,20 @@ function prescriptionStatusColor() {
       </Descriptions>
 
       <div class="mt-4">
-        <h3>{{ deliveryMethod === 0 ? '收货人' : '就诊人' }}信息</h3>
+        <div class="flex items-center justify-between gap-2">
+          <h3 class="m-0">
+            {{ deliveryMethod === 0 ? '收货人' : '就诊人' }}信息
+          </h3>
+          <Button
+            v-if="deliveryMethod === 0"
+            type="link"
+            size="small"
+            class="px-0"
+            @click="copyOrderShipAddress"
+          >
+            一键复制
+          </Button>
+        </div>
         <Descriptions
           :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
           bordered
@@ -585,19 +650,17 @@ function prescriptionStatusColor() {
           </Descriptions.Item>
           <Descriptions.Item v-if="deliveryMethod === 0" label="配送地址">
             {{
-              (
-                [
-                  data.address?.province,
-                  data.address?.region || data.express_region,
-                  data.address?.detail_address || data.express_address,
-                ]
-                  .filter(Boolean)
-                  .join(' ') ||
-                [data.express_region, data.express_address]
-                  .filter(Boolean)
-                  .join(' ') ||
-                '—'
-              )
+              [
+                data.address?.province,
+                data.address?.region || data.express_region,
+                data.address?.detail_address || data.express_address,
+              ]
+                .filter(Boolean)
+                .join(' ') ||
+              [data.express_region, data.express_address]
+                .filter(Boolean)
+                .join(' ') ||
+              '—'
             }}
           </Descriptions.Item>
           <Descriptions.Item v-else label="自提地址">
@@ -619,7 +682,9 @@ function prescriptionStatusColor() {
               class="tcm-detail-chip w-[220px] max-w-full flex-shrink-0 rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-600 dark:bg-gray-900"
             >
               <div class="font-medium">
-                <Tag v-if="Number(item.type) === 8" color="lime" class="mr-1">辅料</Tag>
+                <Tag v-if="Number(item.type) === 8" color="lime" class="mr-1">
+辅料
+</Tag>
                 【{{ item.drug?.drug_number }}】{{ item.drug_name }}
               </div>
               <div class="mt-1 text-gray-600 dark:text-gray-400">
@@ -661,7 +726,10 @@ function prescriptionStatusColor() {
             </div>
             <div>
               <h4>{{ item.drug_name }}</h4>
-              <p>规格: {{ item.drug.specification || item.drug?.unit?.name || 'g' }}</p>
+              <p>
+                规格:
+                {{ item.drug.specification || item.drug?.unit?.name || 'g' }}
+              </p>
               <p>数量: {{ item.number }}</p>
               <p>单价: {{ item.price }} 元</p>
               <p>
@@ -679,7 +747,14 @@ function prescriptionStatusColor() {
           </div>
         </Card>
       </div>
-      <div class="mt-4" v-if="data.order_type !== 2 && data.order_type !== 3 && data.prescription.content">
+      <div
+        class="mt-4"
+        v-if="
+          data.order_type !== 2 &&
+          data.order_type !== 3 &&
+          data.prescription.content
+        "
+      >
         <h3>处方信息</h3>
         <Descriptions
           :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
@@ -738,7 +813,11 @@ function prescriptionStatusColor() {
           >
             <div
               class="mb-3 flex justify-end"
-              v-if="Number(pkg.is_send) === 0 && Number(pkg.warehouse_id) === 0 && onShipPackage"
+              v-if="
+                Number(pkg.is_send) === 0 &&
+                Number(pkg.warehouse_id) === 0 &&
+                onShipPackage
+              "
             >
               <Button
                 type="primary"
@@ -777,7 +856,12 @@ function prescriptionStatusColor() {
             <div v-else class="text-gray-400 py-2">
               本包裹尚未发货
               <span v-if="Array.isArray(pkg.items) && pkg.items.length">
-                （{{ pkg.items.map((p: any) => p.drug_name || p.name).filter(Boolean).join('、') }}）
+                （{{
+                  pkg.items
+                    .map((p: any) => p.drug_name || p.name)
+                    .filter(Boolean)
+                    .join('、')
+                }}）
               </span>
             </div>
           </Tabs.TabPane>
@@ -815,10 +899,7 @@ function prescriptionStatusColor() {
         <Button v-if="canShowTrace" type="primary" @click="openOrderTrace">
           查看溯源
         </Button>
-        <Button
-          v-if="canPrintPrescription"
-          @click="openPrintPrescription"
-        >
+        <Button v-if="canPrintPrescription" @click="openPrintPrescription">
           打印处方
         </Button>
         <Button
diff --git a/apps/web-antd/src/views/business/order/product-order/components/logistics-modal.vue b/apps/web-antd/src/views/business/order/product-order/components/logistics-modal.vue
index f435fe5e..4a8c0839 100644
--- a/apps/web-antd/src/views/business/order/product-order/components/logistics-modal.vue
+++ b/apps/web-antd/src/views/business/order/product-order/components/logistics-modal.vue
@@ -2,7 +2,7 @@
 /**
  * 独立「物流动态」弹窗：只请求 express-detail，不展示整单其它信息。
  * 仓名为空时 Tab 仅显示「包裹N」，与后端诊所开关抹名约定一致。
- * 已发货包裹展示脱敏收件人/查件手机号，并支持修改手机号与快递单号。
+ * 已发货包裹展示脱敏收件人/查件手机号/收货地址，并支持修改手机号与快递单号。
  * 第三方轨迹查询失败时展示 last_sync_error（快递100返回文案）。
  */
 import { computed, reactive, ref } from 'vue';
@@ -11,21 +11,25 @@ import { useVbenModal } from '@vben/common-ui';
 
 import {
   Alert,
+  Modal as AModal,
   Button,
   Descriptions,
   Form,
   FormItem,
   Input,
-  Modal as AModal,
+  message,
   Spin,
   Tabs,
   Tag,
   Timeline,
-  message,
 } from 'ant-design-vue';
 
 import ExpressCompanySelect from '#/components/form/components/express-company-select.vue';
 import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
+import {
+  copyShipAddressText,
+  formatShipAddressCopyText,
+} from '#/util/ship-address-copy';
 
 import { expressDetailByOrderId, updateExpressNosApi } from '../api';
 
@@ -36,7 +40,7 @@ defineOptions({
 const loading = ref(false);
 const expressDetail = ref<Record<string, any>>({});
 const activePkg = ref('0');
-const orderId = ref<number | null>(null);
+const orderId = ref<null | number>(null);
 
 /** 改运单弹窗 */
 const editVisible = ref(false);
@@ -65,6 +69,17 @@ function packageTabLabel(pkg: Record<string, any>, idx: number): string {
   return name ? `包裹${no}（${name}）` : `包裹${no}`;
 }
 
+/**
+ * 收件人姓名：优先顶层 express_name，再回落 address.name（与后端 resolveReceiver 对齐）
+ */
+function resolveReceiverName(detail: Record<string, any>): string {
+  const fromTop = String(detail?.express_name || '').trim();
+  if (fromTop) {
+    return fromTop;
+  }
+  return String(detail?.address?.name || '').trim();
+}
+
 /**
  * 收件人姓名脱敏：保留首字，其余用 *
  */
@@ -79,11 +94,37 @@ function maskExpressName(name: unknown): string {
   return str.slice(0, 1) + '*'.repeat(str.length - 1);
 }
 
+/**
+ * 收货地址：省市区 + 详细地址；兼容顶层 express_* 与 address 快照
+ */
+function formatReceiverAddress(detail: Record<string, any>): string {
+  const region = String(
+    detail?.express_region || detail?.address?.region || '',
+  ).trim();
+  const addr = String(
+    detail?.express_address || detail?.address?.detail_address || '',
+  ).trim();
+  return [region, addr].filter(Boolean).join(' ') || '-';
+}
+
+/** 一键复制收货信息（优先明文手机） */
+function copyLogisticsShipAddress(detail: Record<string, any>) {
+  const text = formatShipAddressCopyText(detail?.address, {
+    name: resolveReceiverName(detail),
+    mobile: detail?.address?.mobile || detail?.mobile || detail?.express_mobile,
+    express_name: detail?.express_name,
+    express_mobile: detail?.express_mobile || detail?.mobile,
+    express_region: detail?.express_region,
+    express_address: detail?.express_address,
+  });
+  void copyShipAddressText(text);
+}
+
 /**
  * 解析运单 ID：优先 express_no_id，其次 express.id
  */
 function resolveExpressNoId(
-  express: Record<string, any> | null | undefined,
+  express: null | Record<string, any> | undefined,
   fallbackId?: number,
 ): number {
   const fromExpress = Number(express?.id || 0);
@@ -117,14 +158,17 @@ function getColor(status: any) {
 /**
  * 读取运单上的第三方查询失败文案（无轨迹时展示给运营）
  */
-function syncFailMessage(express: Record<string, any> | null | undefined): string {
+function syncFailMessage(
+  express: null | Record<string, any> | undefined,
+): string {
   return String(express?.last_sync_error || '').trim();
 }
 
 async function loadExpress(id: number, keepActive = false) {
   loading.value = true;
   try {
-    expressDetail.value = (await expressDetailByOrderId({ order_id: id })) || {};
+    expressDetail.value =
+      (await expressDetailByOrderId({ order_id: id })) || {};
     if (!keepActive) {
       activePkg.value = '0';
     }
@@ -137,10 +181,10 @@ async function loadExpress(id: number, keepActive = false) {
  * 打开改运单表单（包裹或旧单运单共用）
  */
 function openEditExpress(payload: {
-  express_no_id: number;
-  express_no?: string;
-  mobile?: string;
   express_company_code?: string;
+  express_no?: string;
+  express_no_id: number;
+  mobile?: string;
 }) {
   const id = Number(payload.express_no_id || 0);
   if (id <= 0) {
@@ -240,7 +284,7 @@ const [Modal, modalApi] = useVbenModal({
                 bordered
               >
                 <Descriptions.Item label="收件人">
-                  {{ maskExpressName(expressDetail.express_name) }}
+                  {{ maskExpressName(resolveReceiverName(expressDetail)) }}
                 </Descriptions.Item>
                 <Descriptions.Item label="手机号">
                   <span class="inline-flex items-center gap-2">
@@ -257,7 +301,8 @@ const [Modal, modalApi] = useVbenModal({
                           ),
                           express_no: pkg.express.express_no,
                           mobile: pkg.express.mobile,
-                          express_company_code: pkg.express.express_company_code,
+                          express_company_code:
+                            pkg.express.express_company_code,
                         })
                       "
                     >
@@ -265,6 +310,19 @@ const [Modal, modalApi] = useVbenModal({
                     </Button>
                   </span>
                 </Descriptions.Item>
+                <Descriptions.Item label="收货地址" :span="2">
+                  <span class="inline-flex items-start gap-2">
+                    <span>{{ formatReceiverAddress(expressDetail) }}</span>
+                    <Button
+                      type="link"
+                      size="small"
+                      class="!px-0 shrink-0"
+                      @click="copyLogisticsShipAddress(expressDetail)"
+                    >
+                      复制
+                    </Button>
+                  </span>
+                </Descriptions.Item>
                 <Descriptions.Item label="物流公司">
                   {{ pkg.express.express_company_name || '-' }}
                 </Descriptions.Item>
@@ -283,7 +341,8 @@ const [Modal, modalApi] = useVbenModal({
                           ),
                           express_no: pkg.express.express_no,
                           mobile: pkg.express.mobile,
-                          express_company_code: pkg.express.express_company_code,
+                          express_company_code:
+                            pkg.express.express_company_code,
                         })
                       "
                     >
@@ -298,13 +357,20 @@ const [Modal, modalApi] = useVbenModal({
               <div class="mt-4">
                 <h4 class="mb-2">物流追踪</h4>
                 <Timeline
-                  v-if="Array.isArray(pkg.express.detail) && pkg.express.detail.length"
+                  v-if="
+                    Array.isArray(pkg.express.detail) &&
+                    pkg.express.detail.length
+                  "
                 >
                   <Timeline.Item
                     v-for="(detail, dIdx) in pkg.express.detail"
                     :key="dIdx"
                   >
-                    <Tag :color="getColor(detail.status)">{{ detail.status }}</Tag>
+                    <Tag :color="getColor(detail.status)">
+{{
+                      detail.status
+                    }}
+</Tag>
                     <p>{{ detail.detail_at }}</p>
                     <p>{{ detail.detail }}</p>
                   </Timeline.Item>
@@ -328,13 +394,18 @@ const [Modal, modalApi] = useVbenModal({
             bordered
           >
             <Descriptions.Item label="收件人">
-              {{ maskExpressName(expressDetail.express_name) }}
+              {{ maskExpressName(resolveReceiverName(expressDetail)) }}
             </Descriptions.Item>
             <Descriptions.Item label="手机号">
               <span class="inline-flex items-center gap-2">
                 <SensitiveText :record="expressDetail" field="mobile" />
                 <Button
-                  v-if="resolveExpressNoId(expressDetail, expressDetail.express_no_id)"
+                  v-if="
+                    resolveExpressNoId(
+                      expressDetail,
+                      expressDetail.express_no_id,
+                    )
+                  "
                   type="link"
                   size="small"
                   class="!px-0"
@@ -354,6 +425,19 @@ const [Modal, modalApi] = useVbenModal({
                 </Button>
               </span>
             </Descriptions.Item>
+            <Descriptions.Item label="收货地址" :span="2">
+              <span class="inline-flex items-start gap-2">
+                <span>{{ formatReceiverAddress(expressDetail) }}</span>
+                <Button
+                  type="link"
+                  size="small"
+                  class="!px-0 shrink-0"
+                  @click="copyLogisticsShipAddress(expressDetail)"
+                >
+                  复制
+                </Button>
+              </span>
+            </Descriptions.Item>
             <Descriptions.Item label="物流公司">
               {{ expressDetail.express_company_name || '-' }}
             </Descriptions.Item>
@@ -361,7 +445,12 @@ const [Modal, modalApi] = useVbenModal({
               <span class="inline-flex items-center gap-2">
                 <span>{{ expressDetail.express_no || '-' }}</span>
                 <Button
-                  v-if="resolveExpressNoId(expressDetail, expressDetail.express_no_id)"
+                  v-if="
+                    resolveExpressNoId(
+                      expressDetail,
+                      expressDetail.express_no_id,
+                    )
+                  "
                   type="link"
                   size="small"
                   class="!px-0"
@@ -388,7 +477,10 @@ const [Modal, modalApi] = useVbenModal({
           <div class="mt-4">
             <h4 class="mb-2">物流追踪</h4>
             <Timeline
-              v-if="Array.isArray(expressDetail.detail) && expressDetail.detail.length"
+              v-if="
+                Array.isArray(expressDetail.detail) &&
+                expressDetail.detail.length
+              "
             >
               <Timeline.Item
                 v-for="(detail, index) in expressDetail.detail"
diff --git a/apps/web-antd/src/views/business/order/product-order/components/modal.vue b/apps/web-antd/src/views/business/order/product-order/components/modal.vue
index 7a8359bf..acd5d687 100644
--- a/apps/web-antd/src/views/business/order/product-order/components/modal.vue
+++ b/apps/web-antd/src/views/business/order/product-order/components/modal.vue
@@ -2,6 +2,7 @@
 /**
  * 商品订单发货弹窗（左右分栏）
  * 左：收件信息默认只读展示，可改/取消；右：快递单号/公司/备注
+ * 收件口径：姓名/地址可选，手机号必填；未修改收件则只提交发货
  * 注意：收件表单用 v-show 常驻挂载，避免加载中 setValues 等不到节点而卡住
  */
 import { computed, ref } from 'vue';
@@ -58,23 +59,22 @@ const fullAddressText = computed(() => {
  * 从订单行/详情解析收件信息（接口失败时的兜底）
  */
 function pickReceiverFromOrder(data: Record<string, any> = {}) {
-  const addr = data?.address && typeof data.address === 'object' ? data.address : {};
+  const addr =
+    data?.address && typeof data.address === 'object' ? data.address : {};
   return {
     express_name: String(data?.express_name || addr.name || ''),
     express_mobile: String(data?.express_mobile || addr.mobile || ''),
     express_region: String(data?.express_region || addr.region || ''),
-    express_address: String(
-      data?.express_address || addr.detail_address || '',
-    ),
+    express_address: String(data?.express_address || addr.detail_address || ''),
   };
 }
 
 /** 规范化收件四字段 */
 function normalizeReceiver(next: {
-  express_name?: string;
-  express_mobile?: string;
-  express_region?: string;
   express_address?: string;
+  express_mobile?: string;
+  express_name?: string;
+  express_region?: string;
 }) {
   return {
     express_name: String(next.express_name || ''),
@@ -88,10 +88,10 @@ function normalizeReceiver(next: {
  * 写入展示态；表单常驻挂载，setValues 不阻塞 UI（避免挂载时序卡死）
  */
 function applyReceiver(next: {
-  express_name?: string;
-  express_mobile?: string;
-  express_region?: string;
   express_address?: string;
+  express_mobile?: string;
+  express_name?: string;
+  express_region?: string;
 }) {
   const payload = normalizeReceiver(next);
   receiverView.value = { ...payload };
@@ -108,8 +108,8 @@ async function loadShipReceiver(fallback?: Record<string, any>) {
   try {
     const res = await getShipReceiver(orderId.value);
     applyReceiver(res || {});
-  } catch (err) {
-    console.error(err);
+  } catch (error) {
+    console.error(error);
     if (fallback) {
       applyReceiver(pickReceiverFromOrder(fallback));
     }
@@ -164,8 +164,8 @@ async function fillStoreAddress() {
     }
     applyReceiver(res || {});
     message.success('已填入诊所地址');
-  } catch (err) {
-    console.error(err);
+  } catch (error) {
+    console.error(error);
   } finally {
     storeAddrLoading.value = false;
   }
@@ -178,23 +178,24 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.close();
   },
   onConfirm: async () => {
-    // 若仍在编辑收件，先落回展示态并校验
+    // 收件口径：地址/姓名可选；仅手机号必填。未改收件则按当前展示值发货
     if (receiverEditing.value) {
       const re = await receiverFormApi.validate();
       if (!re.valid) return;
       await syncReceiverViewFromForm();
       receiverEditing.value = false;
-    } else {
-      // 展示态也再校验一次，防止空收件直接发货
-      const re = await receiverFormApi.validate();
-      if (!re.valid) {
-        receiverEditing.value = true;
-        return;
-      }
+    }
+    const mobile = String(receiverView.value.express_mobile || '').trim();
+    if (!mobile) {
+      message.warning('请填写收件手机号');
+      receiverEditing.value = true;
+      await receiverFormApi.setValues({ ...receiverView.value });
+      return;
     }
     const se = await shipFormApi.validate();
     if (!se.valid) return;
-    const receiver = await receiverFormApi.getValues();
+    // 以展示态为准（已与表单同步），避免未编辑时表单空值覆盖
+    const receiver = { ...receiverView.value };
     const ship = await shipFormApi.getValues();
     const wid = Number(ship.warehouse_id);
     const payload: Record<string, any> = {
@@ -219,8 +220,8 @@ const [Modal, modalApi] = useVbenModal({
       message.success('发货成功');
       gridApi.value?.reload?.();
       modalApi.close();
-    } catch (err) {
-      console.error(err);
+    } catch (error) {
+      console.error(error);
     } finally {
       modalApi.setState({ loading: false, confirmLoading: false });
     }
@@ -334,7 +335,9 @@ const [Modal, modalApi] = useVbenModal({
               <span class="receiver-view__label">地址</span>
               <span class="receiver-view__value">{{ fullAddressText }}</span>
             </div>
-            <p class="receiver-view__hint">点击此处可修改收件信息</p>
+            <p class="receiver-view__hint">
+              地址可选；无修改则只发货。手机号必填，点击可修改
+            </p>
           </template>
         </div>
         <!-- 编辑表单常驻挂载（v-show），避免 setValues 等不到节点 -->
@@ -358,79 +361,92 @@ const [Modal, modalApi] = useVbenModal({
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
-  min-height: 420px;
   height: 100%;
+  min-height: 420px;
 }
+
 .ship-pane {
   display: flex;
   flex-direction: column;
   min-height: 0;
   padding: 16px;
-  border-radius: 10px;
-  border: 1px solid hsl(var(--border));
   background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--border));
+  border-radius: 10px;
   box-shadow: 0 0 6px hsl(var(--primary) / 10%);
 }
+
 .ship-pane--receiver {
   border-color: hsl(var(--primary) / 28%);
   box-shadow: 0 0 8px hsl(var(--primary) / 14%);
 }
+
 .ship-pane__head {
   display: flex;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
   margin-bottom: 12px;
 }
+
 .ship-pane__title {
   margin: 0;
   font-size: 15px;
   font-weight: 600;
   color: hsl(var(--foreground));
 }
+
 .ship-pane__actions {
   display: flex;
-  align-items: center;
-  gap: 4px;
   flex-shrink: 0;
+  gap: 4px;
+  align-items: center;
 }
+
 .receiver-view {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: 14px;
   padding: 8px 4px;
   cursor: pointer;
-  border-radius: 8px;
   outline: none;
+  border-radius: 8px;
   transition: background 0.15s ease;
 }
+
 .receiver-view.is-loading {
-  cursor: wait;
   pointer-events: none;
+  cursor: wait;
 }
+
 .receiver-view:hover,
 .receiver-view:focus-visible {
-  background: hsl(var(--primary) / 0.06);
+  background: hsl(var(--primary) / 6%);
 }
+
 .receiver-view__row {
   display: flex;
-  align-items: baseline;
   gap: 12px;
+  align-items: baseline;
 }
+
 .receiver-view__row--block {
   flex-direction: column;
   gap: 6px;
 }
+
 .receiver-view__label {
   flex-shrink: 0;
   width: 52px;
   font-size: 13px;
   color: hsl(var(--muted-foreground));
 }
+
 .receiver-view__row--block .receiver-view__label {
   width: auto;
 }
+
 .receiver-view__value {
   flex: 1;
   font-size: 15px;
@@ -438,25 +454,29 @@ const [Modal, modalApi] = useVbenModal({
   color: hsl(var(--foreground));
   word-break: break-all;
 }
+
 .receiver-view__hint {
   margin: auto 0 0;
   font-size: 12px;
   color: hsl(var(--muted-foreground));
 }
+
 .receiver-edit {
   flex: 1;
   min-height: 0;
   overflow: auto;
 }
+
 .receiver-loading {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   min-height: 120px;
   font-size: 13px;
   color: hsl(var(--muted-foreground));
 }
+
 @media (max-width: 768px) {
   .ship-layout {
     grid-template-columns: 1fr;
diff --git a/apps/web-antd/src/views/business/order/product-order/config/form.ts b/apps/web-antd/src/views/business/order/product-order/config/form.ts
index bf80fa17..a3f0a2f9 100644
--- a/apps/web-antd/src/views/business/order/product-order/config/form.ts
+++ b/apps/web-antd/src/views/business/order/product-order/config/form.ts
@@ -12,19 +12,19 @@ export const receiverFormProps: VbenFormProps = {
   wrapperClass: 'grid-cols-12',
   schema: [
     {
+      // 收件人可选：无地址/无姓名仍可发货，仅手机号必填
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入收件人',
+        placeholder: '选填，可不填',
         maxlength: 50,
       },
       fieldName: 'express_name',
       label: '收件人',
-      rules: 'required',
     },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入收件手机号',
+        placeholder: '请输入收件手机号（必填）',
         maxlength: 11,
       },
       fieldName: 'express_mobile',
@@ -34,23 +34,23 @@ export const receiverFormProps: VbenFormProps = {
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '省市区，可与详细地址合并填写',
+        placeholder: '选填，省市区可与详细地址合并',
         maxlength: 100,
       },
       fieldName: 'express_region',
       label: '所在地区',
     },
     {
+      // 详细地址可选：未填或未修改时只做发货，不拦单
       component: 'Textarea',
       componentProps: {
-        placeholder: '请输入详细地址',
+        placeholder: '选填，可不填；未修改则按原信息发货',
         rows: 3,
         maxlength: 255,
         showCount: true,
       },
       fieldName: 'express_address',
       label: '详细地址',
-      rules: 'required',
     },
   ],
   showDefaultActions: false,
diff --git a/apps/web-antd/src/views/business/order/product-order/index.vue b/apps/web-antd/src/views/business/order/product-order/index.vue
index 97465c1f..4cb24ca2 100644
--- a/apps/web-antd/src/views/business/order/product-order/index.vue
+++ b/apps/web-antd/src/views/business/order/product-order/index.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridListeners } from '#/adapter/vxe-table';
+import type { StatIslandItem } from '#/components/stat-islands';
+import type { ActionItem } from '#/components/table-action';
+import type { QuickDiscountOption } from '#/utils/pricePercentAdjust';
 
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
@@ -9,25 +12,46 @@ import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { useUserStore } from '@vben/stores';
 
 import {
+  Modal as AntdModal,
   Button,
   Image,
   message,
-  Modal as AntdModal,
-  Popconfirm,
   Space,
   Switch,
   Table,
   Tag,
 } from 'ant-design-vue';
 
-import type { ActionItem } from '#/components/table-action';
-
 import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { useFreshSearchTime } from '#/composables/use-fresh-search-time';
-import { TableAction } from '#/components/table-action';
-import { monthToTodayRangeString } from '#/utils/search-time-range';
+import { getOrderPriceAdjustConfig } from '#/api/order/priceAdjust';
 import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
+import { StatIslands } from '#/components/stat-islands';
+import StoreCardModal from '#/components/store-card/StoreCardModal.vue';
+import StoreNameLink from '#/components/store-card/StoreNameLink.vue';
+import { TableAction } from '#/components/table-action';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import {
+  WxUserPatientDetailModal,
+  WxUserPatientsModal,
+} from '#/components/wx-user-patient';
+import { useFreshSearchTime } from '#/composables/use-fresh-search-time';
+import {
+  copyShipAddressText,
+  formatShipAddressCopyText,
+} from '#/util/ship-address-copy';
+import { normalizeQuickOptions } from '#/utils/pricePercentAdjust';
+import { monthToTodayRangeString } from '#/utils/search-time-range';
+import {
+  accrueSalespersonCommissionApi,
+  retryConfirmReceiveApi,
+  reverseSalespersonCommissionApi,
+  simulatePayApi,
+} from '#/views/business/order/api/order-ops';
+import ChinaErpSyncLogDrawer from '#/views/business/order/components/china-erp-sync-log-drawer.vue';
+import OrderTraceDrawer from '#/views/business/order/components/order-trace-drawer.vue';
+import OrderPricePercentAdjustDrawer from '#/views/business/order/components/OrderPricePercentAdjustDrawer.vue';
+import SalespersonCommissionPanel from '#/views/business/order/components/SalespersonCommissionPanel.vue';
 import {
   cancelOrderApi,
   changeDeliveryWarehouseApi,
@@ -39,48 +63,30 @@ import {
   saleAmountApi,
   updateFreeShipping,
 } from '#/views/business/order/product-order/api';
-import { getDeliveryWarehouseOptionsByDrugs } from '#/views/doctor/doctor-reception/api';
-import {
-  accrueSalespersonCommissionApi,
-  retryConfirmReceiveApi,
-  reverseSalespersonCommissionApi,
-  simulatePayApi,
-} from '#/views/business/order/api/order-ops';
-import ChinaErpSyncLogDrawer from '#/views/business/order/components/china-erp-sync-log-drawer.vue';
-import SalespersonCommissionPanel from '#/views/business/order/components/SalespersonCommissionPanel.vue';
-import OrderTraceDrawer from '#/views/business/order/components/order-trace-drawer.vue';
-import OrderPricePercentAdjustDrawer from '#/views/business/order/components/OrderPricePercentAdjustDrawer.vue';
-import { getOrderPriceAdjustConfig } from '#/api/order/priceAdjust';
-import type { QuickDiscountOption } from '#/utils/pricePercentAdjust';
-import { normalizeQuickOptions } from '#/utils/pricePercentAdjust';
-import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
-import DoctorCardModal from '#/views/doctor/doctor/components/DoctorCardModal.vue';
-import StoreCardModal from '#/components/store-card/StoreCardModal.vue';
-import StoreNameLink from '#/components/store-card/StoreNameLink.vue';
-import {
-  WxUserPatientDetailModal,
-  WxUserPatientsModal,
-} from '#/components/wx-user-patient';
 import { getRegisterListApi } from '#/views/business/order/register/api';
 import RegisterDetailModal from '#/views/business/order/register/components/RegisterDetailModal.vue';
+import {
+  openOrderPopup,
+  ORDER_POPUP_Z_INDEX,
+} from '#/views/business/order/utils/popup-z-index';
+import { getDeliveryWarehouseOptionsByDrugs } from '#/views/doctor/doctor-reception/api';
+import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
+import DoctorCardModal from '#/views/doctor/doctor/components/DoctorCardModal.vue';
+import {
+  applyPublicAccountPay,
+  getPublicAccountPayConfig,
+} from '#/views/finance/public-account-pay/api';
+import ApplyPublicAccountPayModal from '#/views/finance/public-account-pay/components/apply-modal.vue';
+import PublicAccountConfirmModal from '#/views/finance/public-account-pay/components/confirm-modal.vue';
+import { isPlatformSuperAdmin } from '#/views/system/admin/_shared/platform-admin-role';
 
-import DetailModal from './components/detail.vue';
 import OrderUserInfoCell from './components/cells/OrderUserInfoCell.vue';
+import DetailModal from './components/detail.vue';
 import LogisticsModal from './components/logistics-modal.vue';
 import FormModalDemo from './components/modal.vue';
 import ProductOrderCardList from './components/ProductOrderCardList.vue';
 import ProductOrderExportModal from './components/ProductOrderExportModal.vue';
 import Refund from './components/refund.vue';
-import PublicAccountConfirmModal from '#/views/finance/public-account-pay/components/confirm-modal.vue';
-import ApplyPublicAccountPayModal from '#/views/finance/public-account-pay/components/apply-modal.vue';
-import {
-  applyPublicAccountPay,
-  getPublicAccountPayConfig,
-} from '#/views/finance/public-account-pay/api';
-import {
-  ORDER_POPUP_Z_INDEX,
-  openOrderPopup,
-} from '#/views/business/order/utils/popup-z-index';
 import {
   ORDER_STATUS_MAP,
   ORDER_TYPE_MAP,
@@ -88,9 +94,6 @@ import {
 } from './config/constants';
 import { formOptions } from './config/search';
 import { gridOptions } from './config/table';
-import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
-import { StatIslands, type StatIslandItem } from '#/components/stat-islands';
-import { isPlatformSuperAdmin } from '#/views/system/admin/_shared/platform-admin-role';
 
 const route = useRoute();
 const userStore = useUserStore();
@@ -103,7 +106,9 @@ const hasTopTableDropDownActions = ref(false);
 /** 公账出账模式：未拉到配置前不当成 order，避免按天误露出逐单确认 */
 const publicAccountBillMode = ref('');
 /** 公账触发时机：仅 doctor_confirm 露出「申请公账」；immediate 发方后自动走 */
-const publicAccountPayTrigger = ref<'immediate' | 'doctor_confirm'>('immediate');
+const publicAccountPayTrigger = ref<'doctor_confirm' | 'immediate'>(
+  'immediate',
+);
 /** 打开挂号详情时防重复点击 */
 const openingRegisterDetail = ref(false);
 
@@ -131,12 +136,12 @@ function isMarketPriceAbnormal(row: Record<string, any>) {
 
 const gridEvents: VxeGridListeners<any> = {
   checkboxChange() {
-    // eslint-disable-next-line no-use-before-define
+     
     const records = gridApi.grid.getCheckboxRecords();
     hasTopTableDropDownActions.value = records.length > 0;
   },
   checkboxAll() {
-    // eslint-disable-next-line no-use-before-define
+     
     const records = gridApi.grid.getCheckboxRecords();
     hasTopTableDropDownActions.value = records.length > 0;
   },
@@ -153,7 +158,9 @@ function buildFormOptionsFromRoute(): VbenFormProps {
     return formOptions;
   }
   const rawTimeScope = route.query.time_scope;
-  const timeScope = Array.isArray(rawTimeScope) ? rawTimeScope[0] : rawTimeScope;
+  const timeScope = Array.isArray(rawTimeScope)
+    ? rawTimeScope[0]
+    : rawTimeScope;
   const schema = (formOptions.schema ?? []).map((item) => {
     if (item.fieldName === 'store_ids') {
       return { ...item, defaultValue: [Number(storeId)] };
@@ -226,7 +233,7 @@ async function readLiveSearchValues(): Promise<Record<string, any>> {
     // 等自定义组件同步 emit 写入表单后再取值，避免点查询仍是选店前的旧条件
     await nextTick();
     const live = await searchFormApi.getValues();
-    return { ...(live || {}) };
+    return { ...live };
   } catch {
     return { ...searchValues.value };
   }
@@ -265,7 +272,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         /** 始终合并顶部统一搜索条件；同时刷新顶部销售金额统计 */
-        query: async ({ page }: { page: { currentPage: number; pageSize: number } }) => {
+        query: async ({
+          page,
+        }: {
+          page: { currentPage: number; pageSize: number };
+        }) => {
           searchValues.value = await readLiveSearchValues();
           saleAmount(searchValues.value);
           return await getOrderList({
@@ -295,7 +306,8 @@ const freshSearchTime = useFreshSearchTime({
   },
 });
 freshSearchTimeBridge.resetSearchTime = freshSearchTime.resetSearchTime;
-freshSearchTimeBridge.markSearchTimeTouched = freshSearchTime.markSearchTimeTouched;
+freshSearchTimeBridge.markSearchTimeTouched =
+  freshSearchTime.markSearchTimeTouched;
 
 // 记忆持久化由 useViewMode 内部完成；这里只处理切回列表时 grid 被 v-if 卸载过需重查
 watch(viewMode, (mode, prev) => {
@@ -363,12 +375,15 @@ const [LogisticsModalComp, logisticsModalApi] = useVbenModal({
 const [RefundModal, RefundModalApi] = useVbenModal({
   connectedComponent: Refund,
 });
-const [PublicAccountConfirmModals, publicAccountConfirmModalApi] = useVbenModal({
-  connectedComponent: PublicAccountConfirmModal,
-});
-const [ApplyPublicAccountPayModals, applyPublicAccountPayModalApi] = useVbenModal({
-  connectedComponent: ApplyPublicAccountPayModal,
-});
+const [PublicAccountConfirmModals, publicAccountConfirmModalApi] = useVbenModal(
+  {
+    connectedComponent: PublicAccountConfirmModal,
+  },
+);
+const [ApplyPublicAccountPayModals, applyPublicAccountPayModalApi] =
+  useVbenModal({
+    connectedComponent: ApplyPublicAccountPayModal,
+  });
 
 const [ExportModal, exportModalApi] = useVbenModal({
   connectedComponent: ProductOrderExportModal,
@@ -387,11 +402,7 @@ const infoModal = (data: Record<string, any> = {}) => {
     },
     // 二级弹窗必须页面级挂载，详情里再嵌溯源会被盖住
     onOpenTrace: (payload: Record<string, any>) => {
-      openOrderPopup(
-        traceDrawerApi,
-        payload,
-        ORDER_POPUP_Z_INDEX.NESTED,
-      );
+      openOrderPopup(traceDrawerApi, payload, ORDER_POPUP_Z_INDEX.NESTED);
     },
     onOpenPrescription: (pId: number) => {
       openPrescriptionDetail(pId);
@@ -461,9 +472,10 @@ const saleAmount = (formValues?: Record<string, any>) => {
   saleAmountApi({
     search_time: values.search_time,
     store_ids: values.store_ids,
-    id: Array.isArray(values.store_ids) && values.store_ids.length === 1
-      ? values.store_ids[0]
-      : undefined,
+    id:
+      Array.isArray(values.store_ids) && values.store_ids.length === 1
+        ? values.store_ids[0]
+        : undefined,
   }).then((res) => {
     income.value = res.income;
     total.value = res.total;
@@ -553,8 +565,8 @@ async function openRegisterDetail(row: Record<string, any>) {
       { row: registerRow },
       ORDER_POPUP_Z_INDEX.NESTED,
     );
-  } catch (err) {
-    console.error(err);
+  } catch (error) {
+    console.error(error);
     message.error('加载挂号详情失败');
   } finally {
     openingRegisterDetail.value = false;
@@ -571,7 +583,9 @@ async function handleRecalculateMarketPrice(row: Record<string, any>) {
     return;
   }
   try {
-    const preview = await previewRecalculateMarketPriceApi({ order_id: orderId });
+    const preview = await previewRecalculateMarketPriceApi({
+      order_id: orderId,
+    });
     const oldPrice = preview?.old_market_price ?? row.market_price ?? '0.00';
     const newPrice = preview?.expected_market_price ?? '0.00';
     const allBuyZero = Boolean(preview?.all_buy_price_zero);
@@ -592,8 +606,8 @@ async function handleRecalculateMarketPrice(row: Record<string, any>) {
         refreshCurrentView();
       },
     });
-  } catch (err) {
-    console.error(err);
+  } catch (error) {
+    console.error(error);
   }
 }
 
@@ -626,9 +640,9 @@ function showOrderDoctorCard(row: Record<string, any>) {
 
 /** 点下单用户 → 该用户下就诊人列表 Modal */
 function openOrderUserPatients(payload: {
-  userId: number;
-  nickname: string;
   avatarurl: string;
+  nickname: string;
+  userId: number;
 }) {
   if (!payload?.userId) {
     message.warning('缺少用户信息');
@@ -643,7 +657,7 @@ function openOrderUserPatients(payload: {
 }
 
 /** 点就诊人 → 详情 Modal */
-function openOrderPatient(payload: { upId: number; patientName: string }) {
+function openOrderPatient(payload: { patientName: string; upId: number; }) {
   if (!payload?.upId) {
     message.warning('缺少就诊人信息');
     return;
@@ -842,12 +856,17 @@ async function handleAccrueSalesperson(row: Record<string, any>) {
   } catch (error: any) {
     message.error(error?.message || '分成失败');
   } finally {
-    accruingOrderIds.value = accruingOrderIds.value.filter((id) => id !== row.id);
+    accruingOrderIds.value = accruingOrderIds.value.filter(
+      (id) => id !== row.id,
+    );
   }
 }
 
 /** 手动退回推广员分成 */
-async function handleReverseSalesperson(row: Record<string, any>, salespersonId?: number) {
+async function handleReverseSalesperson(
+  row: Record<string, any>,
+  salespersonId?: number,
+) {
   const spId = salespersonId ?? row.salesperson_id;
   if (!spId || reversingOrderIds.value.includes(row.id)) {
     return;
@@ -864,7 +883,9 @@ async function handleReverseSalesperson(row: Record<string, any>, salespersonId?
   } catch (error: any) {
     message.error(error?.message || '退回分成失败');
   } finally {
-    reversingOrderIds.value = reversingOrderIds.value.filter((id) => id !== row.id);
+    reversingOrderIds.value = reversingOrderIds.value.filter(
+      (id) => id !== row.id,
+    );
   }
 }
 
@@ -877,6 +898,19 @@ function formatExpressAddress(row: Record<string, any>) {
   return [region, detail].filter(Boolean).join(' ') || '—';
 }
 
+/** 一键复制收货信息 */
+function copyRowShipAddress(row: Record<string, any>) {
+  const text = formatShipAddressCopyText(row.address, {
+    name: row.express_name || row.patient,
+    mobile: row.address?.mobile || row.patient_mobile,
+    express_name: row.express_name,
+    express_mobile: row.express_mobile,
+    express_region: row.express_region,
+    express_address: row.express_address,
+  });
+  void copyShipAddressText(text);
+}
+
 const openPrescriptionDetail = (values: number) => {
   openOrderPopup(
     PrescriptionDetailModalApi,
@@ -908,15 +942,24 @@ const openRefundModal = (row: Record<string, any>) => {
   RefundModalApi.open();
 };
 
-/** 取消待支付订单 */
-async function handleCancelOrder(row: Record<string, any>) {
-  try {
-    await cancelOrderApi({ order_id: row.id });
-    message.success('订单已取消');
-    await refreshCurrentView();
-  } catch (error: any) {
-    message.error(error?.message || '取消失败');
-  }
+/** 取消待支付订单（二次确认后调接口） */
+function handleCancelOrder(row: Record<string, any>) {
+  AntdModal.confirm({
+    title: '确定取消该待支付订单吗？',
+    okText: '确定取消',
+    cancelText: '返回',
+    okType: 'danger',
+    async onOk() {
+      try {
+        await cancelOrderApi({ order_id: row.id });
+        message.success('订单已取消');
+        await refreshCurrentView();
+      } catch (error: any) {
+        message.error(error?.message || '取消失败');
+        throw error;
+      }
+    },
+  });
 }
 
 /** 订单页改仓弹窗状态（按药分别选仓） */
@@ -929,20 +972,20 @@ const changeWhFromName = ref('');
 /** 弹窗内药品行：每药独立选 to_warehouse_id */
 const changeWhDrugRows = ref<
   Array<{
-    order_item_id: number;
     drug_id: number;
     drug_name: string;
-    image: string;
-    specification: string;
-    number: number;
     from_warehouse_id: number;
-    to_warehouse_id: number;
+    image: string;
+    number: number;
     options: Array<{
+      disabled?: boolean;
+      quote: null | string;
       warehouse_id: number;
       warehouse_name: string;
-      quote: string | null;
-      disabled?: boolean;
     }>;
+    order_item_id: number;
+    specification: string;
+    to_warehouse_id: number;
   }>
 >([]);
 
@@ -960,15 +1003,15 @@ function buildDrugWarehouseCards(
   drugOptions: any[],
   _fromWarehouseId: number,
 ): Array<{
+  disabled?: boolean;
+  quote: null | string;
   warehouse_id: number;
   warehouse_name: string;
-  quote: string | null;
-  disabled?: boolean;
 }> {
   const local = {
     warehouse_id: 0,
     warehouse_name: '萧康医药本仓库',
-    quote: null as string | null,
+    quote: null as null | string,
   };
   const seen = new Set<number>([0]);
   const cards = [local];
@@ -1013,7 +1056,7 @@ async function openChangeWarehouse(
       const wid = Number(it.delivery_warehouse_id ?? 0);
       return fromId > 0 ? wid === fromId : wid <= 0;
     });
-    const list = scoped.length ? scoped : items;
+    const list = scoped.length > 0 ? scoped : items;
     const drugIds = [
       ...new Set(
         list
@@ -1088,7 +1131,10 @@ async function submitChangeWarehouse() {
 
 const toggleFreeShipping = async (row: any, checked: boolean) => {
   try {
-    const res = await updateFreeShipping({ id: row.id, is_free_shipping: checked ? 1 : 0 });
+    const res = await updateFreeShipping({
+      id: row.id,
+      is_free_shipping: checked ? 1 : 0,
+    });
     row.is_free_shipping = res.is_free_shipping;
     row.trans_expenses = res.trans_expenses;
     row.total_pay_price = res.total_pay_price;
@@ -1106,12 +1152,38 @@ const verifyMismatchOnly = ref(false);
 
 const verifyColumns = [
   { title: '订单ID', dataIndex: 'order_id', key: 'order_id', width: 90 },
-  { title: '订单号', dataIndex: 'order_no', key: 'order_no', width: 200, ellipsis: true },
-  { title: '药品价(表)', dataIndex: 'items_price', key: 'items_price', width: 100 },
-  { title: '药品价(算)', dataIndex: 'expected_items_price', key: 'exp_items', width: 100 },
+  {
+    title: '订单号',
+    dataIndex: 'order_no',
+    key: 'order_no',
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: '药品价(表)',
+    dataIndex: 'items_price',
+    key: 'items_price',
+    width: 100,
+  },
+  {
+    title: '药品价(算)',
+    dataIndex: 'expected_items_price',
+    key: 'exp_items',
+    width: 100,
+  },
   { title: '药品', key: 'items_match', width: 80 },
-  { title: '应付(表)', dataIndex: 'total_pay_price', key: 'total_pay', width: 100 },
-  { title: '应付(算)', dataIndex: 'expected_total_pay_price', key: 'exp_total', width: 100 },
+  {
+    title: '应付(表)',
+    dataIndex: 'total_pay_price',
+    key: 'total_pay',
+    width: 100,
+  },
+  {
+    title: '应付(算)',
+    dataIndex: 'expected_total_pay_price',
+    key: 'exp_total',
+    width: 100,
+  },
   { title: '应付', key: 'total_match', width: 80 },
   { title: '全OK', key: 'ok', width: 70 },
   { title: '药品差', dataIndex: 'items_diff', key: 'items_diff', width: 80 },
@@ -1270,12 +1342,9 @@ function buildRowActions(row: Record<string, any>): {
         type: 'link',
         icon: 'mdi:cancel',
         auth: ['Super Admin', 'Admin'],
-        ifShow:
-          row.status === 0 && row.is_pay === 0 && row.cancel_status === 0,
-        popConfirm: {
-          title: '确定取消该待支付订单吗？',
-          confirm: handleCancelOrder.bind(null, row),
-        },
+        ifShow: row.status === 0 && row.is_pay === 0 && row.cancel_status === 0,
+        // 用 Modal.confirm，避免下拉/卡片里嵌套 Popconfirm 触发 _a.call is not a function
+        onClick: handleCancelOrder.bind(null, row),
       },
       {
         label: '退款',
@@ -1306,12 +1375,21 @@ function buildRowActions(row: Record<string, any>): {
     >
       <Space direction="vertical" style="width: 100%; margin-bottom: 12px">
         <div>
-          与明细重算口径同调价/分账；已检 {{ verifyMeta.count }} 条；since={{ verifyMeta.since }}（Unix）
+          与明细重算口径同调价/分账；已检 {{ verifyMeta.count }} 条；since={{
+            verifyMeta.since
+          }}（Unix）
         </div>
         <Space wrap>
           <span>仅显示不一致</span>
-          <Switch v-model:checked="verifyMismatchOnly" @update:checked="fetchOrderAmountVerify" />
-          <Button :loading="verifyLoading" type="primary" @click="fetchOrderAmountVerify">
+          <Switch
+            v-model:checked="verifyMismatchOnly"
+            @update:checked="fetchOrderAmountVerify"
+          />
+          <Button
+            :loading="verifyLoading"
+            type="primary"
+            @click="fetchOrderAmountVerify"
+          >
             重新检测
           </Button>
         </Space>
@@ -1359,398 +1437,439 @@ function buildRowActions(row: Record<string, any>): {
     <ChinaErpSyncDrawer @synced="() => refreshCurrentView()" />
     <!-- 统计、搜索固定高度，列表/卡片只留一个滚动层，避免页面和表格同时滚动时抢滚轮 -->
     <div class="flex h-full min-h-0 flex-col overflow-hidden">
-    <StatIslands class="mb-3 shrink-0" :items="overviewItems" :columns="4" />
-    <!-- 顶部统一搜索（双视图共用，替代原 grid 内嵌表单） -->
-    <div class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3">
-      <SearchForm />
-    </div>
-    <!-- 视图切换：列表 / 卡片看板；卡片模式下补充导出入口（列表模式导出在表格工具栏） -->
-    <div class="mb-3 flex shrink-0 items-center justify-between gap-3">
-      <ViewModeSwitch v-model="viewMode" />
-      <Button v-if="viewMode === 'card'" type="primary" @click="openExportModal">
-        导出
-      </Button>
-    </div>
-    <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
-      <template #toolbar-actions>
-        <TableAction
-          :flex="false"
-          :actions="[
-            // {
-            //   label: '校验近10分钟金额',
-            //   type: 'default',
-            //   icon: 'ix:search-check',
-            //   onClick: openOrderAmountVerify.bind(null),
-            // },
-            {
-              label: '导出',
-              type: 'primary',
-              icon: 'ix:export-check',
-              // auth: ['超级西（中成）药', 'sys:user:save'],
-              onClick: openExportModal.bind(null),
-            },
-            {
-              label: '展开全部',
-              type: 'primary',
-              // auth: ['超级菜单', 'sys:user:save'],
-              onClick: expandAll.bind(null),
-            },
-            {
-              label: '收起全部',
-              type: 'primary',
-              // auth: ['超级菜单', 'sys:user:save'],
-              onClick: collapseAll.bind(null),
-            },
-          ]"
-          :drop-down-actions="[]"
+      <StatIslands class="mb-3 shrink-0" :items="overviewItems" :columns="4" />
+      <!-- 顶部统一搜索（双视图共用，替代原 grid 内嵌表单） -->
+      <div
+        class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+      >
+        <SearchForm />
+      </div>
+      <!-- 视图切换：列表 / 卡片看板；卡片模式下补充导出入口（列表模式导出在表格工具栏） -->
+      <div class="mb-3 flex shrink-0 items-center justify-between gap-3">
+        <ViewModeSwitch v-model="viewMode" />
+        <Button
+          v-if="viewMode === 'card'"
+          type="primary"
+          @click="openExportModal"
         >
-          <template #more>
-            <Button style="margin-left: 16px">
-              批量操作
-              <Icon icon="ant-design:down-outlined" />
-            </Button>
-          </template>
-        </TableAction>
-      </template>
-      <template #order-user-info="{ row }">
-        <OrderUserInfoCell
-          :row="row"
-          @open-doctor="showOrderDoctorCard"
-          @open-user-patients="openOrderUserPatients"
-          @open-patient="openOrderPatient"
-        />
-      </template>
-      <template #order-store="{ row }">
-        <div class="leading-snug">
-          <div class="mb-1 flex flex-wrap items-center gap-1">
-            <Tag v-if="row.is_online === 1" color="blue">在线问诊</Tag>
-            <Tag v-else-if="row.is_online === 2" color="green">在线复诊（诊所）</Tag>
-            <Tag v-else-if="row.is_online === 3" color="green">在线复诊（药店）</Tag>
-            <Tag v-else color="default">线下就诊</Tag>
-            <!-- 代支付标识放订单号列：状态列过窄且 showOverflow 会裁切底部 Tag -->
-            <Tag
-              v-if="row.is_proxy_pay || Number(row.pay_user_type) === 2"
-              color="magenta"
-            >
-              代支付
-            </Tag>
-          </div>
-          <div class="font-medium">{{ row.order_no }}</div>
-          <div class="text-xs text-[hsl(var(--muted-foreground))]">
-            <StoreNameLink
-              :store-id="row.store?.id"
-              :name="row.store?.name"
-              @click="openStoreCard"
-            />
-          </div>
-          <div class="text-xs text-[hsl(var(--muted-foreground))]">
-            下单时间： {{ row.created_at || '—' }}
-          </div>
-        </div>
-      </template>
-      <template #express-info="{ row }">
-        <div class="space-y-0.5 text-sm leading-snug">
-          <div>
-            {{
-              row.address?.name ||
-              row.express_name ||
-              row.patient ||
-              row.cancel_remark ||
-              '—'
-            }}
-          </div>
-          <div class="text-gray-500">
-            <SensitiveText
-              :record="row.address"
-              field="mobile"
-              :fallback="{ record: row, field: 'patient_mobile' }"
-            />
-          </div>
-          <div class="text-xs text-gray-500">{{ formatExpressAddress(row) }}</div>
-        </div>
-      </template>
-      <!-- 患者配送仓库：点击 Tag 可改仓（本仓库 / 配送仓） -->
-      <template #delivery-warehouses="{ row }">
-        <div
-          v-if="Array.isArray(row.delivery_warehouses) && row.delivery_warehouses.length"
-          class="flex flex-wrap gap-1"
-        >
-          <Tag
-            v-for="wh in row.delivery_warehouses"
-            :key="wh.id"
-            color="processing"
-            class="cursor-pointer"
-            @click="openChangeWarehouse(row, wh)"
+          导出
+        </Button>
+      </div>
+      <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
+        <template #toolbar-actions>
+          <TableAction
+            :flex="false"
+            :actions="[
+              // {
+              //   label: '校验近10分钟金额',
+              //   type: 'default',
+              //   icon: 'ix:search-check',
+              //   onClick: openOrderAmountVerify.bind(null),
+              // },
+              {
+                label: '导出',
+                type: 'primary',
+                icon: 'ix:export-check',
+                // auth: ['超级西（中成）药', 'sys:user:save'],
+                onClick: openExportModal.bind(null),
+              },
+              {
+                label: '展开全部',
+                type: 'primary',
+                // auth: ['超级菜单', 'sys:user:save'],
+                onClick: expandAll.bind(null),
+              },
+              {
+                label: '收起全部',
+                type: 'primary',
+                // auth: ['超级菜单', 'sys:user:save'],
+                onClick: collapseAll.bind(null),
+              },
+            ]"
+            :drop-down-actions="[]"
           >
-            {{ wh.name }}
-          </Tag>
-        </div>
-        <span v-else class="text-[hsl(var(--muted-foreground))]">-</span>
-      </template>
-      <template #price-info="{ row }">
-        <div class="space-y-0.5 text-sm leading-snug">
-          <div>
-            药品：
-            <Button
-              v-if="canRowPercentAdjust(row)"
-              class="!h-auto !px-0 !py-0"
-              type="link"
-              @click="openOrderPercentAdjust(row)"
-            >
-              ¥{{ row.items_price ?? '0.00' }}
-            </Button>
-            <template v-else>¥{{ row.items_price ?? '0.00' }}</template>
-          </div>
-          <div>
-            支付：
-            <Button
-              v-if="canRowPercentAdjust(row)"
-              class="!h-auto !px-0 !py-0"
-              type="link"
-              @click="openOrderPercentAdjust(row)"
-            >
-              ¥{{ row.total_pay_price ?? '0.00' }}
-            </Button>
-            <template v-else>¥{{ row.total_pay_price ?? '0.00' }}</template>
-          </div>
-          <div>
-            挂号：
-            <Button
-              v-if="row.register_order_no || row.register_id"
-              class="!h-auto !px-0 !py-0"
-              type="link"
-              :loading="openingRegisterDetail"
-              @click="openRegisterDetail(row)"
-            >
-              {{ formatRegisterAmount(row) }}
-            </Button>
-            <span v-else>{{ formatRegisterAmount(row) }}</span>
-          </div>
-        </div>
-      </template>
-      <template #salesperson="{ row }">
-        <SalespersonCommissionPanel
-          :row="row"
-          :can-view-inviter-commission="canViewInviterCommission"
-          :accruing-order-ids="accruingOrderIds"
-          :reversing-order-ids="reversingOrderIds"
-          @accrue="handleAccrueSalesperson"
-          @reverse="handleReverseSalesperson"
-        />
-      </template>
-      <template #pay-time="{ row }">
-        {{ row?.pay_time || '未支付' }}
-      </template>
-      <template #is-sync-erp="{ row }">
-        <template v-if="row.prescription_type === 1">
-          <Tag v-if="row.is_sync_erp === 1" color="green">已同步</Tag>
-          <Tag v-else color="red">未同步</Tag>
-          <Button
-            class="!h-auto !px-0 !py-0"
-            size="small"
-            type="link"
-            @click="openChinaErpSyncLog(row)"
-          >
-            记录
-          </Button>
+            <template #more>
+              <Button style="margin-left: 16px">
+                批量操作
+                <Icon icon="ant-design:down-outlined" />
+              </Button>
+            </template>
+          </TableAction>
         </template>
-        <template v-else>
-          <Tag v-if="row.is_sync_erp === 1" color="green">已同步</Tag>
-          <Tag v-else color="red">未同步</Tag>
+        <template #order-user-info="{ row }">
+          <OrderUserInfoCell
+            :row="row"
+            @open-doctor="showOrderDoctorCard"
+            @open-user-patients="openOrderUserPatients"
+            @open-patient="openOrderPatient"
+          />
         </template>
-      </template>
-      <template #is-free-shipping="{ row }">
-        <Switch
-          :checked="row.is_free_shipping === 1"
-          checked-children="包邮"
-          un-checked-children="不包邮"
-          @change="(checked: any) => toggleFreeShipping(row, Boolean(checked))"
-        />
-      </template>
-      <template #is-online="{ row }">
-        <Tag v-if="row.is_online === 1" color="blue">在线问诊</Tag>
-        <Tag v-else-if="row.is_online === 2" color="green">在线复诊（诊所）</Tag>
-        <Tag v-else-if="row.is_online === 3" color="green">在线复诊（药店）</Tag>
-        <Tag v-else color="default">线下就诊</Tag>
-      </template>
-      <template #delivery-method="{ row }">
-        <!-- 订单类型：非处方订单（order_type=2）显示订单类型；其余按处方类型全量映射（含特色方 0） -->
-        <div v-if="row.order_type === 2">
-          <Tag color="yellow">
-            {{ ORDER_TYPE_MAP[row.order_type]?.label || '预约购药订单' }}
-          </Tag>
-        </div>
-        <div v-else>
-          <Tag v-if="rowPrescriptionTypeMeta(row)" :color="rowPrescriptionTypeMeta(row)!.color">
-            处方订单【{{ rowPrescriptionTypeMeta(row)!.label }}】
-          </Tag>
-        </div>
-        <div class="mt-3">
-          <Tag v-if="row.delivery_method === 1" color="blue">【到店自提】</Tag>
-          <Tag v-else-if="row.delivery_method === 0" color="green">
-            【上门快递】
-          </Tag>
-        </div>
-        <div class="mt-3">
-          <Tag v-if="rowStatusMeta(row)" :color="rowStatusMeta(row)!.color">
-            {{ rowStatusMeta(row)!.label }}
-          </Tag>
-        </div>
-      </template>
-      <template #toolbar-tools></template>
-      <template #action="{ row }">
-        <!-- 行操作与卡片视图共用 buildRowActions，双视图按钮/权限/显隐保持一致 -->
-        <TableAction
-          :actions="buildRowActions(row).actions"
-          :drop-down-actions="buildRowActions(row).dropDownActions"
-        />
-      </template>
-
-      <template #expand-content="{ row }">
-        <div
-          v-if="row.prescription_type === 2 || row.prescription_type === 5"
-          class="product-list mt-5"
-        >
-          <div
-            v-for="(item, index) in row.product_order_items"
-            :key="index"
-            class="box-card mb-6 rounded-lg p-4"
-          >
-            <div class="flex items-start">
-              <div>
-                <div
-                  class="mr-6 h-32 w-32 overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800"
-                >
-                  <Image
-                    :src="item.drug_image"
-                    alt=""
-                    height="100%"
-                    width="100%"
-                  />
-                </div>
-                <div class="ml-3 mt-5 text-sm">
-                  <span class="text-gray-500 dark:text-gray-400">商品编号：</span>
-                  X00{{ Number(index) + 1 }}
-                </div>
-              </div>
-              <div class="flex-grow space-y-2">
-                <div class="text-sm">
-                  <span class="text-gray-500 dark:text-gray-400">商品名称:</span>
-                  {{ item.display_drug_name || item.drug_name }}
-                </div>
-                <div class="text-sm">
-                  <span class="text-gray-500 dark:text-gray-400">商品规格:</span>
-                  {{ item.drug ? item.drug.specification : '暂无' }}
-                </div>
-                <div class="text-sm">
-                  <span class="text-gray-500 dark:text-gray-400">商品数量:</span>
-                  {{ item.number }}
-                </div>
-                <div class="text-sm">
-                  <span class="text-gray-500 dark:text-gray-400">商品厂家:</span>
-                  {{
-                    item.drug
-                      ? item.drug.source_info != null
-                        ? item.drug.source_info.name
-                        : item.drug.source
-                      : '暂无'
-                  }}
-                </div>
-                <div class="text-sm">
-                  <span class="text-gray-500 dark:text-gray-400">商品价格:</span>
-                  {{ item.price }} 元
-                </div>
-              </div>
+        <template #order-store="{ row }">
+          <div class="leading-snug">
+            <div class="mb-1 flex flex-wrap items-center gap-1">
+              <Tag v-if="row.is_online === 1" color="blue">在线问诊</Tag>
+              <Tag v-else-if="row.is_online === 2" color="green">
+在线复诊（诊所）
+</Tag>
+              <Tag v-else-if="row.is_online === 3" color="green">
+在线复诊（药店）
+</Tag>
+              <Tag v-else color="default">线下就诊</Tag>
+              <!-- 代支付标识放订单号列：状态列过窄且 showOverflow 会裁切底部 Tag -->
+              <Tag
+                v-if="row.is_proxy_pay || Number(row.pay_user_type) === 2"
+                color="magenta"
+              >
+                代支付
+              </Tag>
+            </div>
+            <div class="font-medium">{{ row.order_no }}</div>
+            <div class="text-xs text-[hsl(var(--muted-foreground))]">
+              <StoreNameLink
+                :store-id="row.store?.id"
+                :name="row.store?.name"
+                @click="openStoreCard"
+              />
+            </div>
+            <div class="text-xs text-[hsl(var(--muted-foreground))]">
+              下单时间： {{ row.created_at || '—' }}
             </div>
           </div>
-        </div>
+        </template>
+        <template #express-info="{ row }">
+          <div class="space-y-0.5 text-sm leading-snug">
+            <div class="flex items-start justify-between gap-1">
+              <div>
+                {{
+                  row.address?.name ||
+                  row.express_name ||
+                  row.patient ||
+                  row.cancel_remark ||
+                  '—'
+                }}
+              </div>
+              <Button
+                v-if="Number(row.delivery_method) !== 1"
+                type="link"
+                size="small"
+                class="shrink-0 px-0"
+                @click.stop="copyRowShipAddress(row)"
+              >
+                复制
+              </Button>
+            </div>
+            <div class="text-gray-500">
+              <SensitiveText
+                :record="row.address"
+                field="mobile"
+                :fallback="{ record: row, field: 'patient_mobile' }"
+              />
+            </div>
+            <div class="text-xs text-gray-500">
+              {{ formatExpressAddress(row) }}
+            </div>
+          </div>
+        </template>
+        <!-- 患者配送仓库：点击 Tag 可改仓（本仓库 / 配送仓） -->
+        <template #delivery-warehouses="{ row }">
+          <div
+            v-if="
+              Array.isArray(row.delivery_warehouses) &&
+              row.delivery_warehouses.length
+            "
+            class="flex flex-wrap gap-1"
+          >
+            <Tag
+              v-for="wh in row.delivery_warehouses"
+              :key="wh.id"
+              color="processing"
+              class="cursor-pointer"
+              @click="openChangeWarehouse(row, wh)"
+            >
+              {{ wh.name }}
+            </Tag>
+          </div>
+          <span v-else class="text-[hsl(var(--muted-foreground))]">-</span>
+        </template>
+        <template #price-info="{ row }">
+          <div class="space-y-0.5 text-sm leading-snug">
+            <div>
+              药品：
+              <Button
+                v-if="canRowPercentAdjust(row)"
+                class="!h-auto !px-0 !py-0"
+                type="link"
+                @click="openOrderPercentAdjust(row)"
+              >
+                ¥{{ row.items_price ?? '0.00' }}
+              </Button>
+              <template v-else>¥{{ row.items_price ?? '0.00' }}</template>
+            </div>
+            <div>
+              支付：
+              <Button
+                v-if="canRowPercentAdjust(row)"
+                class="!h-auto !px-0 !py-0"
+                type="link"
+                @click="openOrderPercentAdjust(row)"
+              >
+                ¥{{ row.total_pay_price ?? '0.00' }}
+              </Button>
+              <template v-else>¥{{ row.total_pay_price ?? '0.00' }}</template>
+            </div>
+            <div>
+              挂号：
+              <Button
+                v-if="row.register_order_no || row.register_id"
+                class="!h-auto !px-0 !py-0"
+                type="link"
+                :loading="openingRegisterDetail"
+                @click="openRegisterDetail(row)"
+              >
+                {{ formatRegisterAmount(row) }}
+              </Button>
+              <span v-else>{{ formatRegisterAmount(row) }}</span>
+            </div>
+          </div>
+        </template>
+        <template #salesperson="{ row }">
+          <SalespersonCommissionPanel
+            :row="row"
+            :can-view-inviter-commission="canViewInviterCommission"
+            :accruing-order-ids="accruingOrderIds"
+            :reversing-order-ids="reversingOrderIds"
+            @accrue="handleAccrueSalesperson"
+            @reverse="handleReverseSalesperson"
+          />
+        </template>
+        <template #pay-time="{ row }">
+          {{ row?.pay_time || '未支付' }}
+        </template>
+        <template #is-sync-erp="{ row }">
+          <template v-if="row.prescription_type === 1">
+            <Tag v-if="row.is_sync_erp === 1" color="green">已同步</Tag>
+            <Tag v-else color="red">未同步</Tag>
+            <Button
+              class="!h-auto !px-0 !py-0"
+              size="small"
+              type="link"
+              @click="openChinaErpSyncLog(row)"
+            >
+              记录
+            </Button>
+          </template>
+          <template v-else>
+            <Tag v-if="row.is_sync_erp === 1" color="green">已同步</Tag>
+            <Tag v-else color="red">未同步</Tag>
+          </template>
+        </template>
+        <template #is-free-shipping="{ row }">
+          <Switch
+            :checked="row.is_free_shipping === 1"
+            checked-children="包邮"
+            un-checked-children="不包邮"
+            @change="
+              (checked: any) => toggleFreeShipping(row, Boolean(checked))
+            "
+          />
+        </template>
+        <template #is-online="{ row }">
+          <Tag v-if="row.is_online === 1" color="blue">在线问诊</Tag>
+          <Tag v-else-if="row.is_online === 2" color="green">
+在线复诊（诊所）
+</Tag>
+          <Tag v-else-if="row.is_online === 3" color="green">
+在线复诊（药店）
+</Tag>
+          <Tag v-else color="default">线下就诊</Tag>
+        </template>
+        <template #delivery-method="{ row }">
+          <!-- 订单类型：非处方订单（order_type=2）显示订单类型；其余按处方类型全量映射（含特色方 0） -->
+          <div v-if="row.order_type === 2">
+            <Tag color="yellow">
+              {{ ORDER_TYPE_MAP[row.order_type]?.label || '预约购药订单' }}
+            </Tag>
+          </div>
+          <div v-else>
+            <Tag
+              v-if="rowPrescriptionTypeMeta(row)"
+              :color="rowPrescriptionTypeMeta(row)!.color"
+            >
+              处方订单【{{ rowPrescriptionTypeMeta(row)!.label }}】
+            </Tag>
+          </div>
+          <div class="mt-3">
+            <Tag v-if="row.delivery_method === 1" color="blue">
+【到店自提】
+</Tag>
+            <Tag v-else-if="row.delivery_method === 0" color="green">
+              【上门快递】
+            </Tag>
+          </div>
+          <div class="mt-3">
+            <Tag v-if="rowStatusMeta(row)" :color="rowStatusMeta(row)!.color">
+              {{ rowStatusMeta(row)!.label }}
+            </Tag>
+          </div>
+        </template>
+        <template #toolbar-tools></template>
+        <template #action="{ row }">
+          <!-- 行操作与卡片视图共用 buildRowActions，双视图按钮/权限/显隐保持一致 -->
+          <TableAction
+            :actions="buildRowActions(row).actions"
+            :drop-down-actions="buildRowActions(row).dropDownActions"
+          />
+        </template>
 
-        <div
-          v-if="row.prescription_type === 1"
-          class="medication-details mt-5 px-4 pb-4 w-[60%]"
-        >
-          <span class="mb-3 block font-medium">药品明细：</span>
-          <div class="flex flex-wrap gap-3">
+        <template #expand-content="{ row }">
+          <div
+            v-if="row.prescription_type === 2 || row.prescription_type === 5"
+            class="product-list mt-5"
+          >
             <div
               v-for="(item, index) in row.product_order_items"
               :key="index"
-              class="tcm-drug-chip w-[200px] max-w-full flex-shrink-0 rounded-lg border border-gray-200 bg-white p-3 text-sm dark:border-gray-600 dark:bg-gray-900"
+              class="box-card mb-6 rounded-lg p-4"
             >
-              <div class="font-medium">
-                <Tag v-if="Number(item.type) === 8" color="lime" class="mr-1">辅料</Tag>
-                【{{ item.drug?.drug_number }}】{{ item.display_drug_name || item.drug_name }}
-              </div>
-              <div class="mt-1 text-gray-600 dark:text-gray-400">
-                数量：*{{ item.number * (item.dosage > 0 ? item.dosage : 1) }}
-              </div>
-              <div class="mt-1 text-gray-600 dark:text-gray-400">
-                供货价：{{
-                  item.buy_price != null && item.buy_price !== ''
-                    ? `${item.buy_price} 元/${item.drug?.unit?.name || item.unit?.name || 'g'}`
-                    : '—'
-                }}
-              </div>
-              <div class="mt-1 text-gray-600 dark:text-gray-400">
-                售价：{{
-                  item.buy_price != null && item.buy_price !== ''
-                    ? `${item.price} 元/${item.drug?.unit?.name || item.unit?.name || 'g'}`
-                    : '—'
-                }}
+              <div class="flex items-start">
+                <div>
+                  <div
+                    class="mr-6 h-32 w-32 overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800"
+                  >
+                    <Image
+                      :src="item.drug_image"
+                      alt=""
+                      height="100%"
+                      width="100%"
+                    />
+                  </div>
+                  <div class="ml-3 mt-5 text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">商品编号：</span>
+                    X00{{ Number(index) + 1 }}
+                  </div>
+                </div>
+                <div class="flex-grow space-y-2">
+                  <div class="text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">商品名称:</span>
+                    {{ item.display_drug_name || item.drug_name }}
+                  </div>
+                  <div class="text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">商品规格:</span>
+                    {{ item.drug ? item.drug.specification : '暂无' }}
+                  </div>
+                  <div class="text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">商品数量:</span>
+                    {{ item.number }}
+                  </div>
+                  <div class="text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">商品厂家:</span>
+                    {{
+                      item.drug
+                        ? item.drug.source_info != null
+                          ? item.drug.source_info.name
+                          : item.drug.source
+                        : '暂无'
+                    }}
+                  </div>
+                  <div class="text-sm">
+                    <span class="text-gray-500 dark:text-gray-400">商品价格:</span>
+                    {{ item.price }} 元
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div v-if="!row.prescription_type"></div>
-        <div
-          class="order-summary mt-6 flex flex-wrap items-center justify-center gap-4 rounded-lg bg-gray-100 p-4 dark:bg-gray-800"
-        >
-          <span class="text-sm">
-            采购价：{{ row.market_price || '0.00' }}
-            <Tag v-if="isMarketPriceAbnormal(row)" color="error" class="ml-1">
-              采购价异常
-            </Tag>
-            <Button
-              v-if="isMarketPriceAbnormal(row)"
-              type="link"
-              size="small"
-              class="!px-1"
-              @click="handleRecalculateMarketPrice(row)"
-            >
-              重算
-            </Button>
-          </span>
-          <span class="text-sm">快递费：{{ row.trans_expenses || '0.00' }}</span>
-          <span class="text-sm">诊疗费：{{ row.treatement_price || '0.00' }}</span>
-          <span class="text-sm">加工费：{{ row.process_price || '0.00' }}</span>
-          <span v-if="Number(row.decoct_price) > 0" class="text-sm">
-            煎药费：{{ row.decoct_price || '0.00' }}
-          </span>
-        </div>
-      </template>
-    </Grid>
-    <!-- 卡片看板视图：展示内容与列表一致，行操作/弹窗全部复用父级逻辑 -->
-    <div v-else class="min-h-0 flex-1 overflow-y-auto">
-      <ProductOrderCardList
-        ref="cardListRef"
-        :form-values="searchValues"
-        :build-row-actions="buildRowActions"
-        :can-percent-adjust="canRowPercentAdjust"
-        :can-view-inviter-commission="canViewInviterCommission"
-        :accruing-order-ids="accruingOrderIds"
-        :reversing-order-ids="reversingOrderIds"
-        @open-store="openStoreCard"
-        @open-doctor="showOrderDoctorCard"
-        @open-user-patients="openOrderUserPatients"
-        @open-patient="openOrderPatient"
-        @open-warehouse="openChangeWarehouse"
-        @toggle-free-shipping="toggleFreeShipping"
-        @percent-adjust="openOrderPercentAdjust"
-        @go-register="openRegisterDetail"
-        @open-china-erp-sync-log="openChinaErpSyncLog"
-        @accrue-salesperson="handleAccrueSalesperson"
-        @reverse-salesperson="handleReverseSalesperson"
-      />
-    </div>
+
+          <div
+            v-if="row.prescription_type === 1"
+            class="medication-details mt-5 px-4 pb-4 w-[60%]"
+          >
+            <span class="mb-3 block font-medium">药品明细：</span>
+            <div class="flex flex-wrap gap-3">
+              <div
+                v-for="(item, index) in row.product_order_items"
+                :key="index"
+                class="tcm-drug-chip w-[200px] max-w-full flex-shrink-0 rounded-lg border border-gray-200 bg-white p-3 text-sm dark:border-gray-600 dark:bg-gray-900"
+              >
+                <div class="font-medium">
+                  <Tag v-if="Number(item.type) === 8" color="lime" class="mr-1">
+辅料
+</Tag>
+                  【{{ item.drug?.drug_number }}】{{
+                    item.display_drug_name || item.drug_name
+                  }}
+                </div>
+                <div class="mt-1 text-gray-600 dark:text-gray-400">
+                  数量：*{{ item.number * (item.dosage > 0 ? item.dosage : 1) }}
+                </div>
+                <div class="mt-1 text-gray-600 dark:text-gray-400">
+                  供货价：{{
+                    item.buy_price != null && item.buy_price !== ''
+                      ? `${item.buy_price} 元/${item.drug?.unit?.name || item.unit?.name || 'g'}`
+                      : '—'
+                  }}
+                </div>
+                <div class="mt-1 text-gray-600 dark:text-gray-400">
+                  售价：{{
+                    item.buy_price != null && item.buy_price !== ''
+                      ? `${item.price} 元/${item.drug?.unit?.name || item.unit?.name || 'g'}`
+                      : '—'
+                  }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-if="!row.prescription_type"></div>
+          <div
+            class="order-summary mt-6 flex flex-wrap items-center justify-center gap-4 rounded-lg bg-gray-100 p-4 dark:bg-gray-800"
+          >
+            <span class="text-sm">
+              采购价：{{ row.market_price || '0.00' }}
+              <Tag v-if="isMarketPriceAbnormal(row)" color="error" class="ml-1">
+                采购价异常
+              </Tag>
+              <Button
+                v-if="isMarketPriceAbnormal(row)"
+                type="link"
+                size="small"
+                class="!px-1"
+                @click="handleRecalculateMarketPrice(row)"
+              >
+                重算
+              </Button>
+            </span>
+            <span class="text-sm">快递费：{{ row.trans_expenses || '0.00' }}</span>
+            <span class="text-sm">诊疗费：{{ row.treatement_price || '0.00' }}</span>
+            <span class="text-sm">加工费：{{ row.process_price || '0.00' }}</span>
+            <span v-if="Number(row.decoct_price) > 0" class="text-sm">
+              煎药费：{{ row.decoct_price || '0.00' }}
+            </span>
+          </div>
+        </template>
+      </Grid>
+      <!-- 卡片看板视图：展示内容与列表一致，行操作/弹窗全部复用父级逻辑 -->
+      <div v-else class="min-h-0 flex-1 overflow-y-auto">
+        <ProductOrderCardList
+          ref="cardListRef"
+          :form-values="searchValues"
+          :build-row-actions="buildRowActions"
+          :can-percent-adjust="canRowPercentAdjust"
+          :can-view-inviter-commission="canViewInviterCommission"
+          :accruing-order-ids="accruingOrderIds"
+          :reversing-order-ids="reversingOrderIds"
+          @open-store="openStoreCard"
+          @open-doctor="showOrderDoctorCard"
+          @open-user-patients="openOrderUserPatients"
+          @open-patient="openOrderPatient"
+          @open-warehouse="openChangeWarehouse"
+          @toggle-free-shipping="toggleFreeShipping"
+          @percent-adjust="openOrderPercentAdjust"
+          @go-register="openRegisterDetail"
+          @open-china-erp-sync-log="openChinaErpSyncLog"
+          @accrue-salesperson="handleAccrueSalesperson"
+          @reverse-salesperson="handleReverseSalesperson"
+        />
+      </div>
     </div>
     <PercentAdjustDrawer />
     <!-- 订单改仓：按药分别选仓 -->
@@ -1769,7 +1888,10 @@ function buildRowActions(row: Record<string, any>): {
           · 将改仓 {{ changeWhPendingCount }} 种药品
         </span>
       </div>
-      <div v-if="changeWhLoading" class="text-muted-foreground py-4 text-center">
+      <div
+        v-if="changeWhLoading"
+        class="text-muted-foreground py-4 text-center"
+      >
         加载可选仓库…
       </div>
       <div v-else class="change-wh-drug-list space-y-4">
diff --git a/apps/web-antd/src/views/business/order/register/api/index.ts b/apps/web-antd/src/views/business/order/register/api/index.ts
index eeef4a60..823bffa3 100644
--- a/apps/web-antd/src/views/business/order/register/api/index.ts
+++ b/apps/web-antd/src/views/business/order/register/api/index.ts
@@ -99,3 +99,13 @@ export async function getRegisterVoucherQrcodeApi(registerId: number) {
     register_id: registerId,
   });
 }
+
+/**
+ * 管理端重开接诊：已结束 → 接诊中，并重建 24h 自动结束队列
+ */
+export async function reopenRegisterConsultingApi(data: {
+  reason: string;
+  register_id: number;
+}) {
+  return requestClient.post<any>(`${prefix}reopen-consulting`, data);
+}
diff --git a/apps/web-antd/src/views/business/order/register/components/RegisterOrderCardList.vue b/apps/web-antd/src/views/business/order/register/components/RegisterOrderCardList.vue
index 239aa80c..eb0ff2b1 100644
--- a/apps/web-antd/src/views/business/order/register/components/RegisterOrderCardList.vue
+++ b/apps/web-antd/src/views/business/order/register/components/RegisterOrderCardList.vue
@@ -9,11 +9,18 @@
  */
 import type { ActionItem } from '#/components/table-action';
 
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
 
 import { Empty, Image, message, Spin } from 'ant-design-vue';
 
-import { TableAction } from '#/components/table-action';
+import { CardActions } from '#/components/table-action';
 import { pillStyle, tagColorHex } from '#/utils/tagColor';
 
 import { getRegisterListApi } from '../api';
@@ -24,27 +31,31 @@ import {
 } from '../config/constants';
 
 const props = defineProps<{
-  /** 顶部统一搜索条件（含 patient_keyword / doctor_keyword / type / is_pay 等） */
-  formValues?: Record<string, any>;
   /** 是否可退款（与列表行操作同一份判定，父级传入保证口径一致） */
   canRefund: (row: Record<string, any>) => boolean;
+  /** 是否可重开接诊（已结束 → 接诊中） */
+  canReopenConsulting: (row: Record<string, any>) => boolean;
   /** 是否可改期（与列表行操作同一份判定，父级传入保证口径一致） */
   canReschedule: (row: Record<string, any>) => boolean;
+  /** 顶部统一搜索条件（含 patient_keyword / doctor_keyword / type / is_pay 等） */
+  formValues?: Record<string, any>;
 }>();
 
 const emit = defineEmits<{
   /** 点卡片打开挂号详情弹窗 */
   openDetail: [row: Record<string, any>];
-  /** 退款（复用父级退款弹窗） */
-  refund: [registerId: number];
-  /** 改期（复用父级改期弹窗） */
-  reschedule: [row: Record<string, any>];
   /** 点处方号打开处方详情 */
   openPrescription: [prescriptionId: number];
   /** 点诊所名打开诊所卡片 */
   openStore: [storeId: number];
   /** 打印预览挂号凭证 */
   printReceipt: [row: Record<string, any>];
+  /** 退款（复用父级退款弹窗） */
+  refund: [registerId: number];
+  /** 重开接诊 */
+  reopenConsulting: [row: Record<string, any>];
+  /** 改期（复用父级改期弹窗） */
+  reschedule: [row: Record<string, any>];
 }>();
 
 const items = ref<any[]>([]);
@@ -83,36 +94,49 @@ function money(value: unknown) {
   return Number.isFinite(n) ? n.toFixed(2) : '—';
 }
 
-/** 行操作：详情 / 打印预览 / 改期 / 退款（显隐与列表一致），通过 emit 复用父级弹窗 */
-function buildActions(row: Record<string, any>): ActionItem[] {
-  return [
-    {
-      label: '详情',
-      type: 'link',
-      icon: 'marketeq:eye',
-      onClick: () => emit('openDetail', row),
-    },
-    {
-      label: '打印预览',
-      type: 'link',
-      icon: 'ant-design:printer-outlined',
-      onClick: () => emit('printReceipt', row),
-    },
-    {
-      label: '改期',
-      type: 'link',
-      icon: 'ant-design:calendar-outlined',
-      ifShow: props.canReschedule(row),
-      onClick: () => emit('reschedule', row),
-    },
-    {
-      label: '退款',
-      type: 'link',
-      icon: 'mingcute:refund-dollar-fill',
-      ifShow: props.canRefund(row),
-      onClick: () => emit('refund', Number(row.id)),
-    },
-  ];
+/** 行操作：主按钮详情 + 更多（打印/改期/退款/重开），对齐商品订单 CardActions */
+function buildCardActions(row: Record<string, any>): {
+  actions: ActionItem[];
+  dropDownActions: ActionItem[];
+} {
+  return {
+    actions: [
+      {
+        label: '详情',
+        type: 'link',
+        icon: 'marketeq:eye',
+        onClick: () => emit('openDetail', row),
+      },
+      {
+        label: '打印预览',
+        type: 'link',
+        icon: 'ant-design:printer-outlined',
+        onClick: () => emit('printReceipt', row),
+      },
+      {
+        label: '改期',
+        type: 'link',
+        icon: 'ant-design:calendar-outlined',
+        ifShow: props.canReschedule(row),
+        onClick: () => emit('reschedule', row),
+      },
+      {
+        label: '退款',
+        type: 'link',
+        icon: 'mingcute:refund-dollar-fill',
+        ifShow: props.canRefund(row),
+        onClick: () => emit('refund', Number(row.id)),
+      },
+      {
+        label: '重开接诊',
+        type: 'link',
+        icon: 'ant-design:reload-outlined',
+        ifShow: props.canReopenConsulting(row),
+        onClick: () => emit('reopenConsulting', row),
+      },
+    ],
+    dropDownActions: [],
+  };
 }
 
 /**
@@ -130,10 +154,12 @@ async function fetchPage(targetPage: number, reset = false) {
     const res: any = await getRegisterListApi({
       page: targetPage,
       pageSize: 12,
-      ...(props.formValues || {}),
+      ...props.formValues,
     });
     if (seq !== requestSeq) return;
-    items.value = reset ? (res?.items ?? []) : [...items.value, ...(res?.items ?? [])];
+    items.value = reset
+      ? (res?.items ?? [])
+      : [...items.value, ...(res?.items ?? [])];
     page.value = res?.page ?? targetPage;
     pageCount.value = res?.page_count ?? 1;
   } catch (error) {
@@ -164,7 +190,7 @@ async function refreshKeepPage() {
     const res: any = await getRegisterListApi({
       page: 1,
       pageSize: loaded,
-      ...(props.formValues || {}),
+      ...props.formValues,
     });
     if (seq !== requestSeq) return;
     items.value = res?.items ?? [];
@@ -233,19 +259,25 @@ onBeforeUnmount(() => {
           @keydown.enter="emit('openDetail', row)"
         >
           <!-- 角落径向荧光（与提现管理统计岛同款质感装饰） -->
-          <div class="rg-card__glow" />
+          <div class="rg-card__glow"></div>
           <!-- 头部：诊所名（可点）+ 状态彩点 -->
           <div class="rg-card__head">
             <button
               v-if="row.store?.id || row.store_id"
               type="button"
               class="rg-card__store"
-              @click.stop="emit('openStore', Number(row.store?.id || row.store_id))"
+              @click.stop="
+                emit('openStore', Number(row.store?.id || row.store_id))
+              "
             >
-              <span class="rg-card__store-name">{{ row.store?.name || '—' }}</span>
+              <span class="rg-card__store-name">{{
+                row.store?.name || '—'
+              }}</span>
               <span class="rg-card__store-arrow">›</span>
             </button>
-            <span v-else class="rg-card__store-name">{{ row.store?.name || '—' }}</span>
+            <span v-else class="rg-card__store-name">{{
+              row.store?.name || '—'
+            }}</span>
             <span
               v-if="statusMeta(row)"
               class="rg-card__status"
@@ -266,13 +298,24 @@ onBeforeUnmount(() => {
           </div>
           <!-- 语义胶囊行：挂号方式/支付/退款，右侧挂号费金额（C 端惯例右上金额） -->
           <div class="rg-card__pills">
-            <span v-if="typeMeta(row)" class="rg-pill" :style="pillStyle(typeMeta(row)!.color)">
+            <span
+              v-if="typeMeta(row)"
+              class="rg-pill"
+              :style="pillStyle(typeMeta(row)!.color)"
+            >
               {{ typeMeta(row)!.label }}
             </span>
-            <span class="rg-pill" :style="pillStyle(row.is_pay === 1 ? 'green' : 'red')">
+            <span
+              class="rg-pill"
+              :style="pillStyle(row.is_pay === 1 ? 'green' : 'red')"
+            >
               {{ row.is_pay === 1 ? '已支付' : '未支付' }}
             </span>
-            <span v-if="refundMeta(row)" class="rg-pill" :style="pillStyle(refundMeta(row)!.color)">
+            <span
+              v-if="refundMeta(row)"
+              class="rg-pill"
+              :style="pillStyle(refundMeta(row)!.color)"
+            >
               {{ refundMeta(row)!.label }}
             </span>
             <span class="rg-card__amount-value"><i>¥</i>{{ money(row.price) }}</span>
@@ -296,7 +339,9 @@ onBeforeUnmount(() => {
               <em class="rg-card__salesperson">
                 <Image
                   v-if="row.salesperson?.id"
-                  :src="row.salesperson.avatar || '/img/user-default-avatar.png'"
+                  :src="
+                    row.salesperson.avatar || '/img/user-default-avatar.png'
+                  "
                   :width="16"
                   :height="16"
                   :preview="false"
@@ -308,7 +353,10 @@ onBeforeUnmount(() => {
             </span>
           </div>
           <!-- 关联处方（有才显示） -->
-          <div v-if="Array.isArray(row.prescription) && row.prescription.length" class="rg-card__rx">
+          <div
+            v-if="Array.isArray(row.prescription) && row.prescription.length"
+            class="rg-card__rx"
+          >
             <button
               v-for="item in row.prescription"
               :key="item.id"
@@ -323,14 +371,21 @@ onBeforeUnmount(() => {
           <div class="rg-card__spacer"></div>
           <!-- 底部操作：详情/退款（阻止冒泡避免触发卡片点击） -->
           <div class="rg-card__footer" @click.stop>
-            <TableAction :actions="buildActions(row)" :drop-down-actions="[]" />
+            <CardActions
+              :actions="buildCardActions(row).actions"
+              :drop-down-actions="buildCardActions(row).dropDownActions"
+              :max-visible="1"
+            />
           </div>
         </div>
       </div>
       <Empty v-else-if="!loading" description="暂无挂号订单" />
     </Spin>
     <div ref="sentinelEl" class="h-8"></div>
-    <div v-if="loadingMore" class="py-3 text-center text-xs text-[hsl(var(--muted-foreground))]">
+    <div
+      v-if="loadingMore"
+      class="py-3 text-center text-xs text-[hsl(var(--muted-foreground))]"
+    >
       加载中…
     </div>
     <div
@@ -345,6 +400,7 @@ onBeforeUnmount(() => {
 <style scoped>
 .rg-card-scroll {
   height: 100%;
+
   /* 左右留 6px：通栏卡片 hover 阴影不被容器裁出切边 */
   padding: 4px 6px 20px;
   overflow: auto;
@@ -370,9 +426,9 @@ onBeforeUnmount(() => {
     hsl(var(--primary) / 4%),
     hsl(var(--card, var(--background)))
   );
-  backdrop-filter: blur(8px);
   border: 1px solid hsl(var(--border));
   border-radius: 12px;
+  backdrop-filter: blur(8px);
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
@@ -395,7 +451,11 @@ onBeforeUnmount(() => {
   width: 110px;
   height: 110px;
   pointer-events: none;
-  background: radial-gradient(circle, hsl(var(--primary) / 18%) 0%, transparent 70%);
+  background: radial-gradient(
+    circle,
+    hsl(var(--primary) / 18%) 0%,
+    transparent 70%
+  );
   opacity: 0.4;
   transition: opacity 0.2s ease;
 }
@@ -413,9 +473,9 @@ onBeforeUnmount(() => {
 
 .rg-card__store {
   display: inline-flex;
-  min-width: 0;
-  align-items: center;
   gap: 2px;
+  align-items: center;
+  min-width: 0;
   padding: 0;
   cursor: pointer;
   background: none;
@@ -424,11 +484,11 @@ onBeforeUnmount(() => {
 
 .rg-card__store-name {
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 600;
-  letter-spacing: -0.2px;
   color: hsl(var(--foreground));
-  text-overflow: ellipsis;
+  letter-spacing: -0.2px;
   white-space: nowrap;
 }
 
@@ -517,10 +577,10 @@ onBeforeUnmount(() => {
 
 .rg-kv > em {
   overflow: hidden;
+  text-overflow: ellipsis;
   font-style: normal;
   font-weight: 500;
   color: hsl(var(--foreground));
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -559,8 +619,8 @@ onBeforeUnmount(() => {
   font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 16px;
   font-weight: 700;
-  letter-spacing: -0.3px;
   color: hsl(var(--foreground));
+  letter-spacing: -0.3px;
 }
 
 .rg-card__amount-value i {
diff --git a/apps/web-antd/src/views/business/order/register/components/reopen-consulting-modal.vue b/apps/web-antd/src/views/business/order/register/components/reopen-consulting-modal.vue
new file mode 100644
index 00000000..dbf8a3c8
--- /dev/null
+++ b/apps/web-antd/src/views/business/order/register/components/reopen-consulting-modal.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+/**
+ * 挂号重开接诊弹窗：已结束(3) → 接诊中(2)，重建 24h 自动结束队列
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert, Form, FormItem, Input, message } from 'ant-design-vue';
+
+import { reopenRegisterConsultingApi } from '../api';
+
+const row = ref<null | Record<string, any>>(null);
+const reason = ref('');
+const onSuccess = ref<(() => void) | null>(null);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    if (!row.value?.id) return;
+    if (reason.value.trim() === '') {
+      message.error('请填写重开原因');
+      return;
+    }
+    modalApi.setState({ confirmLoading: true, loading: true });
+    try {
+      await reopenRegisterConsultingApi({
+        register_id: Number(row.value.id),
+        reason: reason.value.trim(),
+      });
+      message.success('已重开为接诊中');
+      onSuccess.value?.();
+      modalApi.close();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      modalApi.setState({ confirmLoading: false, loading: false });
+    }
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        onSuccess?: () => void;
+        row: Record<string, any>;
+      }>();
+      row.value = data?.row ?? null;
+      onSuccess.value = data?.onSuccess ?? null;
+      reason.value = '';
+    } else {
+      row.value = null;
+      onSuccess.value = null;
+      reason.value = '';
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="重开接诊" class="w-[480px]">
+    <Alert
+      type="warning"
+      show-icon
+      class="mb-3"
+      message="将把本单从「已结束」改回「接诊中」，并重新生效 24 小时自动结束策略。不会重新触发接诊分账与患者通知。"
+    />
+    <Form layout="vertical">
+      <FormItem label="订单号">
+        <span>{{ row?.order_no || row?.id || '—' }}</span>
+      </FormItem>
+      <FormItem label="重开原因" required>
+        <Input.TextArea
+          v-model:value="reason"
+          :rows="3"
+          placeholder="例如：医生误点结束，需继续修改处方"
+          allow-clear
+        />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/business/order/register/config/search.ts b/apps/web-antd/src/views/business/order/register/config/search.ts
index 75e14425..c7cf5292 100644
--- a/apps/web-antd/src/views/business/order/register/config/search.ts
+++ b/apps/web-antd/src/views/business/order/register/config/search.ts
@@ -21,7 +21,8 @@ export const formOptions: VbenFormProps = {
     },
   },
   // 响应式多列：抽出 grid 后 vben form 默认单列（一行一个字段），必须显式给栅格
-  wrapperClass: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+  wrapperClass:
+    'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
   schema: [
     {
       // 放第一位：时间范围有默认值（本月至今），默认收起时必须始终可见，否则用户不知道当前查的是哪段数据
@@ -56,6 +57,17 @@ export const formOptions: VbenFormProps = {
       fieldName: 'transaction_id',
       label: '支付单号',
     },
+    {
+      // 门店多选：与商品订单同组件，后端 resolveRequestStoreIds
+      component: 'StoreMultiSearch',
+      componentProps: {
+        placeholder: '输入名称或拼音首拼',
+      },
+      defaultValue: [],
+      fieldName: 'store_ids',
+      modelPropName: 'value',
+      label: '门店',
+    },
     {
       // 就诊人姓名/手机号模糊（后端 PersonKeywordScopeService，whereHas 关联表）
       component: 'Input',
diff --git a/apps/web-antd/src/views/business/order/register/index.vue b/apps/web-antd/src/views/business/order/register/index.vue
index 84f68e20..8e78e573 100644
--- a/apps/web-antd/src/views/business/order/register/index.vue
+++ b/apps/web-antd/src/views/business/order/register/index.vue
@@ -16,27 +16,28 @@ import { useRoute } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Button, Image, Tag, message } from 'ant-design-vue';
+import { Button, Image, message, Tag } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { useFreshSearchTime } from '#/composables/use-fresh-search-time';
 import StoreCardModal from '#/components/store-card/StoreCardModal.vue';
 import StoreNameLink from '#/components/store-card/StoreNameLink.vue';
 import { TableAction } from '#/components/table-action';
-import { monthToTodayRangeString } from '#/utils/search-time-range';
 import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
-import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
+import { useFreshSearchTime } from '#/composables/use-fresh-search-time';
+import { monthToTodayRangeString } from '#/utils/search-time-range';
 import {
-  ORDER_POPUP_Z_INDEX,
   openOrderPopup,
+  ORDER_POPUP_Z_INDEX,
 } from '#/views/business/order/utils/popup-z-index';
+import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
 
 import { getRegisterListApi } from './api';
 import Refund from './components/refund.vue';
 import RegisterDetailModal from './components/RegisterDetailModal.vue';
 import RegisterOrderCardList from './components/RegisterOrderCardList.vue';
 import RegisterReceiptPrintModal from './components/RegisterReceiptPrintModal.vue';
+import ReopenConsultingModal from './components/reopen-consulting-modal.vue';
 import RescheduleModal from './components/reschedule-modal.vue';
 import {
   REGISTER_REFUND_STATUS_MAP,
@@ -134,7 +135,7 @@ async function readLiveSearchValues(): Promise<Record<string, any>> {
   try {
     await nextTick();
     const live = await searchFormApi.getValues();
-    return { ...(live || {}) };
+    return { ...live };
   } catch {
     return { ...searchValues.value };
   }
@@ -202,7 +203,8 @@ const freshSearchTime = useFreshSearchTime({
   },
 });
 freshSearchTimeBridge.resetSearchTime = freshSearchTime.resetSearchTime;
-freshSearchTimeBridge.markSearchTimeTouched = freshSearchTime.markSearchTimeTouched;
+freshSearchTimeBridge.markSearchTimeTouched =
+  freshSearchTime.markSearchTimeTouched;
 
 // 记忆持久化由 useViewMode 内部完成；切回列表时 grid 被 v-if 卸载过需主动重查
 watch(viewMode, (mode, prev) => {
@@ -320,11 +322,70 @@ function canReschedule(row: Record<string, any>) {
   return row.is_pay === 1 && row.status === 1 && row.is_cancel !== 1;
 }
 
+/** 仅「已结束」可重开为接诊中（医生误点结束需继续改方） */
+function canReopenConsulting(row: Record<string, any>) {
+  return Number(row.status) === 3;
+}
+
 function openRescheduleModal(row: Record<string, any>) {
   rescheduleModalApi.setData({ row, gridApi: gridApiProxy });
   rescheduleModalApi.open();
 }
 
+const [ReopenConsultingModalComp, reopenConsultingModalApi] = useVbenModal({
+  connectedComponent: ReopenConsultingModal,
+});
+
+function openReopenConsulting(row: Record<string, any>) {
+  reopenConsultingModalApi.setData({
+    row,
+    onSuccess: () => refreshCurrentView(),
+  });
+  reopenConsultingModalApi.open();
+}
+
+/** 列表行操作（与卡片 CardActions 同源口径） */
+function buildRowActions(row: Record<string, any>) {
+  return {
+    actions: [
+      {
+        label: '详情',
+        type: 'link' as const,
+        icon: 'marketeq:eye',
+        onClick: () => openRegisterDetail(row),
+      },
+      {
+        label: '打印预览',
+        type: 'link' as const,
+        icon: 'ant-design:printer-outlined',
+        onClick: () => openRegisterReceiptPrint(row),
+      },
+      {
+        label: '改期',
+        type: 'link' as const,
+        icon: 'ant-design:calendar-outlined',
+        ifShow: canReschedule(row),
+        onClick: () => openRescheduleModal(row),
+      },
+      {
+        label: '退款',
+        type: 'link' as const,
+        icon: 'mingcute:refund-dollar-fill',
+        ifShow: canRefund(row),
+        onClick: () => openRefundModal(row.id),
+      },
+      {
+        label: '重开接诊',
+        type: 'link' as const,
+        icon: 'ant-design:reload-outlined',
+        ifShow: canReopenConsulting(row),
+        onClick: () => openReopenConsulting(row),
+      },
+    ],
+    dropDownActions: [] as any[],
+  };
+}
+
 function formatRegisterPrice(price: unknown) {
   const n = Number(price);
   if (!Number.isFinite(n)) {
@@ -355,6 +416,7 @@ function rowRefundMeta(row: Record<string, any>) {
     <PrescriptionDetailModal />
     <RefundModal />
     <RescheduleModalComp />
+    <ReopenConsultingModalComp />
     <StoreCardModalComp />
     <RegisterReceiptPrintModalComp />
     <!-- 挂号详情弹窗：处方号/诊所名透传；打印预览由详情内部自挂载 -->
@@ -434,35 +496,8 @@ function rowRefundMeta(row: Record<string, any>) {
       <template #toolbar-tools></template>
       <template #action="{ row }">
         <TableAction
-          :actions="[
-            {
-              label: '详情',
-              type: 'link',
-              icon: 'marketeq:eye',
-              onClick: openRegisterDetail.bind(null, row),
-            },
-            {
-              label: '打印预览',
-              type: 'link',
-              icon: 'ant-design:printer-outlined',
-              onClick: openRegisterReceiptPrint.bind(null, row),
-            },
-            {
-              label: '改期',
-              type: 'link',
-              icon: 'ant-design:calendar-outlined',
-              ifShow: canReschedule(row),
-              onClick: openRescheduleModal.bind(null, row),
-            },
-            {
-              label: '退款',
-              type: 'link',
-              icon: 'mingcute:refund-dollar-fill',
-              ifShow: canRefund(row),
-              onClick: openRefundModal.bind(null, row.id),
-            },
-          ]"
-          :drop-down-actions="[]"
+          :actions="buildRowActions(row).actions"
+          :drop-down-actions="buildRowActions(row).dropDownActions"
         />
       </template>
     </Grid>
@@ -473,12 +508,14 @@ function rowRefundMeta(row: Record<string, any>) {
         :form-values="searchValues"
         :can-refund="canRefund"
         :can-reschedule="canReschedule"
+        :can-reopen-consulting="canReopenConsulting"
         @open-detail="openRegisterDetail"
         @refund="openRefundModal"
         @reschedule="openRescheduleModal"
         @open-prescription="openPrescriptionDetail"
         @open-store="openStoreCard"
         @print-receipt="openRegisterReceiptPrint"
+        @reopen-consulting="openReopenConsulting"
       />
     </div>
   </Page>
diff --git a/apps/web-antd/src/views/dashboard/analytics/api/index.ts b/apps/web-antd/src/views/dashboard/analytics/api/index.ts
new file mode 100644
index 00000000..996e2391
--- /dev/null
+++ b/apps/web-antd/src/views/dashboard/analytics/api/index.ts
@@ -0,0 +1,14 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'analytics/';
+
+/**
+ * 平台统计面板（xk-api GET analytics/platform-panel）
+ * 入参 search_time + module（当前 Tab），每次只返回该模块数据；is_super_admin 每响应都带
+ */
+export async function getPlatformPanelApi(data: {
+  module: string;
+  search_time: any;
+}) {
+  return requestClient.get<any>(`${prefix}platform-panel`, { params: data });
+}
diff --git a/apps/web-antd/src/views/dashboard/analytics/components/RankList.vue b/apps/web-antd/src/views/dashboard/analytics/components/RankList.vue
new file mode 100644
index 00000000..eca298d7
--- /dev/null
+++ b/apps/web-antd/src/views/dashboard/analytics/components/RankList.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+/**
+ * 分析页 · 简易排行列表（录入数 / 营业额）
+ * 进度条相对第一名比例绘制；金额类用 ¥，数量类不加前缀
+ */
+import { computed } from 'vue';
+
+import { formatMoney } from '#/views/finance/visualization-chart/utils/chart-theme';
+
+export interface RankRow {
+  name: string;
+  count?: number;
+  amount?: number;
+}
+
+const props = defineProps<{
+  emptyText?: string;
+  items: RankRow[];
+  /** count | amount */
+  valueKey?: 'amount' | 'count';
+}>();
+
+const rows = computed(() => {
+  const key = props.valueKey || 'count';
+  const top = Number(props.items[0]?.[key] || 0);
+  return props.items.map((item, index) => {
+    const value = Number(item[key] || 0);
+    return {
+      ...item,
+      rank: index + 1,
+      value,
+      progress: top > 0 ? Math.max(4, (value / top) * 100) : 0,
+      display:
+        key === 'amount'
+          ? `¥${formatMoney(value)}`
+          : value.toLocaleString('zh-CN'),
+    };
+  });
+});
+</script>
+
+<template>
+  <div class="rank">
+    <div v-if="rows.length === 0" class="rank-empty">
+      {{ emptyText || '暂无数据' }}
+    </div>
+    <div v-for="row in rows" :key="`${row.rank}-${row.name}`" class="rank-row">
+      <span
+        class="rank-badge"
+        :class="`rank-badge--${row.rank <= 3 ? row.rank : 'n'}`"
+      >
+        {{ row.rank }}
+      </span>
+      <div class="rank-main">
+        <div class="rank-name" :title="row.name">{{ row.name }}</div>
+        <div class="rank-bar">
+          <div class="rank-bar-fill" :style="{ width: `${row.progress}%` }"></div>
+        </div>
+      </div>
+      <div class="rank-value">{{ row.display }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rank {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.rank-empty {
+  padding: 28px 0;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+}
+
+.rank-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.rank-badge {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  font-weight: 700;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 60%);
+  border-radius: 8px;
+}
+
+.rank-badge--1 {
+  color: rgb(230 140 0);
+  background: linear-gradient(
+    145deg,
+    rgb(255 214 10 / 35%),
+    rgb(255 159 10 / 18%)
+  );
+}
+
+.rank-badge--2 {
+  color: hsl(var(--foreground) / 70%);
+  background: linear-gradient(
+    145deg,
+    rgb(203 213 225 / 45%),
+    rgb(148 163 184 / 18%)
+  );
+}
+
+.rank-badge--3 {
+  color: rgb(234 110 40);
+  background: linear-gradient(
+    145deg,
+    rgb(251 146 60 / 30%),
+    rgb(234 88 12 / 15%)
+  );
+}
+
+.rank-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.rank-name {
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.rank-bar {
+  height: 5px;
+  overflow: hidden;
+  background: hsl(var(--muted) / 60%);
+  border-radius: 999px;
+}
+
+.rank-bar-fill {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    hsl(var(--primary) / 55%),
+    hsl(var(--primary))
+  );
+  border-radius: inherit;
+  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.rank-value {
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/apps/web-antd/src/views/dashboard/analytics/index.vue b/apps/web-antd/src/views/dashboard/analytics/index.vue
index e794c99a..e090d9d7 100644
--- a/apps/web-antd/src/views/dashboard/analytics/index.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/index.vue
@@ -1,90 +1,1212 @@
-<script lang="ts" setup>
-import type { AnalysisOverviewItem } from '@vben/common-ui';
-import type { TabOption } from '@vben/types';
+<script setup lang="ts">
+/**
+ * 平台统计分析页（液态玻璃看板）
+ * 顶部固定总览 KPI；下方 Tab：订单 / 门店 / 医生患者 / 财务 / 业务员 / AI / 运维(超管)
+ * 时间变更并行拉总览+当前模块；切 Tab 只拉当前模块
+ */
+import type { Dayjs } from 'dayjs';
 
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { computed, nextTick, onActivated, ref, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { usePreferences } from '@vben/preferences';
+
+import { Button, Spin, Tabs } from 'ant-design-vue';
+
+import SearchTimeRangePicker from '#/components/form/components/search-time-range-picker.vue';
+import { GlassCard } from '#/components/glass-card';
+import { monthToTodayRangeDayjs } from '#/utils/search-time-range';
+import KpiGlassCard from '#/views/finance/visualization-chart/components/KpiGlassCard.vue';
 import {
-  AnalysisChartCard,
-  AnalysisChartsTabs,
-  AnalysisOverview,
-} from '@vben/common-ui';
-import {
-  SvgBellIcon,
-  SvgCakeIcon,
-  SvgCardIcon,
-  SvgDownloadIcon,
-} from '@vben/icons';
+  formatAxisMoney,
+  formatMoney,
+  getChartPalette,
+  GLASS_SERIES_COLORS,
+  glassTooltip,
+} from '#/views/finance/visualization-chart/utils/chart-theme';
 
-import AnalyticsTrends from './analytics-trends.vue';
-import AnalyticsVisitsData from './analytics-visits-data.vue';
-import AnalyticsVisitsSales from './analytics-visits-sales.vue';
-import AnalyticsVisitsSource from './analytics-visits-source.vue';
-import AnalyticsVisits from './analytics-visits.vue';
+import { getPlatformPanelApi } from './api';
+import RankList from './components/RankList.vue';
 
-const overviewItems: AnalysisOverviewItem[] = [
-  {
-    icon: SvgCardIcon,
-    title: '用户量',
-    totalTitle: '总用户量',
-    totalValue: 120_000,
-    value: 2000,
-  },
-  {
-    icon: SvgCakeIcon,
-    title: '访问量',
-    totalTitle: '总访问量',
-    totalValue: 500_000,
-    value: 20_000,
-  },
-  {
-    icon: SvgDownloadIcon,
-    title: '下载量',
-    totalTitle: '总下载量',
-    totalValue: 120_000,
-    value: 8000,
-  },
-  {
-    icon: SvgBellIcon,
-    title: '使用量',
-    totalTitle: '总使用量',
-    totalValue: 50_000,
-    value: 5000,
-  },
-];
+defineOptions({ name: 'Analytics' });
 
-const chartTabs: TabOption[] = [
-  {
-    label: '流量趋势',
-    value: 'trends',
-  },
-  {
-    label: '月访问量',
-    value: 'visits',
-  },
-];
+const trendRef = ref<EchartsUIType>();
+const orderTypeRef = ref<EchartsUIType>();
+const regionRef = ref<EchartsUIType>();
+const storeTypeRef = ref<EchartsUIType>();
+const aiSceneRef = ref<EchartsUIType>();
+
+const { renderEcharts: renderTrend } = useEcharts(trendRef);
+const { renderEcharts: renderOrderType } = useEcharts(orderTypeRef);
+const { renderEcharts: renderRegion } = useEcharts(regionRef);
+const { renderEcharts: renderStoreType } = useEcharts(storeTypeRef);
+const { renderEcharts: renderAiScene } = useEcharts(aiSceneRef);
+
+const { isDark } = usePreferences();
+/** 当前 Tab 模块数据（不含总览） */
+const panel = ref<any>(null);
+/** 顶部总览 KPI（独立缓存，切 Tab 不丢） */
+const overview = ref<Record<string, any>>({});
+const compareMeta = ref<{ prev_range?: string[] }>({});
+const loading = ref(false);
+const searchTime = ref<[Dayjs, Dayjs]>(monthToTodayRangeDayjs());
+const searchTimeTouched = ref(false);
+/** 是否超管：首次接口带回后用于显隐运维 Tab */
+const isSuperAdmin = ref(false);
+
+const TAB_STORAGE_KEY = 'analytics-platform-panel-tab';
+const BASE_TABS = [
+  { key: 'order', label: '订单' },
+  { key: 'store', label: '门店' },
+  { key: 'doctor_patient', label: '医生患者' },
+  { key: 'finance', label: '财务' },
+  { key: 'salesperson', label: '业务员' },
+  { key: 'ai', label: 'AI' },
+] as const;
+
+function readStoredTab(): string {
+  const stored = localStorage.getItem(TAB_STORAGE_KEY) || 'order';
+  // 兼容旧版把总览记成 Tab 的本地值
+  if (stored === 'overview') return 'order';
+  const keys = [...BASE_TABS.map((t) => t.key), 'ops'] as string[];
+  return keys.includes(stored) ? stored : 'order';
+}
+
+const activeTab = ref(readStoredTab());
+
+const tabItems = computed(() => {
+  const list = BASE_TABS.map((t) => ({ ...t }));
+  if (isSuperAdmin.value) {
+    list.push({ key: 'ops', label: '运维' });
+  }
+  return list;
+});
+
+const rangeText = computed(() => {
+  const [s, e] = searchTime.value || [];
+  const prev =
+    compareMeta.value?.prev_range || panel.value?.compare?.prev_range || [];
+  const cur =
+    s && e ? `${s.format('YYYY-MM-DD')} 至 ${e.format('YYYY-MM-DD')}` : '';
+  const p = prev.length === 2 ? `，对比 ${prev[0]} 至 ${prev[1]}` : '';
+  return `${cur}${p}`;
+});
+
+/** 总览 KPI 卡（固定在页面上方，不进 Tab） */
+const overviewCards = computed(() => {
+  const o = overview.value || {};
+  return [
+    {
+      key: 'revenue',
+      label: '有效营业额',
+      value: Number(o.revenue || 0),
+      rate: o.revenue_rate ?? null,
+      icon: 'lucide:wallet',
+      kind: 'money' as const,
+      tone: 'primary',
+    },
+    {
+      key: 'order_count',
+      label: '有效订单笔数',
+      value: Number(o.order_count || 0),
+      rate: o.order_count_rate ?? null,
+      icon: 'lucide:receipt-text',
+      kind: 'count' as const,
+      tone: 'success',
+      unit: '笔',
+    },
+    {
+      key: 'active_store',
+      label: '动销门店',
+      value: Number(o.active_store_count || 0),
+      rate: o.active_store_count_rate ?? null,
+      icon: 'lucide:store',
+      kind: 'count' as const,
+      tone: 'warning',
+      unit: '家',
+    },
+    {
+      key: 'new_patient',
+      label: '新增就诊人',
+      value: Number(o.new_patient_count || 0),
+      rate: o.new_patient_count_rate ?? null,
+      icon: 'lucide:user-plus',
+      kind: 'count' as const,
+      tone: 'destructive',
+      unit: '人',
+    },
+  ];
+});
+
+function kpiCardsFrom(
+  items: Array<{
+    icon: string;
+    key: string;
+    kind?: 'count' | 'money';
+    label: string;
+    path: string;
+    ratePath: string;
+    tone?: string;
+    unit?: string;
+  }>,
+  mod: any,
+) {
+  const kpi = mod?.kpi || {};
+  const compare = mod?.compare || {};
+  const prev = mod?.prev || {};
+  return items.map((it) => ({
+    key: it.key,
+    label: it.label,
+    value: Number(kpi[it.path] || 0),
+    prevValue: Number(prev[it.path] || 0),
+    rate: compare[it.ratePath] ?? null,
+    icon: it.icon,
+    kind: it.kind || ('count' as const),
+    tone: it.tone || 'primary',
+    unit: it.unit || '',
+  }));
+}
+
+const orderCards = computed(() =>
+  kpiCardsFrom(
+    [
+      {
+        key: 'revenue',
+        label: '有效营业额',
+        path: 'revenue',
+        ratePath: 'revenue_rate',
+        icon: 'lucide:banknote',
+        kind: 'money',
+        tone: 'primary',
+      },
+      {
+        key: 'product',
+        label: '商品订单',
+        path: 'product_count',
+        ratePath: 'product_count_rate',
+        icon: 'lucide:shopping-bag',
+        tone: 'success',
+        unit: '笔',
+      },
+      {
+        key: 'rx',
+        label: '处方订单',
+        path: 'prescription_count',
+        ratePath: 'prescription_count_rate',
+        icon: 'lucide:pill',
+        tone: 'warning',
+        unit: '笔',
+      },
+      {
+        key: 'reg',
+        label: '挂号订单',
+        path: 'register_count',
+        ratePath: 'register_count_rate',
+        icon: 'lucide:calendar-check',
+        tone: 'destructive',
+        unit: '笔',
+      },
+      {
+        key: 'refund',
+        label: '退款率',
+        path: 'refund_rate',
+        ratePath: 'refund_rate_rate',
+        icon: 'lucide:undo-2',
+        tone: 'primary',
+        unit: '%',
+      },
+    ],
+    panel.value?.order,
+  ),
+);
+
+const storeCards = computed(() =>
+  kpiCardsFrom(
+    [
+      {
+        key: 'total',
+        label: '门店总数',
+        path: 'total_store_count',
+        ratePath: 'total_store_count_rate',
+        icon: 'lucide:building-2',
+        unit: '家',
+      },
+      {
+        key: 'new',
+        label: '区间新增',
+        path: 'new_store_count',
+        ratePath: 'new_store_count_rate',
+        icon: 'lucide:plus-circle',
+        tone: 'success',
+        unit: '家',
+      },
+      {
+        key: 'active',
+        label: '动销门店',
+        path: 'active_store_count',
+        ratePath: 'active_store_count_rate',
+        icon: 'lucide:activity',
+        tone: 'warning',
+        unit: '家',
+      },
+      {
+        key: 'inactive',
+        label: '本月未动销',
+        path: 'inactive_store_count',
+        ratePath: 'inactive_store_count_rate',
+        icon: 'lucide:alert-triangle',
+        tone: 'destructive',
+        unit: '家',
+      },
+    ],
+    panel.value?.store,
+  ),
+);
+
+const doctorCards = computed(() =>
+  kpiCardsFrom(
+    [
+      {
+        key: 'doctor',
+        label: '医生数',
+        path: 'doctor_count',
+        ratePath: 'doctor_count_rate',
+        icon: 'lucide:stethoscope',
+        unit: '人',
+      },
+      {
+        key: 'reception',
+        label: '接诊量',
+        path: 'reception_count',
+        ratePath: 'reception_count_rate',
+        icon: 'lucide:heart-pulse',
+        tone: 'success',
+        unit: '次',
+      },
+      {
+        key: 'rx',
+        label: '开方量',
+        path: 'prescription_count',
+        ratePath: 'prescription_count_rate',
+        icon: 'lucide:file-text',
+        tone: 'warning',
+        unit: '张',
+      },
+      {
+        key: 'patient',
+        label: '新增就诊人',
+        path: 'new_patient_count',
+        ratePath: 'new_patient_count_rate',
+        icon: 'lucide:users',
+        tone: 'destructive',
+        unit: '人',
+      },
+    ],
+    panel.value?.doctor_patient,
+  ),
+);
+
+const financeCards = computed(() =>
+  kpiCardsFrom(
+    [
+      {
+        key: 'sales',
+        label: '销售额',
+        path: 'sales_amount',
+        ratePath: 'sales_amount_rate',
+        icon: 'lucide:trending-up',
+        kind: 'money',
+      },
+      {
+        key: 'withdraw',
+        label: '提现金额',
+        path: 'withdraw_amount',
+        ratePath: 'withdraw_amount_rate',
+        icon: 'lucide:hand-coins',
+        kind: 'money',
+        tone: 'success',
+      },
+      {
+        key: 'wd_pending',
+        label: '提现待审',
+        path: 'withdraw_pending_count',
+        ratePath: 'withdraw_pending_count_rate',
+        icon: 'lucide:hourglass',
+        tone: 'warning',
+        unit: '笔',
+      },
+      {
+        key: 'pub',
+        label: '公户到账',
+        path: 'public_pay_amount',
+        ratePath: 'public_pay_amount_rate',
+        icon: 'lucide:landmark',
+        kind: 'money',
+        tone: 'primary',
+      },
+      {
+        key: 'overdue',
+        label: '公户逾期单',
+        path: 'public_overdue_count',
+        ratePath: 'public_overdue_count_rate',
+        icon: 'lucide:siren',
+        tone: 'destructive',
+        unit: '张',
+      },
+      {
+        key: 'invoice',
+        label: '开票待办',
+        path: 'invoice_todo_count',
+        ratePath: 'invoice_todo_count_rate',
+        icon: 'lucide:file-spreadsheet',
+        tone: 'warning',
+        unit: '条',
+      },
+    ],
+    panel.value?.finance,
+  ),
+);
+
+const aiCards = computed(() =>
+  kpiCardsFrom(
+    [
+      {
+        key: 'total',
+        label: '生成次数',
+        path: 'total_count',
+        ratePath: 'total_count_rate',
+        icon: 'lucide:sparkles',
+        unit: '次',
+      },
+      {
+        key: 'success',
+        label: '成功次数',
+        path: 'success_count',
+        ratePath: 'success_count_rate',
+        icon: 'lucide:check-circle-2',
+        tone: 'success',
+        unit: '次',
+      },
+      {
+        key: 'fail',
+        label: '失败率',
+        path: 'fail_rate',
+        ratePath: 'fail_rate_rate',
+        icon: 'lucide:x-circle',
+        tone: 'destructive',
+        unit: '%',
+      },
+      {
+        key: 'cache',
+        label: '缓存命中率',
+        path: 'cache_hit_rate',
+        ratePath: 'cache_hit_rate_rate',
+        icon: 'lucide:database',
+        tone: 'warning',
+        unit: '%',
+      },
+    ],
+    panel.value?.ai,
+  ),
+);
+
+const opsCards = computed(() =>
+  kpiCardsFrom(
+    [
+      {
+        key: 'queue',
+        label: '队列失败',
+        path: 'queue_fail_count',
+        ratePath: 'queue_fail_count_rate',
+        icon: 'lucide:server-crash',
+        tone: 'destructive',
+        unit: '次',
+      },
+      {
+        key: 'express',
+        label: '物流查询失败',
+        path: 'express_fail_count',
+        ratePath: 'express_fail_count_rate',
+        icon: 'lucide:truck',
+        tone: 'warning',
+        unit: '次',
+      },
+      {
+        key: 'unread',
+        label: '站内信未读积压',
+        path: 'notice_unread_count',
+        ratePath: 'notice_unread_count_rate',
+        icon: 'lucide:bell',
+        tone: 'primary',
+        unit: '条',
+      },
+    ],
+    panel.value?.ops,
+  ),
+);
+
+/** 仅渲染当前 Tab 需要的图表，避免切 Tab 时全量重绘 */
+function renderCharts() {
+  if (!panel.value) return;
+  const mod = activeTab.value;
+  const p = getChartPalette();
+
+  if (mod === 'order') {
+    const trend = panel.value.order?.trend || {};
+    renderTrend({
+      color: [p.primary, GLASS_SERIES_COLORS[1] as string],
+      tooltip: {
+        ...glassTooltip(p),
+        trigger: 'axis',
+        formatter: (params: any) => {
+          const list = Array.isArray(params) ? params : [params];
+          const head = `<div style="margin-bottom:6px;font-weight:600">${list[0]?.axisValue ?? ''}</div>`;
+          const body = list
+            .map((it: any) => {
+              const val =
+                it.seriesIndex === 0
+                  ? `¥${formatMoney(it.value)}`
+                  : `${it.value} 笔`;
+              return `<div style="display:flex;justify-content:space-between;gap:24px">${it.marker}${it.seriesName}<b>${val}</b></div>`;
+            })
+            .join('');
+          return head + body;
+        },
+      },
+      legend: { top: 0, right: 0, textStyle: { color: p.subText } },
+      grid: { left: 8, right: 8, top: 36, bottom: 4, containLabel: true },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: trend.labels || [],
+        axisLine: { lineStyle: { color: p.border } },
+        axisLabel: { color: p.subText, hideOverlap: true },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          splitLine: { lineStyle: { color: p.splitLine, type: 'dashed' } },
+          axisLabel: {
+            color: p.subText,
+            formatter: (v: number) => `¥${formatAxisMoney(v)}`,
+          },
+        },
+        {
+          type: 'value',
+          minInterval: 1,
+          splitLine: { show: false },
+          axisLabel: { color: p.subText, formatter: '{value}' },
+        },
+      ],
+      series: [
+        {
+          name: '营业额',
+          type: 'line',
+          smooth: 0.4,
+          showSymbol: false,
+          data: (trend.money || []).map(Number),
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: p.primarySoft },
+                { offset: 1, color: p.primaryFade },
+              ],
+            },
+          },
+        },
+        {
+          name: '笔数',
+          type: 'line',
+          yAxisIndex: 1,
+          smooth: 0.4,
+          showSymbol: false,
+          data: (trend.orders || []).map(Number),
+          lineStyle: { width: 2, type: [6, 4] },
+        },
+      ],
+    });
+
+    const byType = panel.value.order?.by_type || [];
+    renderOrderType({
+      color: GLASS_SERIES_COLORS,
+      tooltip: { ...glassTooltip(p), trigger: 'item' },
+      series: [
+        {
+          type: 'pie',
+          radius: ['48%', '72%'],
+          padAngle: 2,
+          itemStyle: { borderRadius: 8 },
+          label: { color: p.subText },
+          data: byType.map((it: any) => ({
+            name: it.name,
+            value: Number(it.amount || 0),
+          })),
+        },
+      ],
+    });
+    return;
+  }
+
+  if (mod === 'store') {
+    const region = panel.value.store?.region || {};
+    const names = [...(region.labels || [])].reverse();
+    const values = [...(region.values || [])].map(Number).reverse();
+    renderRegion({
+      tooltip: { ...glassTooltip(p), trigger: 'axis' },
+      grid: { left: 8, right: 36, top: 8, bottom: 4, containLabel: true },
+      xAxis: {
+        type: 'value',
+        splitLine: { lineStyle: { color: p.splitLine, type: 'dashed' } },
+        axisLabel: { color: p.subText },
+      },
+      yAxis: {
+        type: 'category',
+        data: names,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { color: p.text },
+      },
+      series: [
+        {
+          type: 'bar',
+          data: values,
+          barMaxWidth: 14,
+          itemStyle: {
+            borderRadius: 8,
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: GLASS_SERIES_COLORS[2] as string },
+                { offset: 1, color: p.primary },
+              ],
+            },
+          },
+        },
+      ],
+    });
+
+    const storeType = panel.value.store?.by_type || [];
+    renderStoreType({
+      color: [p.primary, GLASS_SERIES_COLORS[3] as string],
+      tooltip: { ...glassTooltip(p), trigger: 'item' },
+      series: [
+        {
+          type: 'pie',
+          radius: ['48%', '72%'],
+          padAngle: 2,
+          itemStyle: { borderRadius: 8 },
+          label: { color: p.subText },
+          data: storeType.map((it: any) => ({
+            name: it.name,
+            value: Number(it.value || 0),
+          })),
+        },
+      ],
+    });
+    return;
+  }
+
+  if (mod === 'ai') {
+    const scenes = panel.value.ai?.by_scene || [];
+    renderAiScene({
+      color: GLASS_SERIES_COLORS,
+      tooltip: { ...glassTooltip(p), trigger: 'axis' },
+      grid: { left: 8, right: 8, top: 28, bottom: 4, containLabel: true },
+      legend: { top: 0, textStyle: { color: p.subText } },
+      xAxis: {
+        type: 'category',
+        data: scenes.map((s: any) => s.name),
+        axisLabel: { color: p.subText, rotate: scenes.length > 5 ? 30 : 0 },
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        splitLine: { lineStyle: { color: p.splitLine, type: 'dashed' } },
+        axisLabel: { color: p.subText },
+      },
+      series: [
+        {
+          name: '成功',
+          type: 'bar',
+          stack: 'a',
+          data: scenes.map((s: any) => Number(s.success || 0)),
+          barMaxWidth: 28,
+        },
+        {
+          name: '失败',
+          type: 'bar',
+          stack: 'a',
+          data: scenes.map((s: any) => Number(s.fail || 0)),
+          barMaxWidth: 28,
+        },
+      ],
+    });
+  }
+}
+
+watch(isDark, () => nextTick(() => setTimeout(renderCharts, 60)));
+
+let requestSeq = 0;
+
+function applyMeta(res: any) {
+  if (typeof res?.is_super_admin === 'boolean') {
+    isSuperAdmin.value = res.is_super_admin;
+  }
+  if (res?.compare) {
+    compareMeta.value = res.compare;
+  }
+}
+
+/** 拉顶部总览 KPI */
+async function fetchOverview() {
+  const res = await getPlatformPanelApi({
+    search_time: searchTime.value,
+    module: 'overview',
+  });
+  applyMeta(res);
+  overview.value = res?.overview || {};
+  return res;
+}
+
+/** 拉当前 Tab 模块 */
+async function fetchModule() {
+  let moduleKey = activeTab.value;
+  if (moduleKey === 'ops' && !isSuperAdmin.value) {
+    moduleKey = 'order';
+    activeTab.value = 'order';
+    localStorage.setItem(TAB_STORAGE_KEY, 'order');
+  }
+  const res = await getPlatformPanelApi({
+    search_time: searchTime.value,
+    module: moduleKey,
+  });
+  applyMeta(res);
+  if (!res.is_super_admin && moduleKey === 'ops') {
+    activeTab.value = 'order';
+    localStorage.setItem(TAB_STORAGE_KEY, 'order');
+    return fetchModule();
+  }
+  panel.value = res;
+  return res;
+}
+
+/**
+ * 刷新数据
+ * @param withOverview true=时间/重置/首屏，并行总览+模块；false=切 Tab 只拉模块
+ */
+async function getData(withOverview = true) {
+  const seq = ++requestSeq;
+  loading.value = true;
+  try {
+    if (withOverview) {
+      await Promise.all([fetchOverview(), fetchModule()]);
+    } else {
+      await fetchModule();
+    }
+    if (seq !== requestSeq) return;
+    nextTick(() => setTimeout(renderCharts, 40));
+  } catch (error) {
+    console.error('获取平台统计失败:', error);
+  } finally {
+    if (seq === requestSeq) loading.value = false;
+  }
+}
+
+/** 切 Tab：只查当前模块，总览 KPI 保持不动 */
+function handleTabChange(key: number | string) {
+  const next = String(key);
+  activeTab.value = next;
+  localStorage.setItem(TAB_STORAGE_KEY, next);
+  panel.value = null;
+  getData(false);
+}
+
+const handleTimeChange = (range?: [Dayjs, Dayjs] | null) => {
+  if (range?.[0] && range?.[1]) searchTime.value = range;
+  searchTimeTouched.value = true;
+  getData(true);
+};
+
+const reload = () => {
+  searchTimeTouched.value = false;
+  searchTime.value = monthToTodayRangeDayjs();
+  getData(true);
+};
+
+onActivated(() => {
+  if (!searchTimeTouched.value) {
+    searchTime.value = monthToTodayRangeDayjs();
+    getData(true);
+  }
+});
+
+getData(true);
 </script>
 
 <template>
-  <div class="p-5">
-    <AnalysisOverview :items="overviewItems" />
-    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
-      <template #trends>
-        <AnalyticsTrends />
-      </template>
-      <template #visits>
-        <AnalyticsVisits />
-      </template>
-    </AnalysisChartsTabs>
+  <Page>
+    <div class="analytics-page">
+      <div class="ambient" aria-hidden="true">
+        <span class="blob blob-a"></span>
+        <span class="blob blob-b"></span>
+      </div>
 
-    <div class="mt-5 w-full md:flex">
-      <AnalysisChartCard class="mt-5 md:mt-0 md:mr-4 md:w-1/3" title="访问数量">
-        <AnalyticsVisitsData />
-      </AnalysisChartCard>
-      <AnalysisChartCard class="mt-5 md:mt-0 md:mr-4 md:w-1/3" title="访问来源">
-        <AnalyticsVisitsSource />
-      </AnalysisChartCard>
-      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
-        <AnalyticsVisitsSales />
-      </AnalysisChartCard>
-    </div>
-  </div>
+      <GlassCard class="header" padding="lg">
+        <div class="header-row">
+          <div>
+            <h2 class="header-title">
+              <IconifyIcon icon="lucide:area-chart" class="header-icon" />
+              平台统计分析
+            </h2>
+            <p class="header-sub">{{ rangeText }}</p>
+          </div>
+          <div class="header-actions">
+            <SearchTimeRangePicker
+              v-model:value="searchTime"
+              format="YYYY-MM-DD"
+              class="header-picker"
+              @change="handleTimeChange"
+            />
+            <Button class="glass-btn" :loading="loading" @click="getData">
+              <template #icon>
+<IconifyIcon icon="lucide:refresh-cw" />
 </template>
+              刷新
+            </Button>
+            <Button class="glass-btn" @click="reload">
+              <template #icon>
+<IconifyIcon icon="lucide:rotate-ccw" />
+</template>
+              重置
+            </Button>
+          </div>
+        </div>
+      </GlassCard>
+
+      <!-- 总览固定顶部，不进 Tab -->
+      <section class="overview-block">
+        <div class="kpi-grid">
+          <KpiGlassCard
+            v-for="card in overviewCards"
+            :key="card.key"
+            :label="card.label"
+            :value="card.value"
+            :rate="card.rate"
+            :icon="card.icon"
+            :kind="card.kind"
+            :tone="card.tone"
+            :unit="card.unit"
+          />
+        </div>
+      </section>
+
+      <Tabs
+        :active-key="activeTab"
+        class="analytics-tabs"
+        @change="handleTabChange"
+      >
+        <Tabs.TabPane v-for="tab in tabItems" :key="tab.key" :tab="tab.label" />
+      </Tabs>
+
+      <Spin :spinning="loading" :delay="200">
+        <div class="module-stack">
+          <!-- 订单 -->
+          <GlassCard
+            v-if="activeTab === 'order'"
+            title="订单"
+            subtitle="商品 / 处方 / 挂号 · 有效 GMV 口径"
+            icon="lucide:shopping-cart"
+            class="module-block"
+            padding="lg"
+          >
+            <div class="module-kpis">
+              <KpiGlassCard
+                v-for="card in orderCards"
+                :key="card.key"
+                :label="card.label"
+                :value="card.value"
+                :prev-value="card.prevValue"
+                :rate="card.rate"
+                :icon="card.icon"
+                :kind="card.kind"
+                :tone="card.tone"
+                :unit="card.unit"
+              />
+            </div>
+            <div class="chart-row">
+              <div class="chart-box">
+                <div class="chart-title">营业额趋势</div>
+                <EchartsUI ref="trendRef" class="chart" />
+              </div>
+              <div class="chart-box chart-box--sm">
+                <div class="chart-title">类型金额占比</div>
+                <EchartsUI ref="orderTypeRef" class="chart" />
+              </div>
+            </div>
+          </GlassCard>
+
+          <!-- 门店 -->
+          <GlassCard
+            v-else-if="activeTab === 'store'"
+            title="门店"
+            subtitle="存量 · 新增 · 动销 · 本月未动销"
+            icon="lucide:store"
+            class="module-block"
+            padding="lg"
+            tone="success"
+          >
+            <div class="module-kpis">
+              <KpiGlassCard
+                v-for="card in storeCards"
+                :key="card.key"
+                :label="card.label"
+                :value="card.value"
+                :prev-value="card.prevValue"
+                :rate="card.rate"
+                :icon="card.icon"
+                :kind="card.kind"
+                :tone="card.tone"
+                :unit="card.unit"
+              />
+            </div>
+            <div class="chart-row">
+              <div class="chart-box">
+                <div class="chart-title">省份分布（存量 Top）</div>
+                <EchartsUI ref="regionRef" class="chart" />
+              </div>
+              <div class="chart-box chart-box--sm">
+                <div class="chart-title">诊所 / 药店</div>
+                <EchartsUI ref="storeTypeRef" class="chart" />
+              </div>
+            </div>
+          </GlassCard>
+
+          <!-- 医生患者 -->
+          <GlassCard
+            v-else-if="activeTab === 'doctor_patient'"
+            title="医生与患者"
+            subtitle="医生存量 · 区间接诊 / 开方 / 新增就诊人"
+            icon="lucide:stethoscope"
+            class="module-block"
+            padding="lg"
+            tone="warning"
+          >
+            <div class="module-kpis">
+              <KpiGlassCard
+                v-for="card in doctorCards"
+                :key="card.key"
+                :label="card.label"
+                :value="card.value"
+                :prev-value="card.prevValue"
+                :rate="card.rate"
+                :icon="card.icon"
+                :kind="card.kind"
+                :tone="card.tone"
+                :unit="card.unit"
+              />
+            </div>
+          </GlassCard>
+
+          <!-- 财务 -->
+          <GlassCard
+            v-else-if="activeTab === 'finance'"
+            title="财务"
+            subtitle="销售额 · 提现 · 公户 · 开票待办"
+            icon="lucide:landmark"
+            class="module-block"
+            padding="lg"
+          >
+            <div class="module-kpis module-kpis--6">
+              <KpiGlassCard
+                v-for="card in financeCards"
+                :key="card.key"
+                :label="card.label"
+                :value="card.value"
+                :prev-value="card.prevValue"
+                :rate="card.rate"
+                :icon="card.icon"
+                :kind="card.kind"
+                :tone="card.tone"
+                :unit="card.unit"
+              />
+            </div>
+          </GlassCard>
+
+          <!-- 业务员 -->
+          <GlassCard
+            v-else-if="activeTab === 'salesperson'"
+            title="业务员"
+            subtitle="区间录入门店排行 · 名下门店有效营业额排行"
+            icon="lucide:briefcase"
+            class="module-block"
+            padding="lg"
+            tone="success"
+          >
+            <div class="chart-row">
+              <div class="chart-box">
+                <div class="chart-title">录入门店 Top10</div>
+                <RankList
+                  :items="panel?.salesperson?.input_rank || []"
+                  value-key="count"
+                />
+              </div>
+              <div class="chart-box">
+                <div class="chart-title">营业额 Top10</div>
+                <RankList
+                  :items="panel?.salesperson?.amount_rank || []"
+                  value-key="amount"
+                />
+              </div>
+            </div>
+          </GlassCard>
+
+          <!-- AI -->
+          <GlassCard
+            v-else-if="activeTab === 'ai'"
+            title="AI 使用"
+            subtitle="xk_ai_generation · 含缓存命中"
+            icon="lucide:sparkles"
+            class="module-block"
+            padding="lg"
+            tone="warning"
+          >
+            <div class="module-kpis">
+              <KpiGlassCard
+                v-for="card in aiCards"
+                :key="card.key"
+                :label="card.label"
+                :value="card.value"
+                :prev-value="card.prevValue"
+                :rate="card.rate"
+                :icon="card.icon"
+                :kind="card.kind"
+                :tone="card.tone"
+                :unit="card.unit"
+              />
+            </div>
+            <div class="chart-box">
+              <div class="chart-title">各场景成功 / 失败</div>
+              <EchartsUI ref="aiSceneRef" class="chart" />
+            </div>
+          </GlassCard>
+
+          <!-- 运维（超管） -->
+          <GlassCard
+            v-else-if="activeTab === 'ops' && isSuperAdmin"
+            title="系统运维"
+            subtitle="仅超级管理员可见"
+            icon="lucide:shield-alert"
+            class="module-block"
+            padding="lg"
+            tone="destructive"
+          >
+            <div class="module-kpis">
+              <KpiGlassCard
+                v-for="card in opsCards"
+                :key="card.key"
+                :label="card.label"
+                :value="card.value"
+                :prev-value="card.prevValue"
+                :rate="card.rate"
+                :icon="card.icon"
+                :kind="card.kind"
+                :tone="card.tone"
+                :unit="card.unit"
+              />
+            </div>
+          </GlassCard>
+        </div>
+      </Spin>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.analytics-page {
+  --glass-specular: 0 0% 100%;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  isolation: isolate;
+}
+
+.dark .analytics-page {
+  --glass-specular: 0 0% 62%;
+}
+
+.ambient {
+  position: absolute;
+  inset: -24px;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.5;
+  filter: blur(80px);
+}
+
+.blob-a {
+  top: -40px;
+  left: -20px;
+  width: 380px;
+  height: 380px;
+  background: hsl(var(--primary) / 32%);
+}
+
+.blob-b {
+  top: 40%;
+  right: -60px;
+  width: 320px;
+  height: 320px;
+  background: rgb(94 92 230 / 22%);
+}
+
+.header-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-title {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.header-icon {
+  font-size: 20px;
+  color: hsl(var(--primary));
+}
+
+.header-sub {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.header-picker {
+  width: 380px;
+  max-width: 100%;
+}
+
+.glass-btn {
+  color: hsl(var(--foreground));
+  background: hsl(var(--card) / 55%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 999px;
+}
+
+.overview-block {
+  margin: 0;
+}
+
+.analytics-tabs {
+  margin: 4px 0 0;
+}
+
+.analytics-tabs :deep(.ant-tabs-nav) {
+  margin-bottom: 0;
+}
+
+.module-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  min-height: 240px;
+  margin-top: 4px;
+}
+
+.module-block {
+  width: 100%;
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 0;
+}
+
+.module-kpis {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.module-kpis--6 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.chart-row {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 20px;
+}
+
+.chart-box--sm {
+  min-width: 0;
+}
+
+.chart-title {
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: hsl(var(--muted-foreground));
+}
+
+.chart {
+  height: 300px;
+}
+
+@media (max-width: 1200px) {
+  .kpi-grid,
+  .module-kpis,
+  .module-kpis--6 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .chart-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .kpi-grid,
+  .module-kpis,
+  .module-kpis--6 {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/doctor/doctor-reception/api/index.ts b/apps/web-antd/src/views/doctor/doctor-reception/api/index.ts
index b1d7b049..cae24637 100644
--- a/apps/web-antd/src/views/doctor/doctor-reception/api/index.ts
+++ b/apps/web-antd/src/views/doctor/doctor-reception/api/index.ts
@@ -17,7 +17,9 @@ export async function getDeliveryWarehouseOptionsByDrugs(data: {
 /**
  * 医生应用特色方到开方区
  */
-export async function applySpecialPrescriptionApi(data: { register_id: number }) {
+export async function applySpecialPrescriptionApi(data: {
+  register_id: number;
+}) {
   return requestClient.post<any>('special-prescription/apply', data);
 }
 
@@ -50,11 +52,13 @@ export async function getProductListDoctorReception(data: any) {
  * xk-api GET doctor-reception/used-excipient-list
  */
 export async function getUsedExcipientListDoctorReception(data: {
-  store_id?: number;
-  register_id?: number;
   limit?: number;
+  register_id?: number;
+  store_id?: number;
 }) {
-  return requestClient.get<any>(`${prefix}used-excipient-list`, { params: data });
+  return requestClient.get<any>(`${prefix}used-excipient-list`, {
+    params: data,
+  });
 }
 
 /**
@@ -62,9 +66,9 @@ export async function getUsedExcipientListDoctorReception(data: {
  * 为什么：供货比例变更后关系表已更新，快照价不一致时要让医生确认是否按最新价计算
  */
 export async function compareChineseDrugPricesApi(data: {
+  drugs: Array<Record<string, any>>;
   register_id?: number;
   store_id?: number;
-  drugs: Array<Record<string, any>>;
 }) {
   return requestClient.post<any>(`${prefix}compare-chinese-drug-prices`, data);
 }
@@ -86,15 +90,15 @@ export async function getProcessRulePresetList(params: { store_id: number }) {
 
 /** 保存煎药预设方案 doctor-reception POST save-process-rule-preset */
 export async function saveProcessRulePreset(data: {
-  store_id: number;
-  name: string;
+  child_process_rule_id?: null | number;
   id?: number;
   is_default?: number;
+  name: string;
+  package_method_id?: null | number;
+  process_rule_id?: null | number;
+  process_rule_note_id?: null | number;
   rule_type: number;
-  package_method_id?: number | null;
-  process_rule_id?: number | null;
-  child_process_rule_id?: number | null;
-  process_rule_note_id?: number | null;
+  store_id: number;
 }) {
   return requestClient.post<any>(`${prefix}save-process-rule-preset`, data);
 }
@@ -171,14 +175,14 @@ export async function getPrescriptionTypeOptionsApi(params?: {
   store_id?: number;
 }) {
   return requestClient.get<{
+    allowed?: boolean;
     default: number;
     list: Array<{
-      value: number;
-      label: string;
       icon?: string;
       icon_text?: string;
+      label: string;
+      value: number;
     }>;
-    allowed?: boolean;
     message?: string;
   }>(`${prefix}prescription-type-options`, {
     params,
@@ -197,8 +201,8 @@ export async function receptionApi(id: any) {
  */
 export async function withdrawPrescriptionApi(data: {
   prescription_id: number;
-  register_id: number;
   reason?: string;
+  register_id: number;
 }) {
   return requestClient.post<any>(`${prefix}withdraw-prescription`, data);
 }
@@ -207,25 +211,29 @@ export async function withdrawPrescriptionApi(data: {
  * 本次挂号处方列表（分页，支持 keyword 按订单号/订单ID筛选）
  */
 export async function getRegisterPrescriptionListApi(params: {
-  register_id: number;
+  keyword?: string;
   page?: number;
   page_size?: number;
-  keyword?: string;
+  register_id: number;
 }) {
-  return requestClient.get<any>(`${prefix}register-prescription-list`, { params });
+  return requestClient.get<any>(`${prefix}register-prescription-list`, {
+    params,
+  });
 }
 
 /**
  * 患者历史处方（排除当前挂号），支持 keyword 按订单号/订单ID筛选
  */
 export async function getPatientPrescriptionHistoryApi(params: {
-  patient_id: number;
-  page?: number;
-  page_size?: number;
   exclude_register_id?: number;
   keyword?: string;
+  page?: number;
+  page_size?: number;
+  patient_id: number;
 }) {
-  return requestClient.get<any>(`${prefix}patient-prescription-history`, { params });
+  return requestClient.get<any>(`${prefix}patient-prescription-history`, {
+    params,
+  });
 }
 
 /**
@@ -334,10 +342,7 @@ export async function getCommonPrescriptionListApi(storeId?: number) {
  * @param id 常用方ID
  * @param type 类型：west-西药，chinese-中药，granular-颗粒药
  */
-export async function getCommonPrescriptionDetailApi(
-  id: number,
-  type: string,
-) {
+export async function getCommonPrescriptionDetailApi(id: number, type: string) {
   return requestClient.get<any[]>(`${commonPrescriptionPrefix}detail`, {
     params: { id, type },
   });
@@ -406,18 +411,18 @@ export interface CommonPrescriptionChineseDrug {
  * @description 将当前处方保存为西药常用方模板，后端会自动创建 recipe 记录
  */
 export async function saveWestCommonPrescriptionApi(data: {
-  /** 常用方名称 */
-  name: string;
-  /** 药品详细信息数组 */
-  drugs: CommonPrescriptionWestDrug[];
-  /** 诊所ID */
-  store_id: number;
+  /** 类别 1-自费 2-医保（可选） */
+  category?: string;
   /** 临床诊断（可选） */
   clinical_diagnose?: string;
   /** 医嘱（可选） */
   doctor_order?: string;
-  /** 类别 1-自费 2-医保（可选） */
-  category?: string;
+  /** 药品详细信息数组 */
+  drugs: CommonPrescriptionWestDrug[];
+  /** 常用方名称 */
+  name: string;
+  /** 诊所ID */
+  store_id: number;
 }) {
   return requestClient.post<any>(`${commonPrescriptionPrefix}save-west`, data);
 }
@@ -427,32 +432,32 @@ export async function saveWestCommonPrescriptionApi(data: {
  * @description 将当前处方保存为中药常用方模板，后端会自动创建 recipe 记录
  */
 export async function saveChineseCommonPrescriptionApi(data: {
-  /** 常用方名称 */
-  name: string;
-  /** 药品详细信息数组 */
-  drugs: CommonPrescriptionChineseDrug[];
-  /** 诊所ID */
-  store_id: number;
-  /** 临床诊断（可选） */
-  clinical_diagnose?: string;
-  /** 医嘱（可选） */
-  doctor_order?: string;
   /** 类别 1-自费 2-医保（可选） */
   category?: string;
-  /** 剂量/天数（可选，默认7） */
-  dosage?: number;
+  /** 煎法子规则ID（委托调剂时） */
+  child_process_rule_id?: number;
+  /** 临床诊断（可选） */
+  clinical_diagnose?: string;
   /** 每日次数（可选，默认2） */
   day_dosage?: number;
-  /** 1=自制剂 2=委托调剂（与后端 saveChinese 一致） */
-  rule_type?: number;
+  /** 医嘱（可选） */
+  doctor_order?: string;
+  /** 剂量/天数（可选，默认7） */
+  dosage?: number;
+  /** 药品详细信息数组 */
+  drugs: CommonPrescriptionChineseDrug[];
+  /** 常用方名称 */
+  name: string;
   /** 包法ID（自制剂时） */
   package_method_id?: number;
   /** 制剂规则ID（委托调剂时） */
   process_rule_id?: number;
-  /** 煎法子规则ID（委托调剂时） */
-  child_process_rule_id?: number;
   /** 规格/备注规则ID（委托调剂时） */
   process_rule_note_id?: number;
+  /** 1=自制剂 2=委托调剂（与后端 saveChinese 一致） */
+  rule_type?: number;
+  /** 诊所ID */
+  store_id: number;
 }) {
   return requestClient.post<any>(
     `${commonPrescriptionPrefix}save-chinese`,
@@ -465,22 +470,22 @@ export async function saveChineseCommonPrescriptionApi(data: {
  * @description 将当前处方保存为颗粒药常用方模板，后端会自动创建 recipe 记录
  */
 export async function saveGranularCommonPrescriptionApi(data: {
-  /** 常用方名称 */
-  name: string;
-  /** 药品详细信息数组 */
-  drugs: CommonPrescriptionChineseDrug[];
-  /** 诊所ID */
-  store_id: number;
-  /** 临床诊断（可选） */
-  clinical_diagnose?: string;
-  /** 医嘱（可选） */
-  doctor_order?: string;
   /** 类别 1-自费 2-医保（可选） */
   category?: string;
-  /** 剂量/天数（可选，默认7） */
-  dosage?: number;
+  /** 临床诊断（可选） */
+  clinical_diagnose?: string;
   /** 每日次数（可选，默认2） */
   day_dosage?: number;
+  /** 医嘱（可选） */
+  doctor_order?: string;
+  /** 剂量/天数（可选，默认7） */
+  dosage?: number;
+  /** 药品详细信息数组 */
+  drugs: CommonPrescriptionChineseDrug[];
+  /** 常用方名称 */
+  name: string;
+  /** 诊所ID */
+  store_id: number;
 }) {
   return requestClient.post<any>(
     `${commonPrescriptionPrefix}save-granular`,
@@ -490,23 +495,23 @@ export async function saveGranularCommonPrescriptionApi(data: {
 
 /** AI 给处方 */
 export async function aiGeneratePrescriptionApi(data: {
-  register_id: number;
-  store_id?: number;
-  prescription_type: number;
+  asr_duration_ms?: number;
+  asr_provider?: string;
   /** 前端确认过的主诉（可编辑） */
   chief_complaint?: string;
   /** 当前病历表单快照（可未保存），供 AI 综合参考 */
   medical_record?: Record<string, any>;
-  /** 中药：是否委托调剂 */
-  use_entrusted_process?: 0 | 1 | boolean;
+  prescription_type: number;
   /** 中药委托调剂：制剂要求 id（yii_process_rule pid=0） */
   process_rule_id?: number;
+  register_id: number;
+  return_dosage_process_detail?: 0 | 1 | boolean;
+  store_id?: number;
+  transcript?: string;
+  /** 中药：是否委托调剂 */
+  use_entrusted_process?: 0 | 1 | boolean;
   /** 语音辨证：dialectic */
   voice_mode?: string;
-  transcript?: string;
-  asr_provider?: string;
-  asr_duration_ms?: number;
-  return_dosage_process_detail?: 0 | 1 | boolean;
 }) {
   return requestClient.post<any>(`${prefix}ai-generate-prescription`, data);
 }
@@ -530,15 +535,15 @@ export async function aiVoiceAsrApi(file: File, durationMs = 0) {
 
 /** 语音口述落方（只抽药名剂量） */
 export async function aiGenerateVoicePrescriptionApi(data: {
-  register_id: number;
-  store_id?: number;
-  prescription_type: number;
-  transcript: string;
-  asr_provider?: string;
   asr_duration_ms?: number;
-  use_entrusted_process?: 0 | 1 | boolean;
+  asr_provider?: string;
+  prescription_type: number;
   process_rule_id?: number;
+  register_id: number;
   return_dosage_process_detail?: 0 | 1 | boolean;
+  store_id?: number;
+  transcript: string;
+  use_entrusted_process?: 0 | 1 | boolean;
 }) {
   return requestClient.post<any>(
     `${prefix}ai-generate-voice-prescription`,
@@ -561,32 +566,34 @@ export async function aiAgreeConsentApi(data: {
 
 /** 本挂号 AI 生成历史（轻量列表） */
 export async function aiListGenerationsApi(data: {
+  limit?: number;
   register_id: number;
   scene?: string;
-  limit?: number;
 }) {
-  return requestClient.get<any>(`${prefix}ai-list-generations`, { params: data });
+  return requestClient.get<any>(`${prefix}ai-list-generations`, {
+    params: data,
+  });
 }
 
 /** AI 生成详情（点选历史） */
 export async function aiGenerationDetailApi(data: { id: number }) {
-  return requestClient.get<any>(`${prefix}ai-generation-detail`, { params: data });
+  return requestClient.get<any>(`${prefix}ai-generation-detail`, {
+    params: data,
+  });
 }
 
 /** 标记 AI 生成记录为已读（熄灭历史未读微光） */
-export async function aiMarkGenerationReadApi(data: {
-  generation_id: number;
-}) {
+export async function aiMarkGenerationReadApi(data: { generation_id: number }) {
   return requestClient.post<any>(`${prefix}ai-mark-generation-read`, data);
 }
 
 /** AI 处方药名模糊对照 */
 export async function aiMatchPrescriptionDrugsApi(data: {
   generation_id?: number;
+  items?: Array<Record<string, any>>;
+  prescription_type?: number;
   register_id?: number;
   store_id?: number;
-  prescription_type?: number;
-  items?: Array<Record<string, any>>;
 }) {
   return requestClient.post<any>(`${prefix}ai-match-prescription-drugs`, data);
 }
@@ -611,14 +618,18 @@ export async function goldenFormulaListApi(data: {
   keyword?: string;
   page?: number;
   pageSize?: number;
-  store_id?: number;
   source_id?: number;
+  store_id?: number;
 }) {
-  return requestClient.get<any>(`${prefix}golden-formula-list`, { params: data });
+  return requestClient.get<any>(`${prefix}golden-formula-list`, {
+    params: data,
+  });
 }
 
 /** 金方来源下拉（导入弹窗筛选用） */
-export async function goldenFormulaSourceOptionApi(data?: { store_id?: number }) {
+export async function goldenFormulaSourceOptionApi(data?: {
+  store_id?: number;
+}) {
   return requestClient.get<any>(`${prefix}golden-formula-source-option`, {
     params: data || {},
   });
@@ -629,15 +640,17 @@ export async function goldenFormulaDetailApi(data: {
   id: number;
   store_id?: number;
 }) {
-  return requestClient.get<any>(`${prefix}golden-formula-detail`, { params: data });
+  return requestClient.get<any>(`${prefix}golden-formula-detail`, {
+    params: data,
+  });
 }
 
 /** 金方导入药名对照 */
 export async function goldenFormulaApplyApi(data: {
   id: number;
-  store_id?: number;
-  register_id?: number;
   prescription_type?: number;
+  register_id?: number;
+  store_id?: number;
 }) {
   return requestClient.post<any>(`${prefix}golden-formula-apply`, data);
 }
@@ -645,12 +658,12 @@ export async function goldenFormulaApplyApi(data: {
 /** 保存医生金方匹配选择（改选/确认导入） */
 export async function goldenFormulaSaveMatchApi(data: {
   id: number;
-  store_id?: number;
   items: Array<{
     drug_name: string;
     selected_drug_id: number;
     selected_drug_name?: string;
   }>;
+  store_id?: number;
 }) {
   return requestClient.post<any>(`${prefix}golden-formula-save-match`, data);
 }
@@ -662,11 +675,11 @@ export async function goldenFormulaSaveMatchApi(data: {
  */
 export async function createUserPatientApi(data: Record<string, any>) {
   return requestClient.post<{
-    user_patient_id: number;
-    register_id: number;
-    waive_register_fee: number;
-    price: string;
     is_pay: number;
+    price: string;
+    register_id: number;
+    user_patient_id: number;
+    waive_register_fee: number;
   }>(`${prefix}create-user-patient`, data);
 }
 
@@ -690,36 +703,74 @@ export async function getDoctorCreatedUserPatientListApi(params: {
 }) {
   return requestClient.get<{
     items: Array<{
-      id: number;
-      user_id: number;
-      name: string;
-      mobile?: string;
-      sex?: number;
       age?: number;
       created_at?: string;
+      edit_mode?: 'full' | 'limited';
+      id: number;
       is_claimed: number;
       latest_register_id: number;
-      latest_register_status: number;
       latest_register_is_pay: number;
+      latest_register_status: number;
+      mobile?: string;
+      name: string;
+      sex?: number;
+      ship_address?: Record<string, string>;
+      user_id: number;
     }>;
-    total: number;
     page: number;
     page_size: number;
+    total: number;
   }>(`${prefix}doctor-created-user-patient-list`, { params });
 }
 
+/** 检查本医生创建就诊人姓名/手机是否重复 */
+export async function checkCreatedUserPatientDuplicateApi(params: {
+  mobile: string;
+  name: string;
+}) {
+  return requestClient.get<{
+    exact: boolean;
+    items: Array<{
+      age?: number;
+      id: number;
+      is_claimed: number;
+      match_mobile: number;
+      match_name: number;
+      mobile: string;
+      name: string;
+      sex?: number;
+    }>;
+  }>(`${prefix}check-created-user-patient-duplicate`, { params });
+}
+
+/** 医生创建就诊人详情 */
+export async function getCreatedUserPatientDetailApi(userPatientId: number) {
+  return requestClient.get<Record<string, any>>(
+    `${prefix}created-user-patient-detail`,
+    { params: { user_patient_id: userPatientId } },
+  );
+}
+
+/** 更新医生创建的就诊人 */
+export async function updateCreatedUserPatientApi(data: Record<string, any>) {
+  return requestClient.post<Record<string, any>>(
+    `${prefix}update-created-user-patient`,
+    data,
+  );
+}
+
 /** 选择医生创建的就诊人开始线下接诊 */
 export async function startOfflineReceptionByPatientApi(data: {
   user_patient_id: number;
   waive_register_fee?: number;
 }) {
   return requestClient.post<{
-    user_patient_id: number;
-    register_id: number;
-    is_pay: number;
-    status: number;
     action: 'claim_qrcode' | 'proxy_pay' | 'reception';
+    is_pay: number;
     price: string;
+    register_id: number;
+    status: number;
+    user_patient_id: number;
   }>(`${prefix}start-offline-reception-by-patient`, data);
 }
 
@@ -732,12 +783,12 @@ export async function getProxyPayQrcodeApi(orderId: number) {
 
 /** 处方图 OCR（DeepSeek） */
 export async function ocrPrescriptionImageApi(data: {
+  /** 传方识别前粘贴的收货人信息，仅 transfer 生效 */
+  consignee_text?: string;
   image_urls: string[];
   mode: 'reception' | 'transfer';
   register_id?: number;
   store_id?: number;
-  /** 传方识别前粘贴的收货人信息，仅 transfer 生效 */
-  consignee_text?: string;
 }) {
   return requestClient.post<any>(`${prefix}ocr-prescription-image`, data);
 }
@@ -745,28 +796,28 @@ export async function ocrPrescriptionImageApi(data: {
 /** 确认识图传方：建患者/挂号 + 待导入传方单 */
 export async function confirmTransferImageOcrApi(data: Record<string, any>) {
   return requestClient.post<{
-    transfer_id: number;
-    register_id: number;
-    user_patient_id: number;
     patient_action: string;
+    register_id: number;
+    transfer_id: number;
+    user_patient_id: number;
   }>(`${prefix}confirm-transfer-image-ocr`, data);
 }
 
 /** 识图传方主动匹配就诊人 */
 export async function matchTransferPatientApi(data: {
-  patient_name?: string;
-  patient_mobile?: string;
-  name?: string;
   mobile?: string;
+  name?: string;
+  patient_mobile?: string;
+  patient_name?: string;
 }) {
   return requestClient.post<{
-    matched: boolean;
-    user_patient_id: number;
-    name: string;
-    mobile: string;
-    sex: number;
-    age: number;
     address: string;
+    age: number;
+    matched: boolean;
+    mobile: string;
+    name: string;
+    sex: number;
+    user_patient_id: number;
   }>(`${prefix}match-transfer-patient`, data);
 }
 
diff --git a/apps/web-antd/src/views/doctor/doctor-reception/components/ChineseMedicineConfig.vue b/apps/web-antd/src/views/doctor/doctor-reception/components/ChineseMedicineConfig.vue
index 6313b5f1..7bbcd910 100644
--- a/apps/web-antd/src/views/doctor/doctor-reception/components/ChineseMedicineConfig.vue
+++ b/apps/web-antd/src/views/doctor/doctor-reception/components/ChineseMedicineConfig.vue
@@ -7,7 +7,7 @@
 import { computed, nextTick, ref, watch } from 'vue';
 
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
-import { Checkbox, Input, InputNumber, Modal, message } from 'ant-design-vue';
+import { Checkbox, Input, InputNumber, message, Modal } from 'ant-design-vue';
 
 import {
   deleteProcessRulePreset,
@@ -19,51 +19,51 @@ import {
 
 /** 中药配置变更载荷 */
 export type ChineseMedicineConfigChange = {
-  ruleType?: number;
-  packageMethodId?: number | null;
-  processRuleId?: number | null;
-  childProcessRuleId?: number | null;
-  processRuleNoteId?: number | null;
-  dosage?: number;
+  childProcessRuleId?: null | number;
   dayDosage?: number;
+  dosage?: number;
+  packageMethodId?: null | number;
+  processRuleId?: null | number;
+  processRuleNoteId?: null | number;
+  ruleType?: number;
 };
 
 /** 预设方案列表项 */
 export type ProcessRulePresetItem = {
-  id: number;
-  name: string;
-  rule_type: number;
-  package_method_id: number;
-  process_rule_id: number;
   child_process_rule_id: number;
-  process_rule_note_id: number;
+  childProcessRuleId?: null | number;
+  id: number;
   is_default: number;
+  name: string;
+  package_method_id: number;
+  packageMethodId?: null | number;
+  process_rule_id: number;
+  process_rule_note_id: number;
+  processRuleId?: null | number;
+  processRuleNoteId?: null | number;
+  rule_type: number;
   ruleType?: number;
-  packageMethodId?: number | null;
-  processRuleId?: number | null;
-  childProcessRuleId?: number | null;
-  processRuleNoteId?: number | null;
 };
 
 const props = withDefaults(
   defineProps<{
-    ruleType: number;
-    packageMethodId?: number | null;
-    processRuleId?: number | null;
-    childProcessRuleId?: number | null;
-    processRuleNoteId?: number | null;
-    dosage: number;
-    dayDosage: number;
-    processRuleList?: Array<{ id: number; name: string }>;
-    childProcessRuleList?: Array<{ id: number; name: string }>;
-    processRuleNoteList?: Array<{ id: number; note?: string; name?: string }>;
-    disabled?: boolean;
-    /** 未填字段名；父页提交失败传入，改选后由父清空 */
-    errorKeys?: string[];
-    /** 当前履约门店，用于加载/保存预设 */
-    storeId?: number | null;
     /** 进入中药且无草稿覆盖时自动应用默认方案 */
     autoApplyDefault?: boolean;
+    childProcessRuleId?: null | number;
+    childProcessRuleList?: Array<{ id: number; name: string }>;
+    dayDosage: number;
+    disabled?: boolean;
+    dosage: number;
+    /** 未填字段名；父页提交失败传入，改选后由父清空 */
+    errorKeys?: string[];
+    packageMethodId?: null | number;
+    processRuleId?: null | number;
+    processRuleList?: Array<{ id: number; name: string }>;
+    processRuleNoteId?: null | number;
+    processRuleNoteList?: Array<{ id: number; name?: string; note?: string; }>;
+    ruleType: number;
+    /** 当前履约门店，用于加载/保存预设 */
+    storeId?: null | number;
   }>(),
   {
     processRuleList: () => [],
@@ -88,7 +88,7 @@ const packageMethodList = [
 
 const presets = ref<ProcessRulePresetItem[]>([]);
 const presetsLoading = ref(false);
-const activePresetId = ref<number | null>(null);
+const activePresetId = ref<null | number>(null);
 /** 每个门店只自动应用一次，避免反复覆盖医生手动改选 */
 const autoAppliedStoreIds = ref<Set<number>>(new Set());
 /** 新增/编辑预设弹窗 */
@@ -99,15 +99,15 @@ const editForm = ref({
   name: '',
   is_default: false,
   ruleType: 1 as number,
-  packageMethodId: 2 as number | null,
-  processRuleId: null as number | null,
-  childProcessRuleId: null as number | null,
-  processRuleNoteId: null as number | null,
+  packageMethodId: 2 as null | number,
+  processRuleId: null as null | number,
+  childProcessRuleId: null as null | number,
+  processRuleNoteId: null as null | number,
 });
 const editProcessRuleList = ref<Array<{ id: number; name: string }>>([]);
 const editChildProcessRuleList = ref<Array<{ id: number; name: string }>>([]);
 const editProcessRuleNoteList = ref<
-  Array<{ id: number; note?: string; name?: string }>
+  Array<{ id: number; name?: string; note?: string; }>
 >([]);
 
 /** 未填字段 → 区块标红 */
@@ -223,13 +223,16 @@ async function loadPresets() {
       list = res.result;
     }
     presets.value = list;
-    if (!list.length) {
+    if (list.length === 0) {
       console.warn('[煎药预设] 接口返回空列表 store_id=', sid, 'raw=', res);
     }
-    await maybeAutoApplyDefault(sid);
-  } catch (e) {
+    maybeAutoApplyDefault(sid);
+    if (!props.autoApplyDefault) {
+      syncActivePresetFromConfig();
+    }
+  } catch (error) {
     // 失败只记日志，不弹 toast，避免打断正常开方
-    console.error('加载煎药预设失败 store_id=', sid, e);
+    console.error('加载煎药预设失败 store_id=', sid, error);
     presets.value = [];
   } finally {
     presetsLoading.value = false;
@@ -238,18 +241,52 @@ async function loadPresets() {
 
 /**
  * 自动应用默认方案（每门店一次）
- * 为什么：开方进入中药希望直接落到医生常用煎药组合
+ * 优先级：修改(草稿/已填) > 默认方案 > 旧硬编码；父页 autoApplyDefault=false 时绝不覆盖
+ * 为什么不在 autoApply=false 时标记已应用：父页可能稍后才放开（草稿判定异步），需能补触发
  */
-async function maybeAutoApplyDefault(storeId: number) {
+function maybeAutoApplyDefault(storeId: number) {
   if (!props.autoApplyDefault || props.disabled) return;
   if (autoAppliedStoreIds.value.has(storeId)) return;
+  // 列表还在拉时不标记，等 loadPresets finally 后再试
+  if (presetsLoading.value) return;
   const def = presets.value.find((p) => Number(p.is_default) === 1);
-  if (!def) {
-    autoAppliedStoreIds.value.add(storeId);
+  // 无论有无默认都记一次，避免无默认时反复空跑；无默认则走父页旧逻辑（剂包等）
+  autoAppliedStoreIds.value.add(storeId);
+  if (def) {
+    applyPreset(def);
+  } else {
+    syncActivePresetFromConfig();
+  }
+}
+
+/**
+ * 按当前制剂配置高亮匹配的预设（刷新恢复后没有 activePresetId）
+ */
+function syncActivePresetFromConfig() {
+  const rt = Number(props.ruleType || 0);
+  if (!rt || presets.value.length === 0) {
+    activePresetId.value = null;
     return;
   }
-  autoAppliedStoreIds.value.add(storeId);
-  applyPreset(def);
+  const hit = presets.value.find((p) => {
+    const prt = Number(p.ruleType ?? p.rule_type ?? 0);
+    if (prt !== rt) return false;
+    if (rt === 1) {
+      return (
+        Number(p.packageMethodId ?? p.package_method_id ?? 0) ===
+        Number(props.packageMethodId || 0)
+      );
+    }
+    return (
+      Number(p.processRuleId ?? p.process_rule_id ?? 0) ===
+        Number(props.processRuleId || 0) &&
+      Number(p.childProcessRuleId ?? p.child_process_rule_id ?? 0) ===
+        Number(props.childProcessRuleId || 0) &&
+      Number(p.processRuleNoteId ?? p.process_rule_note_id ?? 0) ===
+        Number(props.processRuleNoteId || 0)
+    );
+  });
+  activePresetId.value = hit ? hit.id : null;
 }
 
 /** 点击方案：整包回填（不含剂数） */
@@ -260,7 +297,9 @@ function applyPreset(item: ProcessRulePresetItem) {
   if (ruleType === 1) {
     emitChange({
       ruleType: 1,
-      packageMethodId: Number((item.packageMethodId ?? item.package_method_id) || 2),
+      packageMethodId: Number(
+        (item.packageMethodId ?? item.package_method_id) || 2,
+      ),
       processRuleId: null,
       childProcessRuleId: null,
       processRuleNoteId: null,
@@ -270,11 +309,14 @@ function applyPreset(item: ProcessRulePresetItem) {
   emitChange({
     ruleType: 2,
     packageMethodId: null,
-    processRuleId: Number((item.processRuleId ?? item.process_rule_id) || 0) || null,
+    processRuleId:
+      Number((item.processRuleId ?? item.process_rule_id) || 0) || null,
     childProcessRuleId:
-      Number((item.childProcessRuleId ?? item.child_process_rule_id) || 0) || null,
+      Number((item.childProcessRuleId ?? item.child_process_rule_id) || 0) ||
+      null,
     processRuleNoteId:
-      Number((item.processRuleNoteId ?? item.process_rule_note_id) || 0) || null,
+      Number((item.processRuleNoteId ?? item.process_rule_note_id) || 0) ||
+      null,
   });
 }
 
@@ -296,7 +338,7 @@ async function loadEditProcessRules(pid = 0, ruleId = 0) {
  * 打开新增/编辑弹窗；新增时用当前页面配置预填。
  * 注意：必须用 openPresetEditor() 调新增；若误传 MouseEvent，不能当成编辑项（event 无业务 id）。
  */
-async function openPresetEditor(item?: ProcessRulePresetItem | null) {
+async function openPresetEditor(item?: null | ProcessRulePresetItem) {
   if (props.disabled) return;
   const sid = Number(props.storeId || 0);
   if (sid <= 0) {
@@ -304,7 +346,11 @@ async function openPresetEditor(item?: ProcessRulePresetItem | null) {
     return;
   }
   // 仅业务预设可进编辑：必须有正 id + name；排除误传入的 MouseEvent（有 type 无 name）
-  const raw = item as ProcessRulePresetItem | (Event & { id?: number }) | null | undefined;
+  const raw = item as
+    | (Event & { id?: number })
+    | null
+    | ProcessRulePresetItem
+    | undefined;
   const isEditItem = !!(
     raw &&
     Number((raw as ProcessRulePresetItem).id) > 0 &&
@@ -328,13 +374,15 @@ async function openPresetEditor(item?: ProcessRulePresetItem | null) {
           : null,
       childProcessRuleId:
         ruleType === 2
-          ? Number((item.childProcessRuleId ?? item.child_process_rule_id) || 0) ||
-            null
+          ? Number(
+              (item.childProcessRuleId ?? item.child_process_rule_id) || 0,
+            ) || null
           : null,
       processRuleNoteId:
         ruleType === 2
-          ? Number((item.processRuleNoteId ?? item.process_rule_note_id) || 0) ||
-            null
+          ? Number(
+              (item.processRuleNoteId ?? item.process_rule_note_id) || 0,
+            ) || null
           : null,
     };
   } else {
@@ -344,8 +392,10 @@ async function openPresetEditor(item?: ProcessRulePresetItem | null) {
       name: '',
       is_default: false,
       ruleType,
-      packageMethodId: ruleType === 1 ? Number(props.packageMethodId || 2) : null,
-      processRuleId: ruleType === 2 ? Number(props.processRuleId || 0) || null : null,
+      packageMethodId:
+        ruleType === 1 ? Number(props.packageMethodId || 2) : null,
+      processRuleId:
+        ruleType === 2 ? Number(props.processRuleId || 0) || null : null,
       childProcessRuleId:
         ruleType === 2 ? Number(props.childProcessRuleId || 0) || null : null,
       processRuleNoteId:
@@ -420,7 +470,7 @@ async function submitPresetEditor() {
   const err = validateEditForm();
   if (err) {
     message.warning(err);
-    return Promise.reject();
+    throw undefined;
   }
   editSaving.value = true;
   try {
@@ -431,8 +481,10 @@ async function submitPresetEditor() {
       name: String(editForm.value.name || '').trim(),
       is_default: editForm.value.is_default ? 1 : 0,
       rule_type: ruleType,
-      package_method_id: ruleType === 1 ? Number(editForm.value.packageMethodId) : 0,
-      process_rule_id: ruleType === 2 ? Number(editForm.value.processRuleId) : 0,
+      package_method_id:
+        ruleType === 1 ? Number(editForm.value.packageMethodId) : 0,
+      process_rule_id:
+        ruleType === 2 ? Number(editForm.value.processRuleId) : 0,
       child_process_rule_id:
         ruleType === 2 ? Number(editForm.value.childProcessRuleId) : 0,
       process_rule_note_id:
@@ -441,9 +493,9 @@ async function submitPresetEditor() {
     message.success(editForm.value.id ? '已更新方案' : '已保存方案');
     editVisible.value = false;
     await loadPresets();
-  } catch (e) {
-    console.error(e);
-    return Promise.reject(e);
+  } catch (error) {
+    console.error(error);
+    return Promise.reject(error);
   } finally {
     editSaving.value = false;
   }
@@ -456,8 +508,8 @@ async function handleSetDefault(item: ProcessRulePresetItem) {
     await setProcessRulePresetDefault({ id: item.id });
     message.success('已设为默认');
     await loadPresets();
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
   }
 }
 
@@ -502,6 +554,8 @@ function onPresetContextMenu(item: ProcessRulePresetItem, e: MouseEvent) {
 watch(
   () => Number(props.storeId || 0),
   (sid) => {
+    // 换门店重置「已自动应用」标记，允许新门店再走默认方案
+    autoAppliedStoreIds.value = new Set();
     if (sid > 0) {
       nextTick(() => loadPresets());
     } else {
@@ -510,12 +564,47 @@ watch(
   },
   { immediate: true },
 );
+
+/**
+ * 父页草稿判定完成后才放开 autoApplyDefault；此处补触发默认方案
+ * 为什么：避免选患者时 CMC 先挂载、草稿尚未恢复就把默认方案盖上去
+ */
+watch(
+  () => props.autoApplyDefault,
+  (allow) => {
+    if (!allow) return;
+    const sid = Number(props.storeId || 0);
+    if (sid > 0) {
+      maybeAutoApplyDefault(sid);
+    }
+  },
+);
+
+watch(
+  () =>
+    [
+      props.ruleType,
+      props.packageMethodId,
+      props.processRuleId,
+      props.childProcessRuleId,
+      props.processRuleNoteId,
+      presets.value.length,
+    ] as const,
+  () => {
+    if (!props.autoApplyDefault) {
+      syncActivePresetFromConfig();
+    }
+  },
+);
 </script>
 
 <template>
   <div class="chinese-medicine-config">
     <!-- 制剂方式 + 预设方案同一行，中间格挡隔离 -->
-    <div class="config-section mb-4" :class="{ 'sec-error': errorMap.ruleType }">
+    <div
+      class="config-section mb-4"
+      :class="{ 'sec-error': errorMap.ruleType }"
+    >
       <div class="section-title mb-2">
         <span class="title-text">制剂方式</span>
         <span class="req-star">*</span>
@@ -526,12 +615,12 @@ watch(
             class="pill"
             :class="{ active: ruleType === 1, disabled }"
             @click="handleRuleTypeChange(1)"
-          >自制剂</span>
+            >自制剂</span>
           <span
             class="pill"
             :class="{ active: ruleType === 2, disabled }"
             @click="handleRuleTypeChange(2)"
-          >委托调剂</span>
+            >委托调剂</span>
         </div>
         <span class="row-divider" aria-hidden="true"></span>
         <div class="preset-side">
@@ -560,22 +649,26 @@ watch(
                 class="preset-edit-btn"
                 title="编辑方案"
                 @click.stop="openPresetEditor(item)"
-              >编辑</button>
+              >
+                编辑
+              </button>
             </span>
             <span
               class="pill outline add-preset"
               :class="{ disabled: disabled || presetsLoading }"
               title="新增预设方案"
               @click="openPresetEditor()"
-            >+</span>
+              >+</span>
             <span
-              v-if="!presetsLoading && Number(storeId || 0) > 0 && !presets.length"
+              v-if="
+                !presetsLoading && Number(storeId || 0) > 0 && !presets.length
+              "
               class="preset-empty-tip"
-            >暂无方案</span>
+              >暂无方案</span>
             <span
               v-else-if="!presetsLoading && Number(storeId || 0) <= 0"
               class="preset-empty-tip"
-            >请先选门店</span>
+              >请先选门店</span>
           </div>
         </div>
       </div>
@@ -604,7 +697,9 @@ watch(
           />
         </div>
         <div class="edit-row edit-row-actions">
-          <Checkbox v-model:checked="editForm.is_default">设为默认方案</Checkbox>
+          <Checkbox v-model:checked="editForm.is_default">
+设为默认方案
+</Checkbox>
           <button
             v-if="editForm.id"
             type="button"
@@ -616,7 +711,9 @@ watch(
                 is_default: editForm.is_default ? 1 : 0,
               } as ProcessRulePresetItem)
             "
-          >删除此方案</button>
+          >
+            删除此方案
+          </button>
         </div>
         <div class="edit-row">
           <span class="edit-label">制剂方式</span>
@@ -625,12 +722,12 @@ watch(
               class="pill"
               :class="{ active: editForm.ruleType === 1 }"
               @click="onEditRuleTypeChange(1)"
-            >自制剂</span>
+              >自制剂</span>
             <span
               class="pill"
               :class="{ active: editForm.ruleType === 2 }"
               @click="onEditRuleTypeChange(2)"
-            >委托调剂</span>
+              >委托调剂</span>
           </div>
         </div>
         <div v-if="editForm.ruleType === 1" class="edit-row">
@@ -642,7 +739,7 @@ watch(
               class="pill outline"
               :class="{ active: editForm.packageMethodId === pm.id }"
               @click="editForm.packageMethodId = pm.id"
-            >{{ pm.name }}</span>
+              >{{ pm.name }}</span>
           </div>
         </div>
         <template v-if="editForm.ruleType === 2">
@@ -655,7 +752,7 @@ watch(
                 class="pill outline"
                 :class="{ active: editForm.processRuleId === pr.id }"
                 @click="onEditProcessRuleClick(pr.id)"
-              >{{ pr.name }}</span>
+                >{{ pr.name }}</span>
             </div>
           </div>
           <div v-if="editChildProcessRuleList.length" class="edit-row">
@@ -667,7 +764,7 @@ watch(
                 class="pill outline"
                 :class="{ active: editForm.childProcessRuleId === cr.id }"
                 @click="onEditChildProcessRuleClick(cr.id)"
-              >{{ cr.name }}</span>
+                >{{ cr.name }}</span>
             </div>
           </div>
           <div v-if="editProcessRuleNoteList.length" class="edit-row">
@@ -679,7 +776,7 @@ watch(
                 class="pill outline"
                 :class="{ active: editForm.processRuleNoteId === nr.id }"
                 @click="editForm.processRuleNoteId = nr.id"
-              >{{ nr.note || nr.name }}</span>
+                >{{ nr.note || nr.name }}</span>
             </div>
           </div>
         </template>
@@ -703,7 +800,7 @@ watch(
           class="pill outline"
           :class="{ active: packageMethodId === item.id, disabled }"
           @click="handlePackageMethodClick(item.id)"
-        >{{ item.name }}</span>
+          >{{ item.name }}</span>
       </div>
       <div v-if="errorMap.packageMethodId" class="err-tip">请选择包法</div>
     </div>
@@ -725,7 +822,7 @@ watch(
             class="pill outline"
             :class="{ active: processRuleId === item.id, disabled }"
             @click="handleProcessRuleClick(item)"
-          >{{ item.name }}</span>
+            >{{ item.name }}</span>
         </div>
         <div v-if="errorMap.processRuleId" class="err-tip">请选择制剂要求</div>
       </div>
@@ -745,9 +842,11 @@ watch(
             class="pill outline"
             :class="{ active: childProcessRuleId === item.id, disabled }"
             @click="handleChildProcessRuleClick(item)"
-          >{{ item.name }}</span>
+            >{{ item.name }}</span>
+        </div>
+        <div v-if="errorMap.childProcessRuleId" class="err-tip">
+          请选择煎法说明
         </div>
-        <div v-if="errorMap.childProcessRuleId" class="err-tip">请选择煎法说明</div>
       </div>
       <div
         v-if="processRuleNoteList?.length"
@@ -765,16 +864,21 @@ watch(
             class="pill outline"
             :class="{ active: processRuleNoteId === item.id, disabled }"
             @click="handleProcessRuleNoteClick(item)"
-          >{{ item.note || item.name }}</span>
+            >{{ item.note || item.name }}</span>
+        </div>
+        <div v-if="errorMap.processRuleNoteId" class="err-tip">
+          请选择附加备注
         </div>
-        <div v-if="errorMap.processRuleNoteId" class="err-tip">请选择附加备注</div>
       </div>
     </template>
 
     <!-- 剂数与频次 -->
     <div class="config-section border-t border-dashed border-border pt-4">
       <div class="mt-2 flex flex-wrap items-center gap-4">
-        <div class="flex items-center gap-2" :class="{ 'field-error': errorMap.dosage }">
+        <div
+          class="flex items-center gap-2"
+          :class="{ 'field-error': errorMap.dosage }"
+        >
           <span class="title-text">剂数</span>
           <span class="req-star">*</span>
           <InputNumber
@@ -786,15 +890,24 @@ watch(
             @update:value="(v) => updateDosage(Number(v) || 1)"
           >
             <template #addonBefore>
-              <MinusOutlined @click="!disabled && updateDosage(dosage > 1 ? dosage - 1 : 1)" />
+              <MinusOutlined
+                @click="!disabled && updateDosage(dosage > 1 ? dosage - 1 : 1)"
+              />
             </template>
             <template #addonAfter>
-              <PlusOutlined @click="!disabled && updateDosage(dosage < 100 ? dosage + 1 : 100)" />
+              <PlusOutlined
+                @click="
+                  !disabled && updateDosage(dosage < 100 ? dosage + 1 : 100)
+                "
+              />
             </template>
           </InputNumber>
           <span class="text-sm text-muted-foreground">剂(天)</span>
         </div>
-        <div class="flex items-center gap-2" :class="{ 'field-error': errorMap.dayDosage }">
+        <div
+          class="flex items-center gap-2"
+          :class="{ 'field-error': errorMap.dayDosage }"
+        >
           <span class="title-text">用药频次</span>
           <span class="req-star">*</span>
           <InputNumber
@@ -806,10 +919,20 @@ watch(
             @update:value="(v) => updateDayDosage(Number(v) || 1)"
           >
             <template #addonBefore>
-              <MinusOutlined @click="!disabled && updateDayDosage(dayDosage > 1 ? dayDosage - 1 : 1)" />
+              <MinusOutlined
+                @click="
+                  !disabled &&
+                  updateDayDosage(dayDosage > 1 ? dayDosage - 1 : 1)
+                "
+              />
             </template>
             <template #addonAfter>
-              <PlusOutlined @click="!disabled && updateDayDosage(dayDosage < 100 ? dayDosage + 1 : 100)" />
+              <PlusOutlined
+                @click="
+                  !disabled &&
+                  updateDayDosage(dayDosage < 100 ? dayDosage + 1 : 100)
+                "
+              />
             </template>
           </InputNumber>
           <span class="text-sm text-muted-foreground">次/天</span>
@@ -824,192 +947,222 @@ watch(
 <style scoped>
 .section-title {
   display: flex;
-  align-items: center;
   gap: 2px;
+  align-items: center;
 }
+
 .title-text {
   font-size: 14px;
   font-weight: 700;
   color: hsl(var(--foreground));
 }
+
 .req-star {
   margin-left: 2px;
-  color: hsl(var(--destructive, 0 84% 60%));
   font-size: 14px;
   line-height: 1;
+  color: hsl(var(--destructive, 0 84% 60%));
 }
+
 .err-tip {
   margin-top: 6px;
   font-size: 12px;
   color: hsl(var(--destructive, 0 84% 60%));
 }
+
 .sec-error {
   padding: 10px;
-  margin-left: -10px;
   margin-right: -10px;
-  border-radius: 8px;
-  border: 1px solid hsl(var(--destructive, 0 84% 60%) / 45%);
-  box-shadow: 0 0 6px hsl(var(--destructive, 0 84% 60%) / 18%);
+  margin-left: -10px;
   background: hsl(var(--destructive, 0 84% 60%) / 6%);
+  border: 1px solid hsl(var(--destructive, 0 84% 60%) / 45%);
+  border-radius: 8px;
+  box-shadow: 0 0 6px hsl(var(--destructive, 0 84% 60%) / 18%);
 }
+
 .field-error {
   padding: 4px 8px;
-  border-radius: 8px;
   border: 1px solid hsl(var(--destructive, 0 84% 60%) / 45%);
+  border-radius: 8px;
   box-shadow: 0 0 6px hsl(var(--destructive, 0 84% 60%) / 18%);
 }
+
 .rule-preset-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   gap: 10px 12px;
+  align-items: center;
 }
+
 .row-divider {
-  width: 1px;
+  flex-shrink: 0;
   align-self: stretch;
+  width: 1px;
   min-height: 28px;
   background: hsl(var(--border));
-  flex-shrink: 0;
 }
+
 .preset-side {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
   flex: 1;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
 }
+
 .preset-label {
+  flex-shrink: 0;
   font-size: 12px;
   color: hsl(var(--muted-foreground));
-  flex-shrink: 0;
 }
+
 .pill-group {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
+
 .pill {
   position: relative;
   padding: 4px 16px;
-  background-color: hsl(var(--muted) / 0.55);
-  color: hsl(var(--muted-foreground));
-  border-radius: 20px;
   font-size: 13px;
+  color: hsl(var(--muted-foreground));
   cursor: pointer;
-  border: 1px solid transparent;
-  transition: all 0.2s;
   user-select: none;
+  background-color: hsl(var(--muted) / 55%);
+  border: 1px solid transparent;
+  border-radius: 20px;
+  transition: all 0.2s;
 }
+
 .pill.active {
-  background-color: hsl(var(--primary));
-  color: hsl(var(--primary-foreground, 0 0% 100%));
-  border-color: hsl(var(--primary));
   font-weight: 600;
+  color: hsl(var(--primary-foreground, 0 0% 100%));
+  background-color: hsl(var(--primary));
+  border-color: hsl(var(--primary));
 }
+
 .pill.outline {
   background-color: hsl(var(--card, var(--background)));
   border-color: hsl(var(--border));
 }
+
 .pill.outline.active {
-  background-color: hsl(var(--primary) / 0.12);
   color: hsl(var(--primary));
+  background-color: hsl(var(--primary) / 12%);
   border-color: hsl(var(--primary));
 }
+
 .pill.disabled {
-  opacity: 0.5;
   pointer-events: none;
+  opacity: 0.5;
 }
+
 .preset-pill.is-default {
   border-color: hsl(var(--primary) / 40%);
   box-shadow: 0 0 6px hsl(var(--primary) / 18%);
 }
+
 .default-badge {
   display: inline-block;
-  margin-left: 2px;
   padding: 0 4px;
+  margin-left: 2px;
   font-size: 10px;
   font-style: normal;
   line-height: 14px;
-  border-radius: 3px;
-  background: hsl(var(--primary) / 0.15);
   color: hsl(var(--primary));
+  background: hsl(var(--primary) / 15%);
+  border-radius: 3px;
 }
+
 .preset-pill {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
   max-width: 100%;
 }
+
 .preset-name {
   max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 /* 常显编辑入口：不依赖悬停/右键，避免「点了没反应」 */
 .preset-edit-btn {
   flex-shrink: 0;
-  margin: 0;
   padding: 0 6px;
+  margin: 0;
   font-size: 11px;
   line-height: 18px;
-  border-radius: 10px;
-  border: 1px solid hsl(var(--primary) / 40%);
-  background: hsl(var(--background));
   color: hsl(var(--primary));
-  cursor: pointer;
   pointer-events: auto;
+  cursor: pointer;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--primary) / 40%);
+  border-radius: 10px;
 }
+
 .preset-edit-btn:hover {
-  background: hsl(var(--primary) / 0.1);
+  background: hsl(var(--primary) / 10%);
 }
+
 .preset-del-btn {
-  border-color: hsl(var(--destructive, 0 84% 60%) / 40%);
   color: hsl(var(--destructive, 0 84% 60%));
+  border-color: hsl(var(--destructive, 0 84% 60%) / 40%);
 }
+
 .pill.outline.active .preset-edit-btn,
 .preset-pill.is-default .preset-edit-btn {
   border-color: hsl(var(--primary) / 50%);
 }
+
 .preset-empty-tip {
   font-size: 12px;
-  color: hsl(var(--muted-foreground));
   line-height: 28px;
+  color: hsl(var(--muted-foreground));
 }
+
 .add-preset {
   min-width: 32px;
-  text-align: center;
-  font-weight: 700;
   font-size: 16px;
+  font-weight: 700;
   line-height: 1.2;
+  text-align: center;
 }
+
 .preset-edit-form {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding-top: 8px;
 }
+
 .edit-row {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
+
 .edit-row-actions {
-  flex-direction: row;
+  flex-flow: row wrap;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 8px;
 }
+
 .edit-label {
   font-size: 13px;
   font-weight: 600;
   color: hsl(var(--foreground));
 }
+
 .dosage-input {
   width: 140px;
 }
+
 .dosage-input :deep(.ant-input-number-input) {
   min-width: 48px;
   text-align: left;
diff --git a/apps/web-antd/src/views/doctor/doctor-reception/components/CreateUserPatientModal.vue b/apps/web-antd/src/views/doctor/doctor-reception/components/CreateUserPatientModal.vue
index 92b01f37..4bff6495 100644
--- a/apps/web-antd/src/views/doctor/doctor-reception/components/CreateUserPatientModal.vue
+++ b/apps/web-antd/src/views/doctor/doctor-reception/components/CreateUserPatientModal.vue
@@ -1,13 +1,22 @@
 <script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import type { DoctorCreatedPatientStartResult } from './DoctorCreatedPatientModal.vue';
+
+import type { AddressRecognizeResult } from '#/components/address-paste-block/AddressPasteBlock.vue';
+import type { AddressValue } from '#/util/address-index';
+
 /**
  * 医生新建就诊人：基础信息 + 健康信息（与患者小程序 myinfo-add 对齐）+ 可选免除挂号费
  * 健康信息采用「有/无 + 标签多选（可自定义）」交互，提交后自动挂号
  */
-import { computed, ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import {
+  Modal as AntModal,
+  Button,
   Col,
   DatePicker,
   Form,
@@ -21,9 +30,21 @@ import {
   Select,
   Switch,
 } from 'ant-design-vue';
-import dayjs, { type Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 
-import { createUserPatientApi } from '#/views/doctor/doctor-reception/api';
+import AddressPasteBlock from '#/components/address-paste-block/AddressPasteBlock.vue';
+import RegionAddressPicker from '#/components/form/components/region-address-picker.vue';
+import {
+  ensureResolvedAddress,
+  formatAddressDisplay,
+  resolveAddressPairFromNames,
+} from '#/util/address-index';
+import {
+  checkCreatedUserPatientDuplicateApi,
+  createUserPatientApi,
+  getCurrentStoreTypeApi,
+  startOfflineReceptionByPatientApi,
+} from '#/views/doctor/doctor-reception/api';
 import {
   ALLERGIC_HISTORY_OPTIONS,
   EPIDEMIC_HISTORY_OPTIONS,
@@ -36,39 +57,112 @@ import {
   PERSONAL_HISTORY_OPTIONS,
   PRESENT_HISTORY_OPTIONS,
 } from '#/views/doctor/doctor-reception/config/health-history';
-import RegionAddressPicker from '#/components/form/components/region-address-picker.vue';
-import {
-  ensureResolvedAddress,
-  formatAddressDisplay,
-  type AddressValue,
-} from '#/util/address-index';
 
 /** 创建成功回传：含 register_id / user_patient_id / is_pay，供接诊页分情况引导 */
 export type CreateUserPatientResult = {
-  user_patient_id: number;
-  register_id: number;
-  waive_register_fee: number;
-  price: string;
   is_pay: number;
+  price: string;
+  register_id: number;
+  user_patient_id: number;
+  waive_register_fee: number;
 };
 
 /** 健康史字段名（status 与 history 成对） */
 type HistoryKey =
   | 'allergic'
-  | 'present'
-  | 'person'
-  | 'family'
   | 'epidemic'
-  | 'personal'
+  | 'family'
+  | 'marital'
   | 'menstrual'
-  | 'marital';
+  | 'person'
+  | 'personal'
+  | 'present';
+
+/** 当前诊所地址（get-current-store-type.store_address） */
+type ClinicAddress = {
+  available: boolean;
+  city: string;
+  city_id: number;
+  contact: string;
+  mobile: string;
+  path_label: string;
+  position: string;
+  province: string;
+  province_id: number;
+  store_name: string;
+};
 
 const submitting = ref(false);
+/** 部分重复时用户确认仍新建 */
+const forceCreate = ref(0);
 const form = ref(buildEmptyForm());
-const onSuccessCb = ref<null | ((res: CreateUserPatientResult) => void)>(null);
+const onSuccessCb = ref<((res: CreateUserPatientResult) => void) | null>(null);
+const onSelectExistingCb = ref<
+  ((res: DoctorCreatedPatientStartResult) => Promise<void> | void) | null
+>(null);
+const clinicAddress = ref<ClinicAddress | null>(null);
+/** 去重弹窗 */
+const dupVisible = ref(false);
+const dupExact = ref(false);
+const dupItems = ref<
+  Array<{
+    age?: number;
+    id: number;
+    is_claimed: number;
+    match_mobile: number;
+    match_name: number;
+    mobile: string;
+    name: string;
+    sex?: number;
+  }>
+>([]);
+const dupStartingId = ref(0);
+/** 识别回填字段高亮 */
+const flashMap = ref({
+  name: false,
+  mobile: false,
+  region: false,
+  detail: false,
+});
+let flashTimer: null | ReturnType<typeof setTimeout> = null;
+
+/** 是否已填可用收货地址（有详细地址 + 省市区 ID） */
+function hasFilledShipAddress() {
+  const detail = String(form.value.ship_detail_address || '').trim();
+  const region = form.value.ship_region;
+  return !!(detail && region && region.length >= 2);
+}
+
+/** 诊所地址展示文案 */
+const clinicAddressText = computed(() => {
+  const a = clinicAddress.value;
+  if (!a?.available) return '';
+  return `${a.path_label || ''}${a.position || ''}`;
+});
+
+/** 覆盖确认展示旧值 */
+const pasteCurrentValues = computed(() => ({
+  name: String(form.value.ship_name || '').trim(),
+  phone: String(form.value.ship_mobile || '').trim(),
+  region:
+    form.value.ship_region && form.value.ship_region.length >= 2
+      ? formatAddressDisplay(form.value.ship_region) || '已选省市区'
+      : '',
+  detail: String(form.value.ship_detail_address || '').trim(),
+}));
+
+/** 供粘贴识别判断是否需覆盖确认 */
+const pasteFilled = computed(() => ({
+  name: !!pasteCurrentValues.value.name,
+  phone: !!pasteCurrentValues.value.phone,
+  region: !!pasteCurrentValues.value.region,
+  detail: !!pasteCurrentValues.value.detail,
+}));
 
 /** ≤6 岁需填监护人（与小程序、后端 UnclaimedPatientService 一致） */
-const showGuardian = computed(() => Number(form.value.age) > 0 && Number(form.value.age) <= 6);
+const showGuardian = computed(
+  () => Number(form.value.age) > 0 && Number(form.value.age) <= 6,
+);
 
 /** 月经史仅女性展示 */
 const showMenstrualHistory = computed(() => Number(form.value.sex) === 2);
@@ -136,11 +230,11 @@ const relationOptions = [
 
 /** 各类史：status 字段名 + history 字段名 + 预设选项 */
 const historyBlocks: Array<{
+  historyField: keyof ReturnType<typeof buildEmptyForm>;
   key: HistoryKey;
   label: string;
-  statusField: keyof ReturnType<typeof buildEmptyForm>;
-  historyField: keyof ReturnType<typeof buildEmptyForm>;
   options: Array<{ label: string; value: string }>;
+  statusField: keyof ReturnType<typeof buildEmptyForm>;
   visible: () => boolean;
 }> = [
   {
@@ -224,12 +318,17 @@ function onHistoryStatusChange(
 }
 
 /** 读取某条史的标签数组（模板里避免复杂断言） */
-function getHistoryTags(historyField: keyof ReturnType<typeof buildEmptyForm>): string[] {
+function getHistoryTags(
+  historyField: keyof ReturnType<typeof buildEmptyForm>,
+): string[] {
   return (form.value[historyField] as string[]) || [];
 }
 
 /** 写入某条史的标签数组 */
-function setHistoryTags(historyField: keyof ReturnType<typeof buildEmptyForm>, tags: string[]) {
+function setHistoryTags(
+  historyField: keyof ReturnType<typeof buildEmptyForm>,
+  tags: string[],
+) {
   (form.value[historyField] as string[]) = tags || [];
 }
 
@@ -267,10 +366,13 @@ async function buildSubmitPayload() {
   return {
     ...rest,
     waive_register_fee: f.waive_register_fee ? 1 : 0,
+    force_create: forceCreate.value,
     menstrual_status: menstrualOk ? f.menstrual_status : 0,
-    menstrual_history: menstrualOk && f.menstrual_status === 1 ? f.menstrual_history : [],
+    menstrual_history:
+      menstrualOk && f.menstrual_status === 1 ? f.menstrual_history : [],
     marital_status: maritalOk ? f.marital_status : 0,
-    marital_history: maritalOk && f.marital_status === 1 ? f.marital_history : [],
+    marital_history:
+      maritalOk && f.marital_status === 1 ? f.marital_history : [],
     allergic_history: f.allergic_status === 1 ? f.allergic_history : [],
     present_history: f.present_status === 1 ? f.present_history : [],
     person_history: f.person_status === 1 ? f.person_history : [],
@@ -281,75 +383,232 @@ async function buildSubmitPayload() {
   };
 }
 
+/**
+ * 提交前检查姓名/手机是否与本医生已创建就诊人重复
+ * 有命中则弹出自建列表；无命中返回 false 继续创建流程
+ */
+async function checkDuplicateBeforeCreate(): Promise<boolean> {
+  try {
+    const res = await checkCreatedUserPatientDuplicateApi({
+      name: String(form.value.name || '').trim(),
+      mobile: String(form.value.mobile || '').trim(),
+    });
+    const items = Array.isArray(res?.items) ? res.items : [];
+    if (items.length === 0) return false;
+    dupExact.value = !!res?.exact;
+    dupItems.value = items;
+    dupVisible.value = true;
+    return true;
+  } catch (error: any) {
+    message.error(error?.message || '去重检查失败');
+    return true;
+  }
+}
+
+/** 选择已有就诊人并接诊（exact / 部分重复「使用已有」） */
+async function selectExistingPatient(item: { id: number }) {
+  if (!item?.id) return;
+  dupStartingId.value = item.id;
+  try {
+    const res = await startOfflineReceptionByPatientApi({
+      user_patient_id: item.id,
+      waive_register_fee: form.value.waive_register_fee ? 1 : 0,
+    });
+    message.success('已选择已有就诊人');
+    dupVisible.value = false;
+    modalApi.close();
+    await onSelectExistingCb.value?.(res as DoctorCreatedPatientStartResult);
+  } catch (error: any) {
+    message.error(error?.message || '接诊失败');
+  } finally {
+    dupStartingId.value = 0;
+  }
+}
+
+/** 部分重复时仍创建新的 */
+async function forceCreateNew() {
+  dupVisible.value = false;
+  forceCreate.value = 1;
+  await continueCreateAfterDupCheck();
+}
+
+/**
+ * 校验基础字段；通过返回 true
+ */
+function validateBasic(): boolean {
+  if (!form.value.name?.trim()) {
+    message.error('请填写姓名');
+    return false;
+  }
+  if (!form.value.mobile || !/^\d{11}$/.test(form.value.mobile)) {
+    message.error('请填写正确手机号');
+    return false;
+  }
+  if (!form.value.id_card && !form.value.birthday) {
+    message.error('请填写身份证或生日');
+    return false;
+  }
+  if (form.value.age == null || form.value.age < 1) {
+    message.error('请填写年龄');
+    return false;
+  }
+  if (showGuardian.value) {
+    if (
+      !form.value.guardian_name ||
+      !form.value.guardian_id_card ||
+      !form.value.guardian_mobile
+    ) {
+      message.error('6岁及以下请填写监护人信息');
+      return false;
+    }
+  }
+  const shipDetail = String(form.value.ship_detail_address || '').trim();
+  if (shipDetail) {
+    const shipName = String(
+      form.value.ship_name || form.value.name || '',
+    ).trim();
+    if (shipName.length > 10) {
+      message.error('收件人最多10个字');
+      return false;
+    }
+    if (!form.value.ship_region || form.value.ship_region.length < 2) {
+      message.error('请选择省市区');
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 真正提交创建 */
+async function doSubmit() {
+  submitting.value = true;
+  modalApi.setState({ confirmLoading: true });
+  try {
+    const res = await createUserPatientApi(await buildSubmitPayload());
+    message.success('创建成功，已自动挂号');
+    onSuccessCb.value?.(res as CreateUserPatientResult);
+    modalApi.close();
+  } catch (error: any) {
+    message.error(error?.message || '创建失败');
+  } finally {
+    submitting.value = false;
+    modalApi.setState({ confirmLoading: false });
+  }
+}
+
+/**
+ * 一键填入诊所地址（省市区 ID + 详细地址；收件人优先诊所联系人）
+ */
+async function applyClinicAddress() {
+  const a = clinicAddress.value;
+  if (!a?.available) {
+    message.warning('当前诊所未配置完整地址');
+    return;
+  }
+  form.value.ship_region = [a.province_id, a.city_id];
+  form.value.ship_detail_address = a.position;
+  await ensureResolvedAddress(form.value.ship_region);
+  if (a.contact) {
+    form.value.ship_name = a.contact.slice(0, 10);
+  } else if (!form.value.ship_name && form.value.name) {
+    form.value.ship_name = form.value.name.slice(0, 10);
+  }
+  if (a.mobile) {
+    form.value.ship_mobile = a.mobile;
+  } else if (!form.value.ship_mobile && form.value.mobile) {
+    form.value.ship_mobile = form.value.mobile;
+  }
+  triggerFieldFlash({
+    name: true,
+    mobile: true,
+    region: true,
+    detail: true,
+  });
+}
+
+/** 打开时拉取诊所地址，供左侧一键填入与提交前确认 */
+async function loadClinicAddress() {
+  try {
+    const res = await getCurrentStoreTypeApi();
+    const addr = (res?.store_address || null) as ClinicAddress | null;
+    clinicAddress.value = addr;
+  } catch {
+    clinicAddress.value = null;
+  }
+}
+
+/**
+ * 去重通过后：诊所地址二次确认 → 真正提交
+ */
+async function continueCreateAfterDupCheck() {
+  if (!hasFilledShipAddress() && clinicAddress.value?.available) {
+    const choice = await new Promise<'clinic' | 'empty'>((resolve) => {
+      AntModal.confirm({
+        title: '未填写收货地址',
+        content: () =>
+          h(
+            'div',
+            {
+              style:
+                'white-space: pre-wrap; line-height: 1.55; font-size: 13px;',
+            },
+            [
+              `是否使用诊所「${clinicAddress.value?.store_name || ''}」的地址？\n`,
+              clinicAddressText.value || '',
+            ],
+          ),
+        okText: '使用诊所地址',
+        cancelText: '空着不填',
+        centered: true,
+        onOk: () => resolve('clinic'),
+        onCancel: () => resolve('empty'),
+      });
+    });
+    if (choice === 'clinic') {
+      await applyClinicAddress();
+    }
+  }
+  await doSubmit();
+}
+
 const [Modal, modalApi] = useVbenModal({
   fullscreenButton: false,
   draggable: true,
-  // 健康信息字段较多，限制内容区高度可滚动，避免弹窗撑出视口
-  contentClass: 'max-h-[70vh] overflow-y-auto',
+  // 外层不滚动，左右栏各自 overflow 独立滚动
+  contentClass: 'max-h-[75vh] overflow-hidden cup-modal-content',
   onCancel() {
     modalApi.close();
   },
   async onConfirm() {
-    if (!form.value.name?.trim()) {
-      message.error('请填写姓名');
-      return;
-    }
-    if (!form.value.mobile || !/^\d{11}$/.test(form.value.mobile)) {
-      message.error('请填写正确手机号');
-      return;
-    }
-    if (!form.value.id_card && !form.value.birthday) {
-      message.error('请填写身份证或生日');
-      return;
-    }
-    if (form.value.age == null || form.value.age < 1) {
-      message.error('请填写年龄');
-      return;
-    }
-    if (showGuardian.value) {
-      if (!form.value.guardian_name || !form.value.guardian_id_card || !form.value.guardian_mobile) {
-        message.error('6岁及以下请填写监护人信息');
-        return;
-      }
-    }
-    // 填了收货地址时校验收件人：最多 10 个字（含默认用姓名）
-    const shipDetail = String(form.value.ship_detail_address || '').trim();
-    if (shipDetail) {
-      const shipName = String(form.value.ship_name || form.value.name || '').trim();
-      if (shipName.length > 10) {
-        message.error('收件人最多10个字');
-        return;
-      }
-    }
-    submitting.value = true;
-    modalApi.setState({ confirmLoading: true });
-    try {
-      const res = await createUserPatientApi(await buildSubmitPayload());
-      message.success('创建成功，已自动挂号');
-      // 先回调再关窗：父级按 is_pay 决定选中列表或弹认领码
-      onSuccessCb.value?.(res as CreateUserPatientResult);
-      modalApi.close();
-    } catch (e: any) {
-      message.error(e?.message || '创建失败');
-    } finally {
-      submitting.value = false;
-      modalApi.setState({ confirmLoading: false });
-    }
+    if (!validateBasic()) return;
+    // 姓名/手机去重：有命中先弹窗，不直接创建
+    if (await checkDuplicateBeforeCreate()) return;
+    forceCreate.value = 0;
+    await continueCreateAfterDupCheck();
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
       form.value = buildEmptyForm();
+      clinicAddress.value = null;
+      forceCreate.value = 0;
+      dupVisible.value = false;
+      dupItems.value = [];
       const data =
         modalApi.getData<{
+          onSelectExisting?: (
+            res: DoctorCreatedPatientStartResult,
+          ) => Promise<void> | void;
           onSuccess?: (res: CreateUserPatientResult) => void;
         }>() || {};
       onSuccessCb.value = data.onSuccess || null;
+      onSelectExistingCb.value = data.onSelectExisting || null;
+      void loadClinicAddress();
     }
   },
 });
 
 /** 生日选择回填（value-format 时 change 直接给字符串） */
-function onBirthdayChange(v: Dayjs | string | null) {
+function onBirthdayChange(v: Dayjs | null | string) {
   if (!v) {
     form.value.birthday = '';
     return;
@@ -358,160 +617,482 @@ function onBirthdayChange(v: Dayjs | string | null) {
   form.value.birthday = str;
   form.value.age = dayjs().diff(dayjs(str), 'year');
 }
+
+/**
+ * 粘贴识别回填：有值才覆盖；省市区经 search 解析为 ship_region ID
+ */
+async function onAddressRecognized(result: AddressRecognizeResult) {
+  if (!result) return;
+  const flash = { name: false, mobile: false, region: false, detail: false };
+  if (result.name) {
+    form.value.ship_name = String(result.name).slice(0, 10);
+    flash.name = true;
+  }
+  if (result.phone) {
+    form.value.ship_mobile = result.phone;
+    flash.mobile = true;
+  }
+  if (result.detail) {
+    form.value.ship_detail_address = result.detail;
+    flash.detail = true;
+  }
+  if (result.province || result.city || result.area) {
+    flash.region = true;
+    await resolveShipRegionIds(result.province, result.city, result.area);
+  }
+  triggerFieldFlash(flash);
+}
+
+/** 中文省市区 → [provinceId, leafId]（短词搜索，避免整串 LIKE 无结果） */
+async function resolveShipRegionIds(
+  province: string,
+  city: string,
+  area: string,
+) {
+  try {
+    const pair = await resolveAddressPairFromNames(province, city, area);
+    if (!pair) return;
+    form.value.ship_region = pair;
+    await ensureResolvedAddress(pair);
+  } catch {
+    // 解析失败不阻断，用户可手选省市区
+  }
+}
+
+function triggerFieldFlash(flash: {
+  detail: boolean;
+  mobile: boolean;
+  name: boolean;
+  region: boolean;
+}) {
+  if (flashTimer) clearTimeout(flashTimer);
+  flashMap.value = {
+    name: false,
+    mobile: false,
+    region: false,
+    detail: false,
+  };
+  requestAnimationFrame(() => {
+    flashMap.value = { ...flash };
+    flashTimer = setTimeout(() => {
+      flashMap.value = {
+        name: false,
+        mobile: false,
+        region: false,
+        detail: false,
+      };
+    }, 1200);
+  });
+}
 </script>
 
 <template>
-  <Modal class="w-[800px]" title="新建就诊人">
+  <Modal class="w-[1120px] max-w-[95vw]" title="新建就诊人">
     <Form layout="vertical" class="create-user-patient-form">
-      <div class="mb-3 text-sm font-medium text-[hsl(var(--foreground))]">基础信息</div>
-      <Row :gutter="12">
-        <Col :span="12">
-          <FormItem label="姓名" required>
-            <Input v-model:value="form.name" placeholder="真实姓名" />
-          </FormItem>
-        </Col>
-        <Col :span="12">
-          <FormItem label="手机号" required>
-            <Input v-model:value="form.mobile" maxlength="11" placeholder="11位手机号" />
-          </FormItem>
-        </Col>
-        <Col :span="12">
-          <FormItem label="身份证号">
-            <Input v-model:value="form.id_card" maxlength="18" placeholder="选填" />
-          </FormItem>
-        </Col>
-        <Col :span="12">
-          <FormItem label="生日" required>
-            <DatePicker
-              class="w-full"
-              :value="form.birthday ? dayjs(form.birthday) : undefined"
-              value-format="YYYY-MM-DD"
-              placeholder="请选择"
-              @change="onBirthdayChange"
-            />
-          </FormItem>
-        </Col>
-        <Col :span="8">
-          <FormItem label="性别" required>
-            <RadioGroup v-model:value="form.sex">
-              <Radio :value="1">男</Radio>
-              <Radio :value="2">女</Radio>
-            </RadioGroup>
-          </FormItem>
-        </Col>
-        <Col :span="8">
-          <FormItem label="年龄" required>
-            <InputNumber v-model:value="form.age" class="w-full" :min="1" :max="200" />
-          </FormItem>
-        </Col>
-        <Col :span="8">
-          <FormItem label="关系">
-            <Select v-model:value="form.relation" :options="relationOptions" />
-          </FormItem>
-        </Col>
-        <Col :span="24">
-          <FormItem label="免除挂号费">
-            <Switch v-model:checked="form.waive_register_fee" checked-children="免除" un-checked-children="收取" />
-            <span class="ml-2 text-xs text-[hsl(var(--muted-foreground))]">
-              开启后挂号费为 0 且标记已支付，可直接接诊
-            </span>
-          </FormItem>
-        </Col>
-      </Row>
-      <template v-if="showGuardian">
-        <div class="mb-3 mt-2 text-sm font-medium text-[hsl(var(--foreground))]">监护人信息</div>
-        <Row :gutter="12">
-          <Col :span="8">
-            <FormItem label="监护人姓名" required>
-              <Input v-model:value="form.guardian_name" />
+      <!-- 左地址 / 右基础+健康，加宽后分栏阅读更清晰 -->
+      <div class="cup-layout">
+        <aside class="cup-address-col">
+          <div class="cup-section-head">
+            <span class="cup-section-title">收货地址</span>
+            <span class="cup-section-sub">选填，填写后开方默认使用</span>
+          </div>
+          <div v-if="clinicAddress?.available" class="clinic-hint">
+            <div class="clinic-hint-text">
+              诊所地址：{{ clinicAddressText }}
+            </div>
+            <Button
+              type="link"
+              size="small"
+              class="clinic-hint-btn"
+              @click="applyClinicAddress"
+            >
+              使用诊所地址
+            </Button>
+          </div>
+          <div v-else class="clinic-hint muted">
+            未配置可用诊所地址时，可粘贴识别或手填；提交时空着则不建收货地址
+          </div>
+          <AddressPasteBlock
+            :filled="pasteFilled"
+            :current-values="pasteCurrentValues"
+            @recognized="onAddressRecognized"
+          />
+          <div :class="{ 'field-flash': flashMap.region }">
+            <FormItem label="省市区">
+              <RegionAddressPicker v-model:value="form.ship_region" />
             </FormItem>
-          </Col>
-          <Col :span="8">
-            <FormItem label="监护人身份证" required>
-              <Input v-model:value="form.guardian_id_card" maxlength="18" />
+          </div>
+          <div :class="{ 'field-flash': flashMap.detail }">
+            <FormItem label="详细地址">
+              <Input
+                v-model:value="form.ship_detail_address"
+                placeholder="街道门牌等"
+              />
             </FormItem>
-          </Col>
-          <Col :span="8">
-            <FormItem label="监护人手机" required>
-              <Input v-model:value="form.guardian_mobile" maxlength="11" />
+          </div>
+          <div :class="{ 'field-flash': flashMap.name }">
+            <FormItem label="收件人">
+              <Input
+                v-model:value="form.ship_name"
+                :maxlength="10"
+                show-count
+                :placeholder="
+                  form.name ? `默认：${form.name}` : '默认就诊人姓名'
+                "
+              />
             </FormItem>
-          </Col>
-        </Row>
-      </template>
-      <!-- 收货地址选填：填详细地址才会落库，开方优先用该地址 -->
-      <div class="mb-3 mt-2 text-sm font-medium text-[hsl(var(--foreground))]">
-        收货地址
-        <span class="ml-2 text-xs font-normal text-[hsl(var(--muted-foreground))]">选填，填写后开方默认使用</span>
+          </div>
+          <div :class="{ 'field-flash': flashMap.mobile }">
+            <FormItem label="收件手机">
+              <Input
+                v-model:value="form.ship_mobile"
+                maxlength="11"
+                :placeholder="
+                  form.mobile ? `默认：${form.mobile}` : '默认就诊人手机'
+                "
+              />
+            </FormItem>
+          </div>
+        </aside>
+        <div class="cup-main-col">
+          <div class="mb-3 text-sm font-medium text-[hsl(var(--foreground))]">
+            基础信息
+          </div>
+          <Row :gutter="12">
+            <Col :span="12">
+              <FormItem label="姓名" required>
+                <Input v-model:value="form.name" placeholder="真实姓名" />
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="手机号" required>
+                <Input
+                  v-model:value="form.mobile"
+                  maxlength="11"
+                  placeholder="11位手机号"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="身份证号">
+                <Input
+                  v-model:value="form.id_card"
+                  maxlength="18"
+                  placeholder="选填"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="生日" required>
+                <DatePicker
+                  class="w-full"
+                  :value="form.birthday ? dayjs(form.birthday) : undefined"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择"
+                  @change="onBirthdayChange"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem label="性别" required>
+                <RadioGroup v-model:value="form.sex">
+                  <Radio :value="1">男</Radio>
+                  <Radio :value="2">女</Radio>
+                </RadioGroup>
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem label="年龄" required>
+                <InputNumber
+                  v-model:value="form.age"
+                  class="w-full"
+                  :min="1"
+                  :max="200"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="8">
+              <FormItem label="关系">
+                <Select
+                  v-model:value="form.relation"
+                  :options="relationOptions"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="24">
+              <FormItem label="免除挂号费">
+                <Switch
+                  v-model:checked="form.waive_register_fee"
+                  checked-children="免除"
+                  un-checked-children="收取"
+                />
+                <span class="ml-2 text-xs text-[hsl(var(--muted-foreground))]">
+                  开启后挂号费为 0 且标记已支付，可直接接诊
+                </span>
+              </FormItem>
+            </Col>
+          </Row>
+          <template v-if="showGuardian">
+            <div
+              class="mb-3 mt-2 text-sm font-medium text-[hsl(var(--foreground))]"
+            >
+              监护人信息
+            </div>
+            <Row :gutter="12">
+              <Col :span="8">
+                <FormItem label="监护人姓名" required>
+                  <Input v-model:value="form.guardian_name" />
+                </FormItem>
+              </Col>
+              <Col :span="8">
+                <FormItem label="监护人身份证" required>
+                  <Input v-model:value="form.guardian_id_card" maxlength="18" />
+                </FormItem>
+              </Col>
+              <Col :span="8">
+                <FormItem label="监护人手机" required>
+                  <Input v-model:value="form.guardian_mobile" maxlength="11" />
+                </FormItem>
+              </Col>
+            </Row>
+          </template>
+          <div
+            class="mb-3 mt-2 text-sm font-medium text-[hsl(var(--foreground))]"
+          >
+            健康信息
+          </div>
+          <Row :gutter="12">
+            <Col :span="12">
+              <FormItem label="肝功能">
+                <RadioGroup
+                  v-model:value="form.liver_function"
+                  :options="LIVER_RENAL_OPTIONS"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="肾功能">
+                <RadioGroup
+                  v-model:value="form.renal_function"
+                  :options="LIVER_RENAL_OPTIONS"
+                />
+              </FormItem>
+            </Col>
+            <Col
+              v-for="block in historyBlocks"
+              v-show="block.visible()"
+              :key="block.key"
+              :span="12"
+            >
+              <FormItem :label="block.label">
+                <RadioGroup
+                  :value="Number(form[block.statusField])"
+                  :options="HISTORY_STATUS_OPTIONS"
+                  @update:value="
+                    (v: number) =>
+                      onHistoryStatusChange(
+                        block.statusField,
+                        block.historyField,
+                        v,
+                      )
+                  "
+                />
+                <Select
+                  v-if="Number(form[block.statusField]) === 1"
+                  class="mt-2 w-full"
+                  mode="tags"
+                  :value="getHistoryTags(block.historyField)"
+                  :options="block.options"
+                  placeholder="选择或输入后回车添加"
+                  allow-clear
+                  @update:value="
+                    (v: string[]) => setHistoryTags(block.historyField, v)
+                  "
+                />
+              </FormItem>
+            </Col>
+          </Row>
+        </div>
       </div>
-      <Row :gutter="12">
-        <Col :span="12">
-          <FormItem label="省市区">
-            <RegionAddressPicker v-model:value="form.ship_region" />
-          </FormItem>
-        </Col>
-        <Col :span="12">
-          <FormItem label="详细地址">
-            <Input v-model:value="form.ship_detail_address" placeholder="街道门牌等" />
-          </FormItem>
-        </Col>
-        <Col :span="12">
-          <FormItem label="收件人">
-            <Input
-              v-model:value="form.ship_name"
-              :maxlength="10"
-              show-count
-              :placeholder="form.name ? `默认：${form.name}` : '默认就诊人姓名'"
-            />
-          </FormItem>
-        </Col>
-        <Col :span="12">
-          <FormItem label="收件手机">
-            <Input
-              v-model:value="form.ship_mobile"
-              maxlength="11"
-              :placeholder="form.mobile ? `默认：${form.mobile}` : '默认就诊人手机'"
-            />
-          </FormItem>
-        </Col>
-      </Row>
-      <!-- 健康信息：字段与交互对齐患者小程序；一行两列排布 -->
-      <div class="mb-3 mt-2 text-sm font-medium text-[hsl(var(--foreground))]">健康信息</div>
-      <Row :gutter="12">
-        <Col :span="12">
-          <FormItem label="肝功能">
-            <RadioGroup v-model:value="form.liver_function" :options="LIVER_RENAL_OPTIONS" />
-          </FormItem>
-        </Col>
-        <Col :span="12">
-          <FormItem label="肾功能">
-            <RadioGroup v-model:value="form.renal_function" :options="LIVER_RENAL_OPTIONS" />
-          </FormItem>
-        </Col>
-        <Col
-          v-for="block in historyBlocks"
-          v-show="block.visible()"
-          :key="block.key"
-          :span="12"
-        >
-          <FormItem :label="block.label">
-            <RadioGroup
-              :value="Number(form[block.statusField])"
-              :options="HISTORY_STATUS_OPTIONS"
-              @update:value="(v: number) => onHistoryStatusChange(block.statusField, block.historyField, v)"
-            />
-            <Select
-              v-if="Number(form[block.statusField]) === 1"
-              class="mt-2 w-full"
-              mode="tags"
-              :value="getHistoryTags(block.historyField)"
-              :options="block.options"
-              placeholder="选择或输入后回车添加"
-              allow-clear
-              @update:value="(v: string[]) => setHistoryTags(block.historyField, v)"
-            />
-          </FormItem>
-        </Col>
-      </Row>
     </Form>
+    <!-- 姓名/手机去重：列出本医生已创建匹配人 -->
+    <AntModal
+      v-model:open="dupVisible"
+      :title="dupExact ? '已存在同名同手机就诊人' : '发现相似就诊人'"
+      :footer="null"
+      :mask-closable="false"
+      centered
+      width="520px"
+      destroy-on-close
+    >
+      <div class="mb-3 text-sm text-[hsl(var(--muted-foreground))]">
+        <template v-if="dupExact">
+          姓名与手机号均相同，不能新建，请选择已有就诊人并接诊。
+        </template>
+        <template v-else>
+          仅姓名或手机号与已创建就诊人重复，可使用已有或仍创建新的。
+        </template>
+      </div>
+      <div
+        v-for="item in dupItems"
+        :key="item.id"
+        class="mb-2 flex items-center justify-between gap-2 rounded border border-[hsl(var(--border))] px-3 py-2"
+      >
+        <div class="min-w-0 text-sm">
+          <div class="font-medium text-[hsl(var(--foreground))]">
+            {{ item.name }} · {{ item.mobile }}
+          </div>
+          <div class="text-xs text-[hsl(var(--muted-foreground))]">
+            {{ item.sex === 2 ? '女' : '男' }} · {{ item.age || 0 }}岁 ·
+            {{ item.is_claimed ? '已认领' : '未认领' }}
+            <span v-if="item.match_name"> · 姓名相同</span>
+            <span v-if="item.match_mobile"> · 手机相同</span>
+          </div>
+        </div>
+        <Button
+          type="primary"
+          size="small"
+          :loading="dupStartingId === item.id"
+          @click="selectExistingPatient(item)"
+        >
+          {{ dupExact ? '选择并接诊' : '使用已有' }}
+        </Button>
+      </div>
+      <div class="mt-4 flex justify-end gap-2">
+        <Button @click="dupVisible = false">取消</Button>
+        <Button v-if="!dupExact" type="primary" ghost @click="forceCreateNew">
+          仍创建新的
+        </Button>
+      </div>
+    </AntModal>
   </Modal>
 </template>
+
+<style scoped>
+/* 撑满弹窗内容区高度，供左右栏各自滚动 */
+.create-user-patient-form {
+  display: flex;
+  flex-direction: column;
+  height: min(70vh, 720px);
+  min-height: 420px;
+}
+
+.cup-layout {
+  display: flex;
+  flex: 1;
+  gap: 20px;
+  align-items: stretch;
+  height: 100%;
+  min-height: 0;
+}
+
+.cup-address-col {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 380px;
+  padding: 12px;
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  background: hsl(var(--muted) / 20%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.cup-main-col {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  padding-right: 4px;
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+}
+
+.cup-section-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 10px;
+}
+
+.cup-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.cup-section-sub {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.clinic-hint {
+  display: flex;
+  gap: 4px;
+  align-items: flex-start;
+  padding: 8px 10px;
+  margin-bottom: 10px;
+  font-size: 12px;
+  color: hsl(var(--foreground));
+  background: hsl(var(--primary) / 6%);
+  border: 1px solid hsl(var(--primary) / 25%);
+  border-radius: 6px;
+}
+
+.clinic-hint.muted {
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--card, var(--background)));
+  border-color: hsl(var(--border));
+}
+
+.clinic-hint-text {
+  flex: 1;
+  line-height: 1.45;
+  word-break: break-all;
+}
+
+.clinic-hint-btn {
+  flex-shrink: 0;
+  height: auto;
+  padding: 0;
+}
+
+.field-flash {
+  border-radius: 6px;
+  animation: addr-field-flash 1.2s ease;
+}
+
+@keyframes addr-field-flash {
+  0%,
+  100% {
+    background-color: transparent;
+  }
+
+  30%,
+  60% {
+    background-color: hsl(var(--warning) / 35%);
+  }
+}
+
+@media (max-width: 900px) {
+  .create-user-patient-form {
+    height: auto;
+    min-height: 0;
+    max-height: 70vh;
+  }
+
+  .cup-layout {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .cup-address-col {
+    width: 100%;
+    max-height: 40vh;
+  }
+
+  .cup-main-col {
+    max-height: 50vh;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/doctor/doctor-reception/components/DoctorCreatedPatientModal.vue b/apps/web-antd/src/views/doctor/doctor-reception/components/DoctorCreatedPatientModal.vue
index b3e16661..d8639ed9 100644
--- a/apps/web-antd/src/views/doctor/doctor-reception/components/DoctorCreatedPatientModal.vue
+++ b/apps/web-antd/src/views/doctor/doctor-reception/components/DoctorCreatedPatientModal.vue
@@ -1,37 +1,54 @@
 <script lang="ts" setup>
 /**
- * 医生创建就诊人记录：搜索 + 分页列表 + 选择接诊
+ * 医生创建就诊人记录：搜索 + 分页列表 + 收货摘要/复制/编辑 + 选择接诊
  * 未支付时回调父页打开认领码；已可接诊时回调父页选中挂号
  */
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Button, Empty, Input, message, Pagination, Spin, Table, Tag } from 'ant-design-vue';
+import {
+  Button,
+  Empty,
+  Input,
+  message,
+  Pagination,
+  Spin,
+  Table,
+  Tag,
+} from 'ant-design-vue';
 
+import {
+  copyShipAddressText,
+  formatShipAddressCopyText,
+} from '#/util/ship-address-copy';
 import {
   getDoctorCreatedUserPatientListApi,
   startOfflineReceptionByPatientApi,
 } from '#/views/doctor/doctor-reception/api';
 
+import EditCreatedUserPatientModal from './EditCreatedUserPatientModal.vue';
+
 export type DoctorCreatedPatientStartResult = {
-  user_patient_id: number;
-  register_id: number;
-  is_pay: number;
-  status: number;
   action: 'claim_qrcode' | 'proxy_pay' | 'reception';
+  is_pay: number;
   price: string;
+  register_id: number;
+  status: number;
+  user_patient_id: number;
 };
 
 type ListItem = {
-  id: number;
-  name: string;
-  mobile?: string;
-  sex?: number;
   age?: number;
   created_at?: string;
+  edit_mode?: 'full' | 'limited';
+  id: number;
   is_claimed: number;
   latest_register_status: number;
+  mobile?: string;
+  name: string;
+  sex?: number;
+  ship_address?: Record<string, string>;
 };
 
 const loading = ref(false);
@@ -42,19 +59,24 @@ const pageSize = ref(10);
 const total = ref(0);
 const list = ref<ListItem[]>([]);
 const onStartCb = ref<
-  null | ((res: DoctorCreatedPatientStartResult) => void | Promise<void>)
+  ((res: DoctorCreatedPatientStartResult) => Promise<void> | void) | null
 >(null);
 
 const columns = [
-  { title: '姓名', dataIndex: 'name', key: 'name', width: 100 },
-  { title: '手机', dataIndex: 'mobile', key: 'mobile', width: 120 },
-  { title: '年龄', dataIndex: 'age', key: 'age', width: 60 },
-  { title: '认领', key: 'is_claimed', width: 80 },
-  { title: '最近挂号', key: 'register_status', width: 100 },
-  { title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 160 },
-  { title: '操作', key: 'action', width: 90, fixed: 'right' as const },
+  { title: '姓名', dataIndex: 'name', key: 'name', width: 90 },
+  { title: '手机', dataIndex: 'mobile', key: 'mobile', width: 110 },
+  { title: '年龄', dataIndex: 'age', key: 'age', width: 50 },
+  { title: '收货地址', key: 'ship', width: 220 },
+  { title: '认领', key: 'is_claimed', width: 70 },
+  { title: '最近挂号', key: 'register_status', width: 90 },
+  { title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 150 },
+  { title: '操作', key: 'action', width: 150, fixed: 'right' as const },
 ];
 
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: EditCreatedUserPatientModal,
+});
+
 /**
  * 挂号状态文案（与 RegisterStatusEnum 对齐）
  */
@@ -70,6 +92,35 @@ function registerStatusText(status: number): string {
   return map[status] || '—';
 }
 
+/** 收货摘要一行文案 */
+function shipSummary(row: ListItem): string {
+  const ship = row.ship_address || {};
+  const region =
+    String(ship.region || '').trim() ||
+    [ship.province, ship.city, ship.area].filter(Boolean).join('');
+  const detail = String(ship.detail_address || '').trim();
+  const place = region + detail;
+  if (!place && !ship.name && !ship.mobile) return '未填写';
+  return [ship.name || '', ship.mobile || '', place].filter(Boolean).join(' ');
+}
+
+/** 一键复制收货信息 */
+function copyShip(row: ListItem) {
+  void copyShipAddressText(formatShipAddressCopyText(row.ship_address || {}));
+}
+
+/** 打开编辑弹窗；保存后刷新列表 */
+function openEdit(row: ListItem) {
+  if (!row?.id) return;
+  editModalApi.setData({
+    user_patient_id: row.id,
+    onSaved: () => {
+      void fetchList();
+    },
+  });
+  editModalApi.open();
+}
+
 /**
  * 拉取医生创建记录列表
  */
@@ -83,8 +134,8 @@ async function fetchList() {
     });
     list.value = Array.isArray(res?.items) ? res.items : [];
     total.value = Number(res?.total || 0);
-  } catch (e: any) {
-    message.error(e?.message || '加载创建记录失败');
+  } catch (error: any) {
+    message.error(error?.message || '加载创建记录失败');
   } finally {
     loading.value = false;
   }
@@ -115,8 +166,8 @@ async function handleStart(row: ListItem) {
     message.success('操作成功');
     modalApi.close();
     await onStartCb.value?.(res as DoctorCreatedPatientStartResult);
-  } catch (e: any) {
-    message.error(e?.message || '接诊失败');
+  } catch (error: any) {
+    message.error(error?.message || '接诊失败');
   } finally {
     startingId.value = 0;
   }
@@ -133,7 +184,7 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) return;
     const data = modalApi.getData() as {
-      onStart?: (res: DoctorCreatedPatientStartResult) => void | Promise<void>;
+      onStart?: (res: DoctorCreatedPatientStartResult) => Promise<void> | void;
     };
     onStartCb.value = data?.onStart || null;
     keyword.value = '';
@@ -144,7 +195,8 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-[860px]" title="医生创建记录">
+  <Modal class="w-[980px]" title="医生创建记录">
+    <EditModal />
     <div class="mb-3 flex gap-2">
       <Input
         v-model:value="keyword"
@@ -162,10 +214,26 @@ const [Modal, modalApi] = useVbenModal({
         :pagination="false"
         row-key="id"
         size="small"
-        :scroll="{ x: 720 }"
+        :scroll="{ x: 920 }"
       >
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'is_claimed'">
+          <template v-if="column.key === 'ship'">
+            <div class="flex items-start gap-1">
+              <span class="line-clamp-2 text-xs text-[hsl(var(--foreground))]">
+                {{ shipSummary(record) }}
+              </span>
+              <Button
+                v-if="shipSummary(record) !== '未填写'"
+                type="link"
+                size="small"
+                class="shrink-0 px-0"
+                @click="copyShip(record)"
+              >
+                复制
+              </Button>
+            </div>
+          </template>
+          <template v-else-if="column.key === 'is_claimed'">
             <Tag :color="record.is_claimed ? 'success' : 'warning'">
               {{ record.is_claimed ? '已认领' : '未认领' }}
             </Tag>
@@ -174,6 +242,9 @@ const [Modal, modalApi] = useVbenModal({
             {{ registerStatusText(record.latest_register_status) }}
           </template>
           <template v-else-if="column.key === 'action'">
+            <Button type="link" size="small" @click="openEdit(record)">
+编辑
+</Button>
             <Button
               type="link"
               size="small"
diff --git a/apps/web-antd/src/views/doctor/doctor-reception/components/EditCreatedUserPatientModal.vue b/apps/web-antd/src/views/doctor/doctor-reception/components/EditCreatedUserPatientModal.vue
new file mode 100644
index 00000000..04a2e81e
--- /dev/null
+++ b/apps/web-antd/src/views/doctor/doctor-reception/components/EditCreatedUserPatientModal.vue
@@ -0,0 +1,528 @@
+<script lang="ts" setup>
+import type { AddressRecognizeResult } from '#/components/address-paste-block/AddressPasteBlock.vue';
+import type { AddressValue } from '#/util/address-index';
+
+/**
+ * 编辑医生创建就诊人：左右分栏对齐新建弹窗（左收货、右基础）；按 edit_mode 锁定基础区
+ */
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import {
+  Button,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  message,
+  Radio,
+  RadioGroup,
+  Row,
+} from 'ant-design-vue';
+
+import AddressPasteBlock from '#/components/address-paste-block/AddressPasteBlock.vue';
+import RegionAddressPicker from '#/components/form/components/region-address-picker.vue';
+import {
+  ensureResolvedAddress,
+  formatAddressDisplay,
+  resolveAddressPairFromNames,
+} from '#/util/address-index';
+import {
+  copyShipAddressText,
+  formatShipAddressCopyText,
+} from '#/util/ship-address-copy';
+import {
+  getCreatedUserPatientDetailApi,
+  getCurrentStoreTypeApi,
+  updateCreatedUserPatientApi,
+} from '#/views/doctor/doctor-reception/api';
+
+/** 当前诊所地址（get-current-store-type.store_address） */
+type ClinicAddress = {
+  available: boolean;
+  city: string;
+  city_id: number;
+  contact: string;
+  mobile: string;
+  path_label: string;
+  position: string;
+  province: string;
+  province_id: number;
+  store_name: string;
+};
+
+const saving = ref(false);
+const editMode = ref<'full' | 'limited'>('full');
+const userPatientId = ref(0);
+const clinicAddress = ref<ClinicAddress | null>(null);
+const form = ref({
+  name: '',
+  mobile: '',
+  id_card: '',
+  birthday: '',
+  sex: 1,
+  age: undefined as number | undefined,
+  ship_region: undefined as AddressValue | undefined,
+  ship_detail_address: '',
+  ship_name: '',
+  ship_mobile: '',
+});
+
+const pasteCurrentValues = computed(() => ({
+  name: String(form.value.ship_name || '').trim(),
+  phone: String(form.value.ship_mobile || '').trim(),
+  region: form.value.ship_region
+    ? formatAddressDisplay(form.value.ship_region) || '已选省市区'
+    : '',
+  detail: String(form.value.ship_detail_address || '').trim(),
+}));
+
+const pasteFilled = computed(() => ({
+  name: !!pasteCurrentValues.value.name,
+  phone: !!pasteCurrentValues.value.phone,
+  region: !!pasteCurrentValues.value.region,
+  detail: !!pasteCurrentValues.value.detail,
+}));
+
+const shipCopyText = computed(() =>
+  formatShipAddressCopyText({
+    name: form.value.ship_name || form.value.name,
+    mobile: form.value.ship_mobile || form.value.mobile,
+    region: pasteCurrentValues.value.region,
+    detail_address: form.value.ship_detail_address,
+  }),
+);
+
+/** 诊所地址展示文案 */
+const clinicAddressText = computed(() => {
+  const a = clinicAddress.value;
+  if (!a?.available) return '';
+  return `${a.path_label || ''}${a.position || ''}`;
+});
+
+const onSavedCb = ref<(() => void) | null>(null);
+
+/**
+ * 一键填入诊所地址（省市区 ID + 详细地址；收件人优先诊所联系人）
+ */
+async function applyClinicAddress() {
+  const a = clinicAddress.value;
+  if (!a?.available) {
+    message.warning('当前诊所未配置完整地址');
+    return;
+  }
+  form.value.ship_region = [a.province_id, a.city_id];
+  form.value.ship_detail_address = a.position;
+  await ensureResolvedAddress(form.value.ship_region);
+  if (a.contact) {
+    form.value.ship_name = a.contact.slice(0, 10);
+  } else if (!form.value.ship_name && form.value.name) {
+    form.value.ship_name = form.value.name.slice(0, 10);
+  }
+  if (a.mobile) {
+    form.value.ship_mobile = a.mobile;
+  } else if (!form.value.ship_mobile && form.value.mobile) {
+    form.value.ship_mobile = form.value.mobile;
+  }
+  message.success('已填入诊所地址');
+}
+
+/** 打开时拉取诊所地址，供左侧一键填入 */
+async function loadClinicAddress() {
+  try {
+    const res = await getCurrentStoreTypeApi();
+    clinicAddress.value = (res?.store_address || null) as ClinicAddress | null;
+  } catch {
+    clinicAddress.value = null;
+  }
+}
+
+async function loadDetail(id: number) {
+  const res = await getCreatedUserPatientDetailApi(id);
+  editMode.value = res?.edit_mode === 'limited' ? 'limited' : 'full';
+  form.value.name = res?.name || '';
+  form.value.mobile = res?.mobile || '';
+  form.value.id_card = res?.id_card || '';
+  form.value.birthday = res?.birthday || '';
+  form.value.sex = Number(res?.sex || 1);
+  form.value.age = res?.age ? Number(res.age) : undefined;
+  const ship = res?.ship_address || {};
+  form.value.ship_name = ship.name || '';
+  form.value.ship_mobile = ship.mobile || '';
+  form.value.ship_detail_address = ship.detail_address || '';
+  if (ship.province || ship.city || ship.area) {
+    const pair = await resolveAddressPairFromNames(
+      ship.province,
+      ship.city,
+      ship.area,
+    );
+    if (pair) {
+      form.value.ship_region = pair;
+      await ensureResolvedAddress(pair);
+    }
+  } else {
+    form.value.ship_region = undefined;
+  }
+}
+
+async function onAddressRecognized(result: AddressRecognizeResult) {
+  if (!result) return;
+  if (result.name) form.value.ship_name = String(result.name).slice(0, 10);
+  if (result.phone) form.value.ship_mobile = result.phone;
+  if (result.detail) form.value.ship_detail_address = result.detail;
+  if (result.province || result.city || result.area) {
+    const pair = await resolveAddressPairFromNames(
+      result.province,
+      result.city,
+      result.area,
+    );
+    if (pair) {
+      form.value.ship_region = pair;
+      await ensureResolvedAddress(pair);
+    }
+  }
+}
+
+async function buildPayload() {
+  const payload: Record<string, any> = {
+    user_patient_id: userPatientId.value,
+    mobile: form.value.mobile,
+    ship_name: form.value.ship_name,
+    ship_mobile: form.value.ship_mobile,
+    ship_detail_address: form.value.ship_detail_address,
+  };
+  if (form.value.ship_region?.length) {
+    const resolved = await ensureResolvedAddress(form.value.ship_region);
+    payload.ship_province = resolved.province?.label || '';
+    payload.ship_city = resolved.city?.label || '';
+    payload.ship_area = resolved.district?.label || '';
+    payload.ship_region =
+      resolved.pathLabel || formatAddressDisplay(form.value.ship_region);
+  }
+  if (editMode.value === 'full') {
+    payload.name = form.value.name;
+    payload.id_card = form.value.id_card;
+    payload.birthday = form.value.birthday;
+    payload.sex = form.value.sex;
+    payload.age = form.value.age;
+  }
+  return payload;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  confirmText: '保存',
+  contentClass: 'max-h-[75vh] overflow-hidden cup-edit-modal-content',
+  async onConfirm() {
+    if (!/^\d{11}$/.test(String(form.value.mobile || ''))) {
+      message.warning('请填写正确手机号');
+      return;
+    }
+    if (editMode.value === 'full') {
+      if (!String(form.value.name || '').trim()) {
+        message.warning('请填写姓名');
+        return;
+      }
+      if (!form.value.id_card && !form.value.birthday) {
+        message.warning('请填写身份证或生日');
+        return;
+      }
+    }
+    modalApi.setState({ confirmLoading: true });
+    saving.value = true;
+    try {
+      await updateCreatedUserPatientApi(await buildPayload());
+      message.success('保存成功');
+      onSavedCb.value?.();
+      modalApi.close();
+    } catch (error: any) {
+      message.error(error?.message || '保存失败');
+    } finally {
+      saving.value = false;
+      modalApi.setState({ confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData() as {
+      onSaved?: () => void;
+      user_patient_id?: number;
+    };
+    onSavedCb.value = data?.onSaved || null;
+    userPatientId.value = Number(data?.user_patient_id || 0);
+    clinicAddress.value = null;
+    void loadClinicAddress();
+    if (userPatientId.value > 0) {
+      try {
+        await loadDetail(userPatientId.value);
+      } catch (error: any) {
+        message.error(error?.message || '加载失败');
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[1120px] max-w-[95vw]" title="编辑就诊人">
+    <Form layout="vertical" class="edit-user-patient-form">
+      <div class="cup-layout">
+        <!-- 左：收货地址（与新建弹窗同栏） -->
+        <aside class="cup-address-col">
+          <div class="cup-section-head">
+            <span class="cup-section-title">收货地址</span>
+            <span class="cup-section-sub">开方默认使用</span>
+          </div>
+          <div v-if="clinicAddress?.available" class="clinic-hint">
+            <div class="clinic-hint-text">
+              诊所地址：{{ clinicAddressText }}
+            </div>
+            <Button
+              type="link"
+              size="small"
+              class="clinic-hint-btn"
+              @click="applyClinicAddress"
+            >
+              使用诊所地址
+            </Button>
+          </div>
+          <div v-else class="clinic-hint muted">
+            未配置可用诊所地址时，可粘贴识别或手填
+          </div>
+          <div
+            class="mb-2 flex items-start justify-between gap-2 rounded border border-[hsl(var(--primary)/30%)] bg-[hsl(var(--primary)/0.08)] p-2"
+          >
+            <div class="break-all text-xs text-[hsl(var(--foreground))]">
+              {{ shipCopyText || '暂无收货地址' }}
+            </div>
+            <Button
+              type="link"
+              size="small"
+              class="shrink-0 px-0"
+              @click="copyShipAddressText(shipCopyText)"
+            >
+              复制
+            </Button>
+          </div>
+          <AddressPasteBlock
+            :filled="pasteFilled"
+            :current-values="pasteCurrentValues"
+            @recognized="onAddressRecognized"
+          />
+          <FormItem label="省市区">
+            <RegionAddressPicker v-model:value="form.ship_region" />
+          </FormItem>
+          <FormItem label="详细地址">
+            <Input
+              v-model:value="form.ship_detail_address"
+              placeholder="街道门牌等"
+            />
+          </FormItem>
+          <FormItem label="收件人">
+            <Input
+              v-model:value="form.ship_name"
+              :maxlength="10"
+              show-count
+              :placeholder="form.name ? `默认：${form.name}` : '收件人姓名'"
+            />
+          </FormItem>
+          <FormItem label="收件手机">
+            <Input
+              v-model:value="form.ship_mobile"
+              maxlength="11"
+              :placeholder="form.mobile ? `默认：${form.mobile}` : '收件手机'"
+            />
+          </FormItem>
+        </aside>
+        <!-- 右：基础信息 -->
+        <div class="cup-main-col">
+          <div
+            v-if="editMode === 'limited'"
+            class="mb-3 rounded border border-[hsl(var(--warning)/30%)] bg-[hsl(var(--warning)/0.1)] px-3 py-2 text-sm text-[hsl(var(--foreground))]"
+          >
+            该就诊人已接诊过，仅可修改手机号与收货信息
+          </div>
+          <div class="mb-3 text-sm font-medium text-[hsl(var(--foreground))]">
+            基础信息
+          </div>
+          <Row :gutter="12">
+            <Col :span="12">
+              <FormItem label="姓名" required>
+                <Input
+                  v-model:value="form.name"
+                  :disabled="editMode === 'limited'"
+                  placeholder="真实姓名"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="手机号" required>
+                <Input
+                  v-model:value="form.mobile"
+                  maxlength="11"
+                  placeholder="11位手机号"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="身份证号">
+                <Input
+                  v-model:value="form.id_card"
+                  :disabled="editMode === 'limited'"
+                  maxlength="18"
+                  placeholder="选填"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="生日">
+                <Input
+                  v-model:value="form.birthday"
+                  :disabled="editMode === 'limited'"
+                  placeholder="YYYY-MM-DD"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="性别">
+                <RadioGroup
+                  v-model:value="form.sex"
+                  :disabled="editMode === 'limited'"
+                >
+                  <Radio :value="1">男</Radio>
+                  <Radio :value="2">女</Radio>
+                </RadioGroup>
+              </FormItem>
+            </Col>
+            <Col :span="12">
+              <FormItem label="年龄">
+                <InputNumber
+                  v-model:value="form.age"
+                  :disabled="editMode === 'limited'"
+                  :min="1"
+                  :max="200"
+                  class="w-full"
+                />
+              </FormItem>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    </Form>
+  </Modal>
+</template>
+
+<style scoped>
+/* 与新建就诊人弹窗同套左右分栏，左右各自滚动 */
+.edit-user-patient-form {
+  display: flex;
+  flex-direction: column;
+  height: min(70vh, 640px);
+  min-height: 360px;
+}
+
+.cup-layout {
+  display: flex;
+  flex: 1;
+  gap: 20px;
+  align-items: stretch;
+  height: 100%;
+  min-height: 0;
+}
+
+.cup-address-col {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 380px;
+  padding: 12px;
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  background: hsl(var(--muted) / 20%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.cup-main-col {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  padding-right: 4px;
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+}
+
+.cup-section-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 10px;
+}
+
+.cup-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.cup-section-sub {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.clinic-hint {
+  display: flex;
+  gap: 4px;
+  align-items: flex-start;
+  padding: 8px 10px;
+  margin-bottom: 10px;
+  font-size: 12px;
+  color: hsl(var(--foreground));
+  background: hsl(var(--primary) / 6%);
+  border: 1px solid hsl(var(--primary) / 25%);
+  border-radius: 6px;
+}
+
+.clinic-hint.muted {
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--card, var(--background)));
+  border-color: hsl(var(--border));
+}
+
+.clinic-hint-text {
+  flex: 1;
+  line-height: 1.45;
+  word-break: break-all;
+}
+
+.clinic-hint-btn {
+  flex-shrink: 0;
+  height: auto;
+  padding: 0;
+}
+
+@media (max-width: 900px) {
+  .edit-user-patient-form {
+    height: auto;
+    min-height: 0;
+    max-height: 70vh;
+  }
+
+  .cup-layout {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .cup-address-col {
+    width: 100%;
+    max-height: 40vh;
+  }
+
+  .cup-main-col {
+    max-height: 50vh;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/doctor/doctor-reception/components/ImageOcrDrawer.vue b/apps/web-antd/src/views/doctor/doctor-reception/components/ImageOcrDrawer.vue
index a3fd194b..21b6512a 100644
--- a/apps/web-antd/src/views/doctor/doctor-reception/components/ImageOcrDrawer.vue
+++ b/apps/web-antd/src/views/doctor/doctor-reception/components/ImageOcrDrawer.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ChineseDrugBubbleItem } from '#/components/chinese-drug-name-bubble';
+
 /**
  * 接诊/传方共用：上传处方图 → DeepSeek OCR → 药库对照 → 确认导入
  * mode=reception 回填医嘱/诊断/药品/数量；transfer 由父页处理患者确认
@@ -7,51 +9,53 @@
 import { computed, ref, watch } from 'vue';
 
 import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
-import {
-  Button,
-  Input,
-  InputNumber,
-  Select,
-  Tag,
-  Upload,
-  message,
-} from 'ant-design-vue';
+import { preferences } from '@vben/preferences';
+
 import {
   CloudUploadOutlined,
   DeleteOutlined,
   SnippetsOutlined,
   StopOutlined,
 } from '@ant-design/icons-vue';
+import {
+  Button,
+  Input,
+  InputNumber,
+  message,
+  Select,
+  Tag,
+  Upload,
+} from 'ant-design-vue';
 
 import { uploadFile } from '#/api/core/upload';
+import { ChineseDrugNameBubble } from '#/components/chinese-drug-name-bubble';
+import OcrImageLoading from '#/components/loading/OcrImageLoading.vue';
+import { OcrOriginImagePanel } from '#/components/ocr-origin-image-panel';
 import { uploadToOss } from '#/utils/oss-upload';
 import { usePasteUploadListen } from '#/utils/use-paste-upload-listen';
-import { preferences } from '@vben/preferences';
-import OcrImageLoading from '#/components/loading/OcrImageLoading.vue';
 import ConsigneeModalComp from '#/views/doctor/image-transfer-prescription/components/ConsigneeModal.vue';
-import { OcrOriginImagePanel } from '#/components/ocr-origin-image-panel';
+
 import {
-  ChineseDrugNameBubble,
-  type ChineseDrugBubbleItem,
-} from '#/components/chinese-drug-name-bubble';
-import {
-  ocrPrescriptionImageApi,
-  aiListGenerationsApi,
   aiGenerationDetailApi,
+  aiListGenerationsApi,
   getDrugUseList,
+  ocrPrescriptionImageApi,
 } from '../api';
 
 defineOptions({ name: 'ImageOcrDrawer' });
 
 const emit = defineEmits<{
-  (e: 'import', payload: {
-    medical_advice: string;
-    clinical_diagnose: string;
-    rows: any[];
-    dosage?: number;
-    day_dosage?: number;
-    unmatched: any[];
-  }): void;
+  (
+    e: 'import',
+    payload: {
+      clinical_diagnose: string;
+      day_dosage?: number;
+      dosage?: number;
+      medical_advice: string;
+      rows: any[];
+      unmatched: any[];
+    },
+  ): void;
   (e: 'search-drug', keyword: string): void;
   (e: 'confirm-transfer', payload: Record<string, any>): void;
 }>();
@@ -185,9 +189,9 @@ async function loadHistory() {
       limit: 30,
     });
     historyList.value = Array.isArray(list) ? list : [];
-  } catch (e: any) {
+  } catch (error: any) {
     historyList.value = [];
-    console.error(e);
+    console.error(error);
   } finally {
     histLoading.value = false;
   }
@@ -197,32 +201,37 @@ async function loadHistory() {
  * 把 OCR 接口/历史详情统一灌进表单与对照列表
  */
 function applyOcrPayload(data: {
-  ocr?: any;
-  match?: any;
-  patient_match?: any;
-  medical_advice?: string;
   clinical_diagnose?: string;
-  dosage?: number;
   day_dosage?: number;
-  image_urls?: string[];
+  dosage?: number;
   generation_id?: number;
+  image_urls?: string[];
+  match?: any;
+  medical_advice?: string;
+  ocr?: any;
+  patient_match?: any;
 }) {
   const ocr = data.ocr || {};
-  medicalAdvice.value = String(
-    data.medical_advice || ocr.medical_advice || '',
-  );
+  medicalAdvice.value = String(data.medical_advice || ocr.medical_advice || '');
   clinicalDiagnose.value = String(
     data.clinical_diagnose || ocr.clinical_diagnose || '',
   );
-  dosage.value = Number(data.dosage || ocr.dosage || 0) > 0
-    ? Number(data.dosage || ocr.dosage)
-    : 7;
-  dayDosage.value = Number(data.day_dosage || ocr.day_dosage || 0) > 0
-    ? Number(data.day_dosage || ocr.day_dosage)
-    : 2;
-  statedDrugCount.value = Number(data.stated_drug_count || ocr.stated_drug_count || 0);
-  dosageFromDays.value = Number(data.dosage_from_days || ocr.dosage_from_days || 0) === 1;
-  processRuleId.value = Number(data.process_rule_id || ocr.process_rule_id || 0);
+  dosage.value =
+    Number(data.dosage || ocr.dosage || 0) > 0
+      ? Number(data.dosage || ocr.dosage)
+      : 7;
+  dayDosage.value =
+    Number(data.day_dosage || ocr.day_dosage || 0) > 0
+      ? Number(data.day_dosage || ocr.day_dosage)
+      : 2;
+  statedDrugCount.value = Number(
+    data.stated_drug_count || ocr.stated_drug_count || 0,
+  );
+  dosageFromDays.value =
+    Number(data.dosage_from_days || ocr.dosage_from_days || 0) === 1;
+  processRuleId.value = Number(
+    data.process_rule_id || ocr.process_rule_id || 0,
+  );
   childProcessRuleId.value = Number(
     data.child_process_rule_id || ocr.child_process_rule_id || 0,
   );
@@ -233,13 +242,17 @@ function applyOcrPayload(data: {
     data.process_rule_label || ocr.process_rule_label || '',
   );
   boilText.value = String(data.boil_text || ocr.boil_text || '');
-  if (Array.isArray(data.image_urls) && data.image_urls.length) {
+  if (Array.isArray(data.image_urls) && data.image_urls.length > 0) {
     imageUrls.value = data.image_urls.map(String);
   }
   if (isTransfer.value) {
     patientName.value = String(ocr.patient_name || patientName.value || '');
-    patientMobile.value = String(ocr.patient_mobile || patientMobile.value || '');
-    patientAddress.value = String(ocr.patient_address || patientAddress.value || '');
+    patientMobile.value = String(
+      ocr.patient_mobile || patientMobile.value || '',
+    );
+    patientAddress.value = String(
+      ocr.patient_address || patientAddress.value || '',
+    );
     patientSex.value = Number(ocr.sex || patientSex.value || 0);
     patientAge.value = Number(ocr.age || patientAge.value || 0);
     fromConsignee.value = {
@@ -261,7 +274,9 @@ function applyOcrPayload(data: {
   matchedList.value = (Array.isArray(match.matched) ? match.matched : []).map(
     (m: any) => ({
       ...m,
-      selected_drug_id: Number(m.selected_drug_id || m.candidates?.[0]?.drug_id || 0),
+      selected_drug_id: Number(
+        m.selected_drug_id || m.candidates?.[0]?.drug_id || 0,
+      ),
       _import: true,
     }),
   );
@@ -288,8 +303,8 @@ async function onSelectHistory(row: any) {
     historyList.value = historyList.value.map((r) =>
       Number(r.id) === id ? { ...r, is_read: 1 } : r,
     );
-  } catch (e: any) {
-    message.error(e?.message || '加载历史失败');
+  } catch (error: any) {
+    message.error(error?.message || '加载历史失败');
   } finally {
     histDetailLoading.value = false;
   }
@@ -308,14 +323,14 @@ async function rerunHistory(row: any) {
     const urls = Array.isArray(detail?.image_urls)
       ? detail.image_urls.map(String).filter(Boolean)
       : [];
-    if (!urls.length) {
+    if (urls.length === 0) {
       message.warning('这条记录没有原图，无法重新识别');
       return;
     }
     imageUrls.value = urls;
     runOcr();
-  } catch (e: any) {
-    message.error(e?.message || '重新识别失败');
+  } catch (error: any) {
+    message.error(error?.message || '重新识别失败');
   } finally {
     histDetailLoading.value = false;
   }
@@ -384,8 +399,8 @@ async function uploadFiles(files: File[]) {
       }
       imageUrls.value = [...imageUrls.value, url];
     }
-  } catch (e: any) {
-    message.error(e?.message || '上传失败');
+  } catch (error: any) {
+    message.error(error?.message || '上传失败');
   } finally {
     uploading.value = false;
   }
@@ -438,7 +453,7 @@ const [ConsigneeFormModal, consigneeModalApi] = useVbenModal({
  * 点「开始识别」：传方先弹收货人粘贴框（可跳过）；接诊开方没有患者字段，直接识别
  */
 function runOcr() {
-  if (!imageUrls.value.length) {
+  if (imageUrls.value.length === 0) {
     message.warning('请先上传处方图片');
     return;
   }
@@ -472,7 +487,9 @@ async function requestOcr() {
       mode: mode.value,
       register_id: registerId.value || undefined,
       store_id: storeId.value || undefined,
-      consignee_text: isTransfer.value ? consigneeText.value || undefined : undefined,
+      consignee_text: isTransfer.value
+        ? consigneeText.value || undefined
+        : undefined,
     });
     if (!res?.ok) {
       message.error(res?.message || '识图失败');
@@ -487,12 +504,10 @@ async function requestOcr() {
     await loadHistory();
     const unN = unmatchedList.value.length;
     message.success(
-      unN > 0
-        ? `识别完成；${unN} 味未匹配，可手动搜索`
-        : '识别完成',
+      unN > 0 ? `识别完成；${unN} 味未匹配，可手动搜索` : '识别完成',
     );
-  } catch (e: any) {
-    message.error(e?.message || '识图失败');
+  } catch (error: any) {
+    message.error(error?.message || '识图失败');
   } finally {
     loading.value = false;
   }
@@ -505,11 +520,7 @@ async function requestOcr() {
 function resolveProductDrugName(row: any): string {
   if (!row || typeof row !== 'object') return '';
   return String(
-    row.drug?.drug_name ||
-      row.matched_alias ||
-      row.drug_name ||
-      row.name ||
-      '',
+    row.drug?.drug_name || row.matched_alias || row.drug_name || row.name || '',
   ).trim();
 }
 
@@ -613,11 +624,12 @@ function processFields() {
  * 失败时仍传 way_id:0，后端可按 usage 再解析
  */
 async function ensureDrugUseWayList() {
-  if (Array.isArray(drugUseWayList.value) && drugUseWayList.value.length) return;
+  if (Array.isArray(drugUseWayList.value) && drugUseWayList.value.length > 0)
+    return;
   try {
     const res = await getDrugUseList();
     const list = (res && res.drug_use_way) || [];
-    if (Array.isArray(list) && list.length) {
+    if (Array.isArray(list) && list.length > 0) {
       drugUseWayList.value = list;
     }
   } catch {
@@ -628,7 +640,7 @@ async function ensureDrugUseWayList() {
 /**
  * usage 文案映射先煎/后下 way_id（与接诊 AI 导入、小程序一致）
  */
-function resolveWayId(usage: string | undefined | null) {
+function resolveWayId(usage: null | string | undefined) {
   const u = String(usage || '').trim();
   if (!u) return 0;
   const wayList = drugUseWayList.value || [];
@@ -641,7 +653,7 @@ function resolveWayId(usage: string | undefined | null) {
 
 async function handleConfirm() {
   const rows = buildImportRows();
-  if (!rows.length) {
+  if (rows.length === 0) {
     message.warning('请先勾选或手动选择药品');
     return;
   }
@@ -650,7 +662,11 @@ async function handleConfirm() {
       message.warning('请填写患者姓名和手机号');
       return;
     }
-    if (!patientMatched.value && (patientSex.value !== 1 && patientSex.value !== 2)) {
+    if (
+      !patientMatched.value &&
+      patientSex.value !== 1 &&
+      patientSex.value !== 2
+    ) {
       message.warning('新建就诊人请选择性别');
       return;
     }
@@ -666,8 +682,8 @@ async function handleConfirm() {
       index_id: Number(r.candidate.id || r.candidate.drug_id),
       drug_name: r.candidate.drug_name || r.ai_name,
       name: r.candidate.drug_name || r.ai_name,
-      number: parseFloat(r.dose) || 1,
-      quantity: parseFloat(r.dose) || 1,
+      number: Number.parseFloat(r.dose) || 1,
+      quantity: Number.parseFloat(r.dose) || 1,
       way_id: resolveWayId(r.usage),
       usage: r.usage || '',
       price: Number(r.candidate.price || 0),
@@ -697,7 +713,9 @@ async function handleConfirm() {
     rows,
     dosage: dosage.value,
     day_dosage: dayDosage.value,
-    unmatched: unmatchedList.value.filter((_, ui) => !unmatchedPicked.value[ui]),
+    unmatched: unmatchedList.value.filter(
+      (_, ui) => !unmatchedPicked.value[ui],
+    ),
     ...processFields(),
   });
   drawerApi.close();
@@ -752,52 +770,75 @@ defineExpose({
 
 <template>
   <Drawer>
+    <!--
+      三栏锁在抽屉可视高度内、各自滚动：
+      否则中栏原图把整行撑高后，右侧「开始识别」被顶出屏外还得整页滚
+    -->
     <div class="image-ocr-drawer flex min-h-0 gap-3 p-1">
-      <!-- 左栏：生成记录 + 上传新图 -->
+      <!-- 左栏：顶栏操作 + 可滚历史 + 底栏识别（始终可见） -->
       <div
-        class="ocr-left shrink-0 overflow-y-auto border-r border-border pr-2"
+        class="ocr-left flex shrink-0 flex-col border-r border-border pr-2"
         :class="hasCompareImages ? 'w-[168px]' : 'w-40'"
       >
-        <div class="ocr-left-sticky mb-2">
-          <div class="mb-2 text-sm font-medium text-foreground">我的生成记录</div>
-          <Button type="primary" size="small" block class="mb-2" @click="startNewUpload">
+        <div class="ocr-left-sticky mb-2 shrink-0">
+          <div class="mb-2 text-sm font-medium text-foreground">
+            我的生成记录
+          </div>
+          <Button
+            type="primary"
+            size="small"
+            block
+            class="mb-2"
+            @click="startNewUpload"
+          >
             上传新图
           </Button>
         </div>
-        <div v-if="histLoading" class="text-xs text-muted-foreground">加载中…</div>
-        <div v-else-if="!historyList.length" class="mb-3 text-xs text-muted-foreground">
-          暂无记录，上传图片后识别
+        <div class="ocr-left-scroll min-h-0 flex-1 overflow-y-auto">
+          <div v-if="histLoading" class="text-xs text-muted-foreground">
+            加载中…
+          </div>
+          <div
+            v-else-if="!historyList.length"
+            class="mb-3 text-xs text-muted-foreground"
+          >
+            暂无记录，上传图片后识别
+          </div>
+          <div
+            v-for="row in historyList"
+            :key="row.id"
+            class="mb-1 cursor-pointer rounded-md px-2 py-1.5 text-xs transition-colors hover:bg-accent"
+            :class="{
+              'bg-primary/10 ring-1 ring-primary/20':
+                activeGenerationId === Number(row.id),
+              'ocr-hist-unread': Number(row.is_read) !== 1,
+            }"
+            @click="onSelectHistory(row)"
+          >
+            <div class="truncate font-medium">
+              {{ row.name || `识图 #${row.id}` }}
+              <span
+                v-if="Number(row.is_read) !== 1"
+                class="ml-1 text-[10px] text-primary"
+                >未读</span>
+            </div>
+            <div class="mt-0.5 text-muted-foreground">
+              {{ row.item_count || 0 }}味 · {{ formatHistTime(row.created_at) }}
+            </div>
+            <button
+              type="button"
+              class="mt-1 text-primary"
+              :disabled="loading"
+              @click.stop="rerunHistory(row)"
+            >
+              重新识别
+            </button>
+          </div>
         </div>
         <div
-          v-for="row in historyList"
-          :key="row.id"
-          class="mb-1 cursor-pointer rounded-md px-2 py-1.5 text-xs transition-colors hover:bg-accent"
-          :class="{
-            'bg-primary/10 ring-1 ring-primary/20': activeGenerationId === Number(row.id),
-            'ocr-hist-unread': Number(row.is_read) !== 1,
-          }"
-          @click="onSelectHistory(row)"
+          v-if="hasCompareImages && !isResultView"
+          class="ocr-left-footer mt-2 shrink-0 border-t border-border pt-2"
         >
-          <div class="truncate font-medium">
-            {{ row.name || `识图 #${row.id}` }}
-            <span
-              v-if="Number(row.is_read) !== 1"
-              class="ml-1 text-[10px] text-primary"
-            >未读</span>
-          </div>
-          <div class="mt-0.5 text-muted-foreground">
-            {{ row.item_count || 0 }}味 · {{ formatHistTime(row.created_at) }}
-          </div>
-          <button
-            type="button"
-            class="mt-1 text-primary"
-            :disabled="loading"
-            @click.stop="rerunHistory(row)"
-          >
-            重新识别
-          </button>
-        </div>
-        <div v-if="hasCompareImages && !isResultView" class="mt-3">
           <Button
             type="primary"
             size="small"
@@ -807,10 +848,10 @@ defineExpose({
           >
             开始识别
           </Button>
-          <div class="mt-2 space-y-1">
+          <div class="mt-2 max-h-36 space-y-1 overflow-y-auto">
             <div
               v-for="(url, idx) in imageUrls"
-              :key="'t' + url + idx"
+              :key="`t${ url }${idx}`"
               class="relative"
             >
               <img :src="url" :alt="`图${idx + 1}`" class="ocr-mini-thumb" />
@@ -828,212 +869,282 @@ defineExpose({
         </div>
       </div>
 
-      <!-- 中栏：原图对照模块（展开动画，避免突然插入断层） -->
+      <!-- 中栏：原图对照（高度吃满父级，内部自己滚/缩放，不撑高整抽屉） -->
       <Transition name="ocr-origin-appear">
         <div
           v-if="hasCompareImages"
-          class="ocr-origin-col flex w-[520px] max-w-[38vw] shrink-0 flex-col"
+          class="ocr-origin-col flex h-full min-h-0 w-[520px] max-w-[38vw] shrink-0 flex-col"
         >
-          <OcrOriginImagePanel :urls="imageUrls" title="处方原图" class="min-h-[480px] flex-1" />
+          <OcrOriginImagePanel
+            :urls="imageUrls"
+            title="处方原图"
+            class="h-full min-h-0 flex-1"
+          />
         </div>
       </Transition>
 
-      <!-- 右栏：上传 / 识别结果（保底宽度，避免被中栏挤窄） -->
-      <div class="min-w-[420px] flex-1 space-y-3 overflow-y-auto">
-      <OcrImageLoading v-if="loading" title="AI 处方识别" />
-      <div v-else-if="histDetailLoading" class="py-8">
-        <OcrImageLoading title="加载识图记录" />
-      </div>
-      <template v-else>
-      <div class="flex flex-wrap items-center justify-between gap-2">
-        <div class="text-xs text-muted-foreground">
-          <template v-if="isResultView">
-            中间原图可拖拽/缩放对照，右侧核对药品；可点「重新上传识别」换图。
-          </template>
+      <!-- 右栏：内容区可滚，上传态操作条钉在底部不随内容滚走 -->
+      <div class="ocr-right flex min-h-0 min-w-[420px] flex-1 flex-col">
+        <div class="ocr-right-scroll min-h-0 flex-1 space-y-3 overflow-y-auto">
+          <OcrImageLoading v-if="loading" title="AI 处方识别" />
+          <div v-else-if="histDetailLoading" class="py-8">
+            <OcrImageLoading title="加载识图记录" />
+          </div>
           <template v-else>
-            仅支持中药处方图。拖拽/点击/粘贴上传；未匹配药可按药名、拼音搜库。
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <div class="text-xs text-muted-foreground">
+                <template v-if="isResultView">
+                  中间原图可拖拽/缩放对照，右侧核对药品；可点「重新上传识别」换图。
+                </template>
+                <template v-else>
+                  仅支持中药处方图。拖拽/点击/粘贴上传；未匹配药可按药名、拼音搜库。
+                </template>
+              </div>
+              <Button
+                v-if="isResultView"
+                size="small"
+                @click="backToUploadMode"
+              >
+                重新上传识别
+              </Button>
+            </div>
+
+            <template v-if="showUploadPanel">
+              <UploadDragger
+                class="ocr-dragger"
+                :class="{ 'ocr-dragger--compact': imageUrls.length > 0 }"
+                accept="image/*"
+                :multiple="true"
+                :disabled="uploading || imageUrls.length >= 6"
+                :show-upload-list="false"
+                :before-upload="beforeUpload"
+              >
+                <div class="ocr-dragger-inner">
+                  <CloudUploadOutlined class="ocr-dragger-icon" />
+                  <div class="text-sm font-medium text-foreground">
+                    拖拽处方图到此处，或点击选择
+                  </div>
+                  <div class="mt-1 text-xs text-muted-foreground">
+                    最多 6 张；也可 Ctrl+V 粘贴截图
+                    <span v-if="listening" class="ml-1 text-warning">（粘贴监听中）</span>
+                  </div>
+                </div>
+              </UploadDragger>
+            </template>
+
+            <template v-if="isResultView">
+              <template v-if="isTransfer">
+                <div class="grid grid-cols-2 gap-2">
+                  <div>
+                    <div class="mb-1 text-xs text-muted-foreground">姓名</div>
+                    <Input v-model:value="patientName" placeholder="患者姓名" />
+                    <div v-if="fromConsignee.name" class="consignee-hint">
+                      处方未写姓名，来自收货人信息
+                    </div>
+                  </div>
+                  <div>
+                    <div class="mb-1 text-xs text-muted-foreground">手机号</div>
+                    <Input v-model:value="patientMobile" placeholder="手机号" />
+                    <div v-if="fromConsignee.mobile" class="consignee-hint">
+                      处方未写手机号，来自收货人信息
+                    </div>
+                  </div>
+                  <div>
+                    <div class="mb-1 text-xs text-muted-foreground">性别</div>
+                    <Select
+                      v-model:value="patientSex"
+                      class="w-full"
+                      :options="[
+                        { label: '未知', value: 0 },
+                        { label: '男', value: 1 },
+                        { label: '女', value: 2 },
+                      ]"
+                    />
+                  </div>
+                  <div>
+                    <div class="mb-1 text-xs text-muted-foreground">年龄</div>
+                    <InputNumber
+                      v-model:value="patientAge"
+                      class="w-full"
+                      :min="1"
+                      :max="200"
+                    />
+                  </div>
+                  <div class="col-span-2">
+                    <div class="mb-1 text-xs text-muted-foreground">地址</div>
+                    <Input
+                      v-model:value="patientAddress"
+                      placeholder="收货地址（可后补）"
+                    />
+                    <div v-if="fromConsignee.address" class="consignee-hint">
+                      处方未写地址，来自收货人信息
+                    </div>
+                  </div>
+                  <div
+                    class="col-span-2 text-xs"
+                    :class="patientMatched ? 'text-primary' : 'text-warning'"
+                  >
+                    {{
+                      patientMatched
+                        ? '已匹配到已有就诊人'
+                        : '未匹配，确认后将新建就诊人'
+                    }}
+                  </div>
+                </div>
+              </template>
+
+              <div>
+                <div class="mb-1 text-xs text-muted-foreground">诊断</div>
+                <Input
+                  v-model:value="clinicalDiagnose"
+                  placeholder="临床诊断（识图有则自动填入）"
+                />
+              </div>
+              <div>
+                <div class="mb-1 text-xs text-muted-foreground">医嘱</div>
+                <Input.TextArea
+                  v-model:value="medicalAdvice"
+                  :rows="2"
+                  placeholder="医嘱（识图结果可改）"
+                />
+              </div>
+              <div v-if="herbStatText" class="text-sm text-foreground">
+                {{ herbStatText }}
+              </div>
+              <div
+                v-if="processRuleLabel"
+                class="text-xs text-muted-foreground"
+              >
+                代煎方式：{{ processRuleLabel }}
+              </div>
+              <div
+                v-else-if="boilText && herbStatText"
+                class="text-xs text-muted-foreground"
+              >
+                未匹配到已配置的代煎方式
+              </div>
+              <div v-if="isTransfer || recognizedHerbCount" class="flex gap-3">
+                <div>
+                  <div class="mb-1 text-xs text-muted-foreground">
+                    剂数
+                    <span v-if="dosageFromDays">（已按处方天数生成）</span>
+                  </div>
+                  <InputNumber v-model:value="dosage" :min="1" />
+                </div>
+                <div>
+                  <div class="mb-1 text-xs text-muted-foreground">每日次数</div>
+                  <InputNumber v-model:value="dayDosage" :min="1" />
+                </div>
+              </div>
+
+              <div
+                v-if="matchedList.length"
+                class="text-xs font-medium text-foreground"
+              >
+                已对照（{{ matchedList.length }}）
+              </div>
+              <div class="matched-grid">
+                <div
+                  v-for="(m, mi) in matchedList"
+                  :key="mi"
+                  class="matched-chip rounded border border-primary/30 px-2 py-1.5 text-sm shadow-[0_0_6px_hsl(var(--primary)/0.18)]"
+                >
+                  <label class="flex items-center gap-1.5 truncate">
+                    <input v-model="m._import" type="checkbox" />
+                    <span class="truncate font-medium" :title="m.ai_name">{{
+                      m.ai_name
+                    }}</span>
+                    <span class="shrink-0 text-xs text-muted-foreground">{{ m.dose }}{{ m.unit }}</span>
+                  </label>
+                  <div class="mt-1 flex flex-wrap gap-1">
+                    <Tag
+                      v-for="c in m.candidates || []"
+                      :key="c.drug_id"
+                      class="cand-pick-tag cursor-pointer !m-0 !text-xs"
+                      role="button"
+                      :color="
+                        Number(m.selected_drug_id) === Number(c.drug_id)
+                          ? 'blue'
+                          : undefined
+                      "
+                      @click.stop="onPickCandidate(mi, c)"
+                    >
+                      {{ resolveProductDrugName(c) || c.drug_name }}
+                    </Tag>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                v-if="unmatchedList.length"
+                class="mt-2 text-xs font-medium text-red-500"
+              >
+                未对照（{{ unmatchedList.length }}）—
+                点击下方用接诊同款气泡搜药（支持拼音）
+              </div>
+              <div class="unmatched-grid">
+                <div
+                  v-for="(u, ui) in unmatchedList"
+                  :key="`u${ ui}`"
+                  class="unmatched-chip rounded border border-red-500/40 px-2 py-1.5 text-sm shadow-[0_0_6px_hsl(0_84%_60%/0.18)]"
+                >
+                  <div
+                    class="truncate font-medium text-red-500"
+                    :title="u.ai_name"
+                  >
+                    {{ u.ai_name }}
+                    <span class="text-xs font-normal text-muted-foreground">{{ u.dose }}{{ u.unit }}</span>
+                  </div>
+                  <div
+                    v-if="unmatchedPicked[ui]"
+                    class="mt-0.5 truncate text-xs text-primary"
+                  >
+                    已选：{{ unmatchedPicked[ui].drug_name }}
+                  </div>
+                  <div class="mt-1">
+                    <ChineseDrugNameBubble
+                      :display-name="unmatchedPicked[ui]?.drug_name || ''"
+                      :store-id="storeId"
+                      :register-id="registerId"
+                      :type="1"
+                      :placeholder="u.ai_name || '药名/拼音'"
+                      input-class="unmatched-drug-bubble"
+                      @select="(item) => onUnmatchedBubbleSelect(ui, item)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </template>
           </template>
         </div>
-        <Button v-if="isResultView" size="small" @click="backToUploadMode">
-          重新上传识别
-        </Button>
-      </div>
-
-      <template v-if="showUploadPanel">
-      <UploadDragger
-        class="ocr-dragger"
-        :class="{ 'ocr-dragger--compact': imageUrls.length > 0 }"
-        accept="image/*"
-        :multiple="true"
-        :disabled="uploading || imageUrls.length >= 6"
-        :show-upload-list="false"
-        :before-upload="beforeUpload"
-      >
-        <div class="ocr-dragger-inner">
-          <CloudUploadOutlined class="ocr-dragger-icon" />
-          <div class="text-sm font-medium text-foreground">拖拽处方图到此处，或点击选择</div>
-          <div class="mt-1 text-xs text-muted-foreground">
-            最多 6 张；也可 Ctrl+V 粘贴截图
-            <span v-if="listening" class="ml-1 text-warning">（粘贴监听中）</span>
-          </div>
-        </div>
-      </UploadDragger>
-      <div class="ocr-upload-actions sticky bottom-0 z-[1] flex flex-wrap items-center gap-2 bg-[hsl(var(--background)/0.92)] py-2 backdrop-blur">
-        <Button
-          size="small"
-          :type="listening ? 'primary' : 'default'"
-          :danger="listening"
-          @click="onTogglePaste"
-        >
-          <StopOutlined v-if="listening" />
-          <SnippetsOutlined v-else />
-          {{ listening ? '停止粘贴' : '开启粘贴' }}
-        </Button>
-        <Button
-          type="primary"
-          size="middle"
-          :loading="loading"
-          :disabled="!imageUrls.length"
-          @click="runOcr"
-        >
-          开始识别
-        </Button>
-        <span v-if="hasCompareImages" class="text-xs text-muted-foreground">
-          已上传 {{ imageUrls.length }} 张，中间栏可对照原图
-        </span>
-      </div>
-      </template>
-
-      <template v-if="isResultView">
-      <template v-if="isTransfer">
-        <div class="grid grid-cols-2 gap-2">
-          <div>
-            <div class="mb-1 text-xs text-muted-foreground">姓名</div>
-            <Input v-model:value="patientName" placeholder="患者姓名" />
-            <div v-if="fromConsignee.name" class="consignee-hint">处方未写姓名，来自收货人信息</div>
-          </div>
-          <div>
-            <div class="mb-1 text-xs text-muted-foreground">手机号</div>
-            <Input v-model:value="patientMobile" placeholder="手机号" />
-            <div v-if="fromConsignee.mobile" class="consignee-hint">处方未写手机号，来自收货人信息</div>
-          </div>
-          <div>
-            <div class="mb-1 text-xs text-muted-foreground">性别</div>
-            <Select
-              v-model:value="patientSex"
-              class="w-full"
-              :options="[
-                { label: '未知', value: 0 },
-                { label: '男', value: 1 },
-                { label: '女', value: 2 },
-              ]"
-            />
-          </div>
-          <div>
-            <div class="mb-1 text-xs text-muted-foreground">年龄</div>
-            <InputNumber v-model:value="patientAge" class="w-full" :min="1" :max="200" />
-          </div>
-          <div class="col-span-2">
-            <div class="mb-1 text-xs text-muted-foreground">地址</div>
-            <Input v-model:value="patientAddress" placeholder="收货地址（可后补）" />
-            <div v-if="fromConsignee.address" class="consignee-hint">处方未写地址，来自收货人信息</div>
-          </div>
-          <div class="col-span-2 text-xs" :class="patientMatched ? 'text-primary' : 'text-warning'">
-            {{ patientMatched ? '已匹配到已有就诊人' : '未匹配，确认后将新建就诊人' }}
-          </div>
-        </div>
-      </template>
-
-      <div>
-        <div class="mb-1 text-xs text-muted-foreground">诊断</div>
-        <Input v-model:value="clinicalDiagnose" placeholder="临床诊断（识图有则自动填入）" />
-      </div>
-      <div>
-        <div class="mb-1 text-xs text-muted-foreground">医嘱</div>
-        <Input.TextArea v-model:value="medicalAdvice" :rows="2" placeholder="医嘱（识图结果可改）" />
-      </div>
-      <div v-if="herbStatText" class="text-sm text-foreground">{{ herbStatText }}</div>
-      <div v-if="processRuleLabel" class="text-xs text-muted-foreground">
-        代煎方式：{{ processRuleLabel }}
-      </div>
-      <div v-else-if="boilText && herbStatText" class="text-xs text-muted-foreground">
-        未匹配到已配置的代煎方式
-      </div>
-      <div v-if="isTransfer || recognizedHerbCount" class="flex gap-3">
-        <div>
-          <div class="mb-1 text-xs text-muted-foreground">
-            剂数
-            <span v-if="dosageFromDays">（已按处方天数生成）</span>
-          </div>
-          <InputNumber v-model:value="dosage" :min="1" />
-        </div>
-        <div>
-          <div class="mb-1 text-xs text-muted-foreground">每日次数</div>
-          <InputNumber v-model:value="dayDosage" :min="1" />
-        </div>
-      </div>
-
-      <div v-if="matchedList.length" class="text-xs font-medium text-foreground">
-        已对照（{{ matchedList.length }}）
-      </div>
-      <div class="matched-grid">
         <div
-          v-for="(m, mi) in matchedList"
-          :key="mi"
-          class="matched-chip rounded border border-primary/30 px-2 py-1.5 text-sm shadow-[0_0_6px_hsl(var(--primary)/0.18)]"
+          v-if="showUploadPanel"
+          class="ocr-upload-actions flex shrink-0 flex-wrap items-center gap-2 border-t border-border bg-[hsl(var(--background)/0.96)] py-2 backdrop-blur"
         >
-          <label class="flex items-center gap-1.5 truncate">
-            <input v-model="m._import" type="checkbox" />
-            <span class="truncate font-medium" :title="m.ai_name">{{ m.ai_name }}</span>
-            <span class="shrink-0 text-xs text-muted-foreground">{{ m.dose }}{{ m.unit }}</span>
-          </label>
-          <div class="mt-1 flex flex-wrap gap-1">
-            <Tag
-              v-for="c in m.candidates || []"
-              :key="c.drug_id"
-              class="cand-pick-tag cursor-pointer !m-0 !text-xs"
-              role="button"
-              :color="Number(m.selected_drug_id) === Number(c.drug_id) ? 'blue' : undefined"
-              @click.stop="onPickCandidate(mi, c)"
-            >
-              {{ resolveProductDrugName(c) || c.drug_name }}
-            </Tag>
-          </div>
+          <Button
+            size="small"
+            :type="listening ? 'primary' : 'default'"
+            :danger="listening"
+            @click="onTogglePaste"
+          >
+            <StopOutlined v-if="listening" />
+            <SnippetsOutlined v-else />
+            {{ listening ? '停止粘贴' : '开启粘贴' }}
+          </Button>
+          <Button
+            type="primary"
+            size="middle"
+            :loading="loading"
+            :disabled="!imageUrls.length"
+            @click="runOcr"
+          >
+            开始识别
+          </Button>
+          <span v-if="hasCompareImages" class="text-xs text-muted-foreground">
+            已上传 {{ imageUrls.length }} 张，中间栏可对照原图
+          </span>
         </div>
       </div>
-
-      <div v-if="unmatchedList.length" class="mt-2 text-xs font-medium text-red-500">
-        未对照（{{ unmatchedList.length }}）— 点击下方用接诊同款气泡搜药（支持拼音）
-      </div>
-      <div class="unmatched-grid">
-        <div
-          v-for="(u, ui) in unmatchedList"
-          :key="'u' + ui"
-          class="unmatched-chip rounded border border-red-500/40 px-2 py-1.5 text-sm shadow-[0_0_6px_hsl(0_84%_60%/0.18)]"
-        >
-          <div class="truncate font-medium text-red-500" :title="u.ai_name">
-            {{ u.ai_name }}
-            <span class="text-xs font-normal text-muted-foreground">{{ u.dose }}{{ u.unit }}</span>
-          </div>
-          <div v-if="unmatchedPicked[ui]" class="mt-0.5 truncate text-xs text-primary">
-            已选：{{ unmatchedPicked[ui].drug_name }}
-          </div>
-          <div class="mt-1">
-            <ChineseDrugNameBubble
-              :display-name="unmatchedPicked[ui]?.drug_name || ''"
-              :store-id="storeId"
-              :register-id="registerId"
-              :type="1"
-              :placeholder="u.ai_name || '药名/拼音'"
-              input-class="unmatched-drug-bubble"
-              @select="(item) => onUnmatchedBubbleSelect(ui, item)"
-            />
-          </div>
-        </div>
-      </div>
-      </template>
-      </template>
-      </div>
     </div>
   </Drawer>
   <ConsigneeFormModal />
@@ -1064,11 +1175,8 @@ defineExpose({
 }
 
 .ocr-upload-actions {
-  position: sticky;
-  bottom: 0;
   z-index: 1;
   margin-top: 4px;
-  border-top: 1px solid hsl(var(--border) / 60%);
 }
 
 .ocr-dragger :deep(.ant-upload) {
@@ -1085,18 +1193,34 @@ defineExpose({
   color: hsl(var(--primary));
 }
 
-.ocr-left {
-  max-height: calc(100vh - 160px);
+/**
+ * 抽屉内容区高度锁死视口剩余空间：
+ * 中栏原图再高也只在本栏内滚，不会把右侧「开始识别」顶出可视区
+ */
+.image-ocr-drawer {
+  align-items: stretch;
+  height: calc(100vh - 140px);
+  max-height: calc(100vh - 140px);
+  overflow: hidden;
+}
+
+.ocr-left {
+  height: 100%;
+  min-height: 0;
 }
 
-/* 选历史后左侧会变长，「上传新图」吸顶，滚动时仍可见 */
 .ocr-left-sticky {
-  position: sticky;
-  top: 0;
-  z-index: 2;
   padding-bottom: 4px;
-  background: hsl(var(--background) / 0.96);
-  backdrop-filter: blur(4px);
+  background: hsl(var(--background) / 96%);
+}
+
+.ocr-left-footer {
+  background: hsl(var(--background) / 96%);
+}
+
+.ocr-right {
+  height: 100%;
+  min-height: 0;
 }
 
 .ocr-hist-unread {
@@ -1105,7 +1229,7 @@ defineExpose({
 }
 
 .ocr-origin-thumbs {
-  background: hsl(var(--muted) / 0.25);
+  background: hsl(var(--muted) / 25%);
 }
 
 .ocr-origin-thumb-img {
@@ -1113,8 +1237,8 @@ defineExpose({
   width: 100%;
   max-height: 96px;
   object-fit: cover;
-  border-radius: 4px;
   background: hsl(var(--background));
+  border-radius: 4px;
 }
 
 .ocr-mini-thumb {
@@ -1122,12 +1246,13 @@ defineExpose({
   width: 100%;
   max-height: 72px;
   object-fit: cover;
+  background: hsl(var(--muted) / 25%);
   border-radius: 4px;
-  background: hsl(var(--muted) / 0.25);
 }
 
 .ocr-origin-col {
-  min-height: 480px;
+  height: 100%;
+  min-height: 0;
 }
 
 /**
@@ -1148,9 +1273,9 @@ defineExpose({
 .ocr-origin-appear-enter-from,
 .ocr-origin-appear-leave-to {
   max-width: 0 !important;
-  margin-right: 0 !important;
-  padding-left: 0 !important;
   padding-right: 0 !important;
+  padding-left: 0 !important;
+  margin-right: 0 !important;
   opacity: 0;
   transform: translateX(-18px) scale(0.97);
 }
@@ -1176,8 +1301,8 @@ defineExpose({
 
 /* 候选 Tag：加大触控热区，手机浏览器点选不易失手 */
 .cand-pick-tag {
-  padding: 4px 10px !important;
   min-height: 28px;
+  padding: 4px 10px !important;
   line-height: 20px !important;
   touch-action: manipulation;
   user-select: none;
@@ -1185,10 +1310,10 @@ defineExpose({
 
 .unmatched-chip :deep(.chinese-drug-name-bubble) {
   display: block;
-  width: 100% !important;
-  max-width: 100% !important;
-  min-width: 0 !important;
   flex: none !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
 }
 
 .unmatched-chip :deep(.chinese-drug-name-bubble .ant-input-affix-wrapper) {
diff --git a/apps/web-antd/src/views/doctor/doctor-reception/index.vue b/apps/web-antd/src/views/doctor/doctor-reception/index.vue
index f3d35873..361ef59f 100644
--- a/apps/web-antd/src/views/doctor/doctor-reception/index.vue
+++ b/apps/web-antd/src/views/doctor/doctor-reception/index.vue
@@ -1,37 +1,43 @@
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, watch} from 'vue';
+import type { ChineseMedicineConfigChange } from './components/ChineseMedicineConfig.vue';
+import type { DoctorCreatedPatientStartResult } from './components/DoctorCreatedPatientModal.vue';
+
+import type { StoreVipInfo } from '#/utils/vip';
+
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
-import {Page, useVbenDrawer, useVbenModal} from '@vben/common-ui';
-import {useUserStore} from '@vben/stores';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
 
 import {
+  AudioOutlined,
+  BankOutlined,
   BookOutlined,
+  CheckCircleFilled,
   ClearOutlined,
   DeleteTwoTone,
+  ExpandOutlined,
   FileTextOutlined,
   HistoryOutlined,
   MedicineBoxOutlined,
-  CheckCircleFilled,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
-  PlusOutlined,
   PictureOutlined,
-  ExpandOutlined,
+  PlusOutlined,
   QrcodeOutlined,
-  BankOutlined,
   ReloadOutlined,
   RobotOutlined,
-  AudioOutlined,
-  UserAddOutlined,
   SaveOutlined,
   SendOutlined,
   ShrinkOutlined,
   StopOutlined,
   SwapOutlined,
+  UserAddOutlined,
   UserOutlined,
 } from '@ant-design/icons-vue';
 import {
+  Modal as AntModal,
   Badge,
   Button,
   Card,
@@ -42,124 +48,130 @@ import {
   Input,
   InputNumber,
   message,
+  notification,
   RadioButton,
   RadioGroup,
   Row,
   Select,
   SelectOption,
-  Modal as AntModal,
-  Tag,
-  Tooltip,
-  Tabs,
-  TabPane,
-  Textarea,
-  notification,
   Spin,
+  TabPane,
+  Tabs,
+  Tag,
+  Textarea,
+  Tooltip,
 } from 'ant-design-vue';
-import {debounce} from 'lodash-es'; // 或者使用自定义防抖函数
+import { debounce } from 'lodash-es'; // 或者使用自定义防抖函数
 
-import {getRegisterStatus} from '#/util/tool';
+// 中药药名气泡（对齐诊断/医嘱浮层交互）
+import { ChineseDrugNameBubble } from '#/components/chinese-drug-name-bubble';
+import { ChineseDrugWayBubble } from '#/components/chinese-drug-way-bubble';
+// 药品搜索选择组件
+import { DrugSearchSelect } from '#/components/drug-search-select';
+// 信息提示模态框组件
+import InfoModal from '#/components/modal/InfoModal.vue';
+import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
+import { useOrderPriceAdjust } from '#/composables/useOrderPriceAdjust';
+import { getRegisterStatus } from '#/util/tool';
 import {
-  useVipPermission,
-  type StoreVipInfo,
-} from '#/utils/vip';
-import MedicalRecordPanel from '#/views/doctor/medical-record/MedicalRecordPanel.vue';
-import EntryKeywordBubble from '#/views/doctor/medical-record/components/EntryKeywordBubble.vue';
-import CommonDxOrderChips from '#/views/doctor/medical-record/components/CommonDxOrderChips.vue';
+  calcItemMarginPercent,
+  calcTotalMarginPercent,
+  isSeeRateEnabled,
+} from '#/utils/chinesePrescriptionMargin';
+import {
+  calculateChineseProductPriceLikeBackend,
+  calculateProcessingFee,
+  formatPriceDisplay,
+  parsePriceValue,
+} from '#/utils/formatPrice';
+import { detailDoctorOrderToText } from '#/utils/prescriptionDoctorOrder';
+import {
+  formatPriceDiscountLabel,
+  normalizeQuickOptions,
+} from '#/utils/pricePercentAdjust';
+import {
+  applySingleChildProcessRuleAutoSelect,
+  resolveProcessRuleLoadedLevel,
+  validateChineseConfigRequired,
+} from '#/utils/processRuleCascade';
+import { useVipPermission } from '#/utils/vip';
+import { getTransferPrescriptionByRegisterApi } from '#/views/business/chat/api/transferPrescription';
+import OrderPricePercentAdjustDrawer from '#/views/business/order/components/OrderPricePercentAdjustDrawer.vue';
+import {
+  getSalespersonTransferByRegisterApi,
+  prepareDoctorImportApi,
+} from '#/views/business/salesperson-transfer-prescription/api';
+import {
+  addWestPrescription,
+  applySpecialPrescriptionApi,
+  checkChineseMedicineConflictApi,
+  endOfDiagnosisApi,
+  getCurrentStoreTypeApi,
+  getDoctorCreatedUserPatientListApi,
+  getDrugUseList,
+  getMyStoreListApi,
+  getPatientItem,
+  getPatientList,
+  getPrescriptionInfoApi,
+  getPrescriptionTypeOptionsApi,
+  getProcessRuleList,
+  getProductListDoctorReception,
+  receptionApi,
+  switchStoreApi,
+  withdrawPrescriptionApi,
+} from '#/views/doctor/doctor-reception/api';
+import RefusalOfTreatmentModal from '#/views/doctor/doctor-reception/components/RefusalOfTreatmentModal.vue';
+import SalespersonTransferDrawer from '#/views/doctor/doctor-reception/components/SalespersonTransferDrawer.vue';
+import {
+  registerDoctorTransferImportHandler,
+  unregisterDoctorTransferImportHandler,
+} from '#/views/doctor/doctor-reception/composables/useDoctorReceptionTransferImport';
+import {
+  alignChineseDrugsToLatestPrice,
+  applyLatestPrices,
+  fetchChinesePriceDiff,
+} from '#/views/doctor/doctor-reception/utils/alignChineseDrugPrice';
+import { parseSalespersonTransferDrugList } from '#/views/doctor/doctor-reception/utils/parseSalespersonTransferDrugList';
 import { saveMedicalRecord } from '#/views/doctor/medical-record/api';
+import CommonDxOrderChips from '#/views/doctor/medical-record/components/CommonDxOrderChips.vue';
+import EntryKeywordBubble from '#/views/doctor/medical-record/components/EntryKeywordBubble.vue';
+import PatientMedicalRecordDrawer from '#/views/doctor/medical-record/components/PatientMedicalRecordDrawer.vue';
+import MedicalRecordPanel from '#/views/doctor/medical-record/MedicalRecordPanel.vue';
 import {
   clearMedicalRecordDraft,
   loadMedicalRecordDraft,
   loadRxMrTab,
   saveRxMrTab,
 } from '#/views/doctor/medical-record/utils/localDraft';
-import {
-  addWestPrescription, checkChineseMedicineConflictApi,
-  endOfDiagnosisApi,
-  getDrugUseList,
-  getMyStoreListApi,
-  getCurrentStoreTypeApi,
-  getPrescriptionTypeOptionsApi,
-  getPatientItem,
-  getPatientList,
-  getDoctorCreatedUserPatientListApi,
-  getPrescriptionInfoApi,
-  getProcessRuleList,
-  getProductListDoctorReception,
-  receptionApi,
-  applySpecialPrescriptionApi,
-  switchStoreApi,
-  withdrawPrescriptionApi,
-} from '#/views/doctor/doctor-reception/api';
-import { alignChineseDrugsToLatestPrice, applyLatestPrices, fetchChinesePriceDiff } from '#/views/doctor/doctor-reception/utils/alignChineseDrugPrice';
-
-import SpecialPrescriptionImportCard from './components/SpecialPrescriptionImportCard.vue';
-import PatientBriefBar from './components/PatientBriefBar.vue';
-import PatientInfoDrawer from './components/PatientInfoDrawer.vue';
-import PatientPrescriptionHistoryDrawer from './components/PatientPrescriptionHistoryDrawer.vue';
-import PatientMedicalRecordDrawer from '#/views/doctor/medical-record/components/PatientMedicalRecordDrawer.vue';
-import PrescriptionDetail from './components/PrescriptionDetail.vue';
-import WesternModal from './components/WesternModal.vue';
-import SimpleProductModal from './components/SimpleProductModal.vue';
-import RefusalOfTreatmentModal
-  from "#/views/doctor/doctor-reception/components/RefusalOfTreatmentModal.vue";
-import CreateUserPatientModal from './components/CreateUserPatientModal.vue';
-import ClaimQrcodeModal from './components/ClaimQrcodeModal.vue';
-import DoctorCreatedPatientModal from './components/DoctorCreatedPatientModal.vue';
-import type { DoctorCreatedPatientStartResult } from './components/DoctorCreatedPatientModal.vue';
-import ProxyPayQrcodeModal from './components/ProxyPayQrcodeModal.vue';
-import ApplyPublicAccountPayModal from '#/views/finance/public-account-pay/components/apply-modal.vue';
-import { applyPublicAccountPay } from '#/views/finance/public-account-pay/api';
-// 常用方选择弹窗组件
-import CommonPrescriptionModal from './components/CommonPrescriptionModal.vue';
-import GoldenFormulaModal from './components/GoldenFormulaModal.vue';
-import AiPrescriptionDrawer from './components/AiPrescriptionDrawer.vue';
-import ImageOcrDrawer from './components/ImageOcrDrawer.vue';
-// 确认模态框组件
-import ConfirmModal from './components/ConfirmModal.vue';
-// 信息提示模态框组件
-import InfoModal from '#/components/modal/InfoModal.vue';
-import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
-import { detailDoctorOrderToText } from '#/utils/prescriptionDoctorOrder';
-// 药品搜索选择组件
-import { DrugSearchSelect } from '#/components/drug-search-select';
-// 中药药名气泡（对齐诊断/医嘱浮层交互）
-import { ChineseDrugNameBubble } from '#/components/chinese-drug-name-bubble';
-import { ChineseDrugWayBubble } from '#/components/chinese-drug-way-bubble';
+// 转诊相关
+import TransferPrescriptionCard from '#/views/doctor/online-consultation/components/TransferPrescriptionCard.vue';
 // 保存常用方API
 import {
   saveChineseCommonPrescriptionApi,
   saveWestCommonPrescriptionApi,
 } from '#/views/doctor/settings/api';
-// 转诊相关
-import TransferPrescriptionCard from '#/views/doctor/online-consultation/components/TransferPrescriptionCard.vue';
-import SalespersonTransferDrawer from '#/views/doctor/doctor-reception/components/SalespersonTransferDrawer.vue';
-import { getTransferPrescriptionByRegisterApi } from '#/views/business/chat/api/transferPrescription';
-import { getSalespersonTransferByRegisterApi, prepareDoctorImportApi } from '#/views/business/salesperson-transfer-prescription/api';
-import {
-  registerDoctorTransferImportHandler,
-  unregisterDoctorTransferImportHandler,
-} from '#/views/doctor/doctor-reception/composables/useDoctorReceptionTransferImport';
-import { parseSalespersonTransferDrugList } from '#/views/doctor/doctor-reception/utils/parseSalespersonTransferDrugList';
-import {
-  calcItemMarginPercent,
-  calcTotalMarginPercent,
-  isSeeRateEnabled,
-} from '#/utils/chinesePrescriptionMargin';
-import OrderPricePercentAdjustDrawer from '#/views/business/order/components/OrderPricePercentAdjustDrawer.vue';
-import { useOrderPriceAdjust } from '#/composables/useOrderPriceAdjust';
-import {
-  applyRatioToDrugs,
-  formatPriceDiscountLabel,
-  normalizeQuickOptions,
-} from '#/utils/pricePercentAdjust';
-import { calculateChineseProductPriceLikeBackend, calculateProcessingFee, formatPriceDisplay, parsePriceValue } from '#/utils/formatPrice';
-import {
-  applySingleChildProcessRuleAutoSelect,
-  resolveProcessRuleLoadedLevel,
-  validateChineseConfigRequired,
-} from '#/utils/processRuleCascade';
-import ChineseMedicineConfig, { type ChineseMedicineConfigChange } from './components/ChineseMedicineConfig.vue';
+import { applyPublicAccountPay } from '#/views/finance/public-account-pay/api';
+import ApplyPublicAccountPayModal from '#/views/finance/public-account-pay/components/apply-modal.vue';
+
+import AiPrescriptionDrawer from './components/AiPrescriptionDrawer.vue';
+import ChineseMedicineConfig from './components/ChineseMedicineConfig.vue';
+import ClaimQrcodeModal from './components/ClaimQrcodeModal.vue';
+// 常用方选择弹窗组件
+import CommonPrescriptionModal from './components/CommonPrescriptionModal.vue';
+// 确认模态框组件
+import ConfirmModal from './components/ConfirmModal.vue';
+import CreateUserPatientModal from './components/CreateUserPatientModal.vue';
+import DoctorCreatedPatientModal from './components/DoctorCreatedPatientModal.vue';
+import GoldenFormulaModal from './components/GoldenFormulaModal.vue';
+import ImageOcrDrawer from './components/ImageOcrDrawer.vue';
+import PatientBriefBar from './components/PatientBriefBar.vue';
+import PatientInfoDrawer from './components/PatientInfoDrawer.vue';
+import PatientPrescriptionHistoryDrawer from './components/PatientPrescriptionHistoryDrawer.vue';
+import PrescriptionDetail from './components/PrescriptionDetail.vue';
+import ProxyPayQrcodeModal from './components/ProxyPayQrcodeModal.vue';
+import SimpleProductModal from './components/SimpleProductModal.vue';
+import SpecialPrescriptionImportCard from './components/SpecialPrescriptionImportCard.vue';
+import WesternModal from './components/WesternModal.vue';
 
 interface Patient {
   id: number;
@@ -167,24 +179,24 @@ interface Patient {
   mobile: string;
   status: number;
   user_patient?: {
-    id: number;
-    name: string;
     age?: number;
-    sex?: number;
+    id: number;
     mobile?: string;
+    name: string;
+    sex?: number;
   };
   special_prescription_patient_record?: {
-    id: number;
-    status: number;
-    special_prescription_id: number;
     dose_count: number;
+    id: number;
     sku_id?: number;
     sku_name?: string;
     special_prescription?: {
+      cover_image?: string;
       id: number;
       name: string;
-      cover_image?: string;
     };
+    special_prescription_id: number;
+    status: number;
   };
 }
 
@@ -216,10 +228,12 @@ interface UserPatientHealthInquiry {
 
 const tabType = ref(0);
 /** 处方|病历 Tab（v-show 切换，保持两侧状态；按挂号落本地） */
-const rxMrTab = ref<'rx' | 'mr'>('rx');
-const medicalRecordPanelRef = ref<InstanceType<typeof MedicalRecordPanel> | null>(null);
+const rxMrTab = ref<'mr' | 'rx'>('rx');
+const medicalRecordPanelRef = ref<InstanceType<
+  typeof MedicalRecordPanel
+> | null>(null);
 /** 当前接诊挂号对应履约诊所 VIP（来自 getCurrentStoreType） */
-const receptionVip = ref<StoreVipInfo | null>(null);
+const receptionVip = ref<null | StoreVipInfo>(null);
 /** 统一用全局 useVipPermission，避免各处手写 hasVipPermission 字符串 */
 const {
   canUseMedicalRecord,
@@ -252,7 +266,10 @@ const doctorCreatedRecordTotal = ref(0);
  */
 async function loadDoctorCreatedRecordTotal() {
   try {
-    const res = await getDoctorCreatedUserPatientListApi({ page: 1, page_size: 1 });
+    const res = await getDoctorCreatedUserPatientListApi({
+      page: 1,
+      page_size: 1,
+    });
     doctorCreatedRecordTotal.value = Number(res?.total || 0);
   } catch {
     doctorCreatedRecordTotal.value = 0;
@@ -290,10 +307,10 @@ const prescriptionTypeAllowed = ref(true);
 const prescriptionTypeDenyMessage = ref('');
 
 /** 同参处方类型请求去重（setup + selectPatient 易双打） */
-let prescriptionTypeInflight: {
+let prescriptionTypeInflight: null | {
   key: string;
   promise: Promise<boolean>;
-} | null = null;
+} = null;
 
 /** 拉取处方类型列表与默认选中；无权限时清空并返回 false */
 async function loadPrescriptionTypeOptions(registerId?: number) {
@@ -303,42 +320,46 @@ async function loadPrescriptionTypeOptions(registerId?: number) {
   }
   prescriptionTypeLoading.value = true;
   const run = (async () => {
-  try {
-    const params: { register_id?: number; store_id?: number } = {};
-    if (registerId) params.register_id = registerId;
-    if (myStoreId.value) params.store_id = myStoreId.value;
-    const res = await getPrescriptionTypeOptionsApi(params);
-    const list = Array.isArray(res?.list) ? res.list : [];
-    categories.value = list.map((item) => ({
-      value: Number(item.value),
-      label: item.label || '',
-      icon: item.icon || '',
-      icon_text: item.icon_text || '',
-    }));
-    const def = Number(res?.default) || 0;
-    prescriptionTypeDefault.value = def;
-    const allowed = res?.allowed !== false && list.length > 0;
-    prescriptionTypeAllowed.value = allowed;
-    prescriptionTypeDenyMessage.value = allowed
-      ? ''
-      : (res?.message || '当前门店未开通开方权限');
-    if (allowed && def && !categories.value.some((c) => c.value === activeCategory.value)) {
-      activeCategory.value = def;
+    try {
+      const params: { register_id?: number; store_id?: number } = {};
+      if (registerId) params.register_id = registerId;
+      if (myStoreId.value) params.store_id = myStoreId.value;
+      const res = await getPrescriptionTypeOptionsApi(params);
+      const list = Array.isArray(res?.list) ? res.list : [];
+      categories.value = list.map((item) => ({
+        value: Number(item.value),
+        label: item.label || '',
+        icon: item.icon || '',
+        icon_text: item.icon_text || '',
+      }));
+      const def = Number(res?.default) || 0;
+      prescriptionTypeDefault.value = def;
+      const allowed = res?.allowed !== false && list.length > 0;
+      prescriptionTypeAllowed.value = allowed;
+      prescriptionTypeDenyMessage.value = allowed
+        ? ''
+        : res?.message || '当前门店未开通开方权限';
+      if (
+        allowed &&
+        def &&
+        !categories.value.some((c) => c.value === activeCategory.value)
+      ) {
+        activeCategory.value = def;
+      }
+      return allowed;
+    } catch (error) {
+      console.error('加载处方类型失败', error);
+      categories.value = [];
+      prescriptionTypeAllowed.value = false;
+      prescriptionTypeDenyMessage.value = '处方类型加载失败，请稍后重试';
+      message.warning('处方类型加载失败，请稍后重试');
+      return false;
+    } finally {
+      prescriptionTypeLoading.value = false;
+      if (prescriptionTypeInflight?.key === key) {
+        prescriptionTypeInflight = null;
+      }
     }
-    return allowed;
-  } catch (e) {
-    console.error('加载处方类型失败', e);
-    categories.value = [];
-    prescriptionTypeAllowed.value = false;
-    prescriptionTypeDenyMessage.value = '处方类型加载失败，请稍后重试';
-    message.warning('处方类型加载失败，请稍后重试');
-    return false;
-  } finally {
-    prescriptionTypeLoading.value = false;
-    if (prescriptionTypeInflight?.key === key) {
-      prescriptionTypeInflight = null;
-    }
-  }
   })();
   prescriptionTypeInflight = { key, promise: run };
   return run;
@@ -347,7 +368,11 @@ async function loadPrescriptionTypeOptions(registerId?: number) {
 /** 将当前分类 Tab 滚入可视区 */
 function focusActiveCategoryTab() {
   const el = document.getElementById(`rx-pc-tab-${activeCategory.value}`);
-  el?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+  el?.scrollIntoView({
+    behavior: 'smooth',
+    inline: 'center',
+    block: 'nearest',
+  });
 }
 
 const userStore = useUserStore();
@@ -366,8 +391,10 @@ const allowInsuranceCategory = ref(0);
 /** 是否开启订单百分比调价 */
 const priceAdjustEnabled = ref(false);
 const publicAccountPayEnabled = ref(false);
-const publicAccountPayTrigger = ref<'immediate' | 'doctor_confirm'>('immediate');
-const publicAccountBillMode = ref<'order' | 'daily'>('order');
+const publicAccountPayTrigger = ref<'doctor_confirm' | 'immediate'>(
+  'immediate',
+);
+const publicAccountBillMode = ref<'daily' | 'order'>('order');
 const publicAccountPaySubmitting = ref(false);
 /** 开方购物车整单价格比例，100=原价 */
 const priceDiscount = ref(100);
@@ -376,7 +403,9 @@ const PRICE_PANEL_MINI_KEY = 'doctorReception-price-panel-mini';
 const PRICE_PANEL_ACTIONS_KEY = 'doctorReception-price-panel-actions';
 const pricePanelMini = ref(localStorage.getItem(PRICE_PANEL_MINI_KEY) === '1');
 /** 面板上的发送/另存为可关；关掉后仍可用顶栏「发送处方」 */
-const pricePanelShowActions = ref(localStorage.getItem(PRICE_PANEL_ACTIONS_KEY) !== '0');
+const pricePanelShowActions = ref(
+  localStorage.getItem(PRICE_PANEL_ACTIONS_KEY) !== '0',
+);
 function setPricePanelMini(mini: boolean) {
   pricePanelMini.value = mini;
   localStorage.setItem(PRICE_PANEL_MINI_KEY, mini ? '1' : '0');
@@ -393,7 +422,11 @@ function submitCurrentPrescription() {
   }
   sendPrescription();
 }
-const { config: priceAdjustConfig, loadByStoreId, applyRatioToDrugs: applyRatioDrugs } = useOrderPriceAdjust();
+const {
+  config: priceAdjustConfig,
+  loadByStoreId,
+  applyRatioToDrugs: applyRatioDrugs,
+} = useOrderPriceAdjust();
 const [PriceAdjustDrawer, priceAdjustDrawerApi] = useVbenDrawer({
   connectedComponent: OrderPricePercentAdjustDrawer,
 });
@@ -427,7 +460,7 @@ const doctorReceptionRegisterId = computed(() => {
 });
 
 /** 门店类型接口短时缓存，供毛利率 / 转诊提示共用，避免进页双打 */
-let storeTypeCache: { key: string; data: any; at: number } | null = null;
+let storeTypeCache: null | { at: number; data: any; key: string; } = null;
 const STORE_TYPE_CACHE_TTL = 30_000;
 
 async function getCurrentStoreTypeCached(params: {
@@ -463,14 +496,18 @@ async function fetchStoreSeeRate() {
     const res = await getCurrentStoreTypeCached(params);
     seeRate.value = Number(res?.see_rate ?? 0);
     allowInsuranceCategory.value = Number(res?.allow_insurance_category ?? 0);
-    priceAdjustEnabled.value = Number(res?.enable_order_price_percent_adjust ?? 0) === 1;
-    publicAccountPayEnabled.value = Number(res?.public_account_pay_enabled ?? 0) === 1;
+    priceAdjustEnabled.value =
+      Number(res?.enable_order_price_percent_adjust ?? 0) === 1;
+    publicAccountPayEnabled.value =
+      Number(res?.public_account_pay_enabled ?? 0) === 1;
     publicAccountPayTrigger.value =
       String(res?.public_account_pay_trigger || '') === 'doctor_confirm'
         ? 'doctor_confirm'
         : 'immediate';
     publicAccountBillMode.value =
-      String(res?.public_account_bill_mode || '') === 'daily' ? 'daily' : 'order';
+      String(res?.public_account_bill_mode || '') === 'daily'
+        ? 'daily'
+        : 'order';
     // 有挂号时 vip 已按履约诊所返回，供病历/AI/金方门控
     receptionVip.value = res?.vip ?? null;
     await loadByStoreId(myStoreId.value);
@@ -521,13 +558,13 @@ async function applyTransferProcessRules(content: Record<string, any>) {
 }
 
 async function handleSalespersonTransferImport(payload: {
-  transferId: number;
   clinical_diagnose: string;
-  doctor_order: string;
-  drugList: any[];
-  dosage?: number;
-  dayDosage?: number;
   content?: Record<string, any>;
+  dayDosage?: number;
+  doctor_order: string;
+  dosage?: number;
+  drugList: any[];
+  transferId: number;
 }) {
   salespersonTransferPrescriptionId.value = payload.transferId;
   diagnosis.value = payload.clinical_diagnose || '';
@@ -559,37 +596,42 @@ async function handleSalespersonTransferImport(payload: {
 
 /** 悬浮窗触发导入：拉取补价后的传方数据并写入当前患者 */
 async function handleFloatTransferImport(payload: {
-  transferId: number;
   registerId: number;
+  transferId: number;
 }) {
   try {
-    const item = await prepareDoctorImportApi(payload.transferId, payload.registerId);
+    const item = await prepareDoctorImportApi(
+      payload.transferId,
+      payload.registerId,
+    );
     const drugList = parseSalespersonTransferDrugList(item);
-    if (!drugList.length) {
+    if (drugList.length === 0) {
       message.warning('传方药品为空');
       return;
     }
     const contentRaw = item.content ?? {};
-    const content = typeof contentRaw === 'string'
-      ? (() => {
-          try {
-            return JSON.parse(contentRaw);
-          } catch {
-            return {};
-          }
-        })()
-      : contentRaw;
+    const content =
+      typeof contentRaw === 'string'
+        ? (() => {
+            try {
+              return JSON.parse(contentRaw);
+            } catch {
+              return {};
+            }
+          })()
+        : contentRaw;
     await handleSalespersonTransferImport({
       transferId: payload.transferId,
-      clinical_diagnose: item.clinical_diagnose || content.clinical_diagnose || '',
+      clinical_diagnose:
+        item.clinical_diagnose || content.clinical_diagnose || '',
       doctor_order: item.doctor_order || content.doctor_order || '',
       drugList,
       dosage: content.dosage ?? item.dosage,
       dayDosage: content.day_dosage ?? item.day_dosage,
       content,
     });
-  } catch (e: any) {
-    message.error(e?.message || '导入失败');
+  } catch (error: any) {
+    message.error(error?.message || '导入失败');
   }
 }
 
@@ -625,8 +667,8 @@ async function tryAutoImportImageTransfer() {
       localStorage.setItem('doctorReception-id', String(registerId));
     }
     await handleFloatTransferImport({ transferId, registerId });
-  } catch (e: any) {
-    message.error(e?.message || '自动导入识图传方失败');
+  } catch (error: any) {
+    message.error(error?.message || '自动导入识图传方失败');
   }
 }
 
@@ -655,8 +697,8 @@ const chineseGrossMarginPercent = computed(() => {
 });
 
 function getChineseItemMargin(drug: {
-  price?: number | string;
   buy_price?: number | string;
+  price?: number | string;
 }) {
   if (!isSeeRateEnabled(seeRate.value)) {
     return null;
@@ -728,12 +770,12 @@ setInterval(getPatientListByReception, 30_000);
 
 // 药品分类（后端下发；失败时用本地兜底）
 const categories = ref([
-  {label: '中药', value: 1, icon: '', icon_text: ''},
-  {label: '中成(西)药', value: 2, icon: '', icon_text: ''},
-  {label: '保健食品', value: 3, icon: '', icon_text: ''},
-  {label: '产品服务包', value: 5, icon: '', icon_text: ''},
-  {label: '非药品', value: 6, icon: '', icon_text: ''},
-  {label: '医疗器械', value: 7, icon: '', icon_text: ''},
+  { label: '中药', value: 1, icon: '', icon_text: '' },
+  { label: '中成(西)药', value: 2, icon: '', icon_text: '' },
+  { label: '保健食品', value: 3, icon: '', icon_text: '' },
+  { label: '产品服务包', value: 5, icon: '', icon_text: '' },
+  { label: '非药品', value: 6, icon: '', icon_text: '' },
+  { label: '医疗器械', value: 7, icon: '', icon_text: '' },
 ]);
 /** 后端默认处方类型 */
 const prescriptionTypeDefault = ref(2);
@@ -756,12 +798,10 @@ const specialPrescriptionRecord = computed(
 );
 /** 导入卡片规格：SKU 名或单剂 */
 function resolveSpecialPrescriptionPurchaseLabel(
-  record?: { sku_id?: number; sku_name?: string } | null,
+  record?: null | { sku_id?: number; sku_name?: string },
 ) {
   if (!record) return '';
-  return Number(record.sku_id) > 0
-    ? (record.sku_name || 'SKU套餐')
-    : '单剂';
+  return Number(record.sku_id) > 0 ? record.sku_name || 'SKU套餐' : '单剂';
 }
 const specialPrescriptionPurchaseLabel = computed(() =>
   resolveSpecialPrescriptionPurchaseLabel(specialPrescriptionRecord.value),
@@ -770,7 +810,7 @@ const applyingSpecialPrescription = ref(false);
 /** 医生已导入的特色方 ID，仅 >0 时提交走特色方计价 */
 const appliedSpecialPrescriptionId = ref(0);
 /** apply 返回的 SKU/贴数套餐总价，用于底部合计 */
-const appliedSpecialPrescriptionExpectedTotal = ref<number | null>(null);
+const appliedSpecialPrescriptionExpectedTotal = ref<null | number>(null);
 function clearAppliedSpecialPrescription() {
   appliedSpecialPrescriptionId.value = 0;
   appliedSpecialPrescriptionExpectedTotal.value = null;
@@ -873,9 +913,9 @@ const totalProductCost = computed(() => {
   const expected = appliedSpecialPrescriptionExpectedTotal.value;
   let herbTotal = 0;
   if (
-    expected != null
-    && !Number.isNaN(Number(expected))
-    && Number(expected) > 0
+    expected != null &&
+    !Number.isNaN(Number(expected)) &&
+    Number(expected) > 0
   ) {
     herbTotal = Number(expected);
   } else if (currentDrugs.value.length === 0) {
@@ -970,6 +1010,8 @@ const canEndReception = computed(() => {
  */
 const selectPatient = async (patient: Patient, isUpdateTabType = true) => {
   clearAppliedSpecialPrescription();
+  // 先关掉默认方案自动回填，等草稿恢复判定完成再决定；避免竞态盖掉已填/草稿配置
+  processPresetAutoApply.value = false;
   selectPatientId.value = patient.id;
   receptionStatus.value = patient.status;
   if (isUpdateTabType === true) {
@@ -1000,11 +1042,13 @@ const selectPatient = async (patient: Patient, isUpdateTabType = true) => {
   // 先拉类型，再恢复草稿/默认 Tab
   const allowed = await loadPrescriptionTypeOptions(registerId);
   if (!allowed) {
-    message.error(prescriptionTypeDenyMessage.value || '当前门店未开通开方权限');
+    message.error(
+      prescriptionTypeDenyMessage.value || '当前门店未开通开方权限',
+    );
   }
   // 优先恢复完整草稿（诊断、医嘱、诊疗费、中药配置等）
+  // 优先级：修改(草稿) > 默认方案 > 旧逻辑；无草稿才放开自动应用默认方案
   const hasDraft = await restoreReceptionDraft(registerId);
-  // 有草稿则不再用默认煎药方案覆盖医生已填配置
   processPresetAutoApply.value = !hasDraft;
   if (!hasDraft) {
     const savedCategory = localStorage.getItem(`activeCategory${registerId}`);
@@ -1026,10 +1070,11 @@ const selectPatient = async (patient: Patient, isUpdateTabType = true) => {
   // 恢复的 Tab 若不在权限内，强制切到默认
   if (
     allowed &&
-    categories.value.length &&
+    categories.value.length > 0 &&
     !categories.value.some((c) => c.value === activeCategory.value)
   ) {
-    activeCategory.value = prescriptionTypeDefault.value || categories.value[0].value;
+    activeCategory.value =
+      prescriptionTypeDefault.value || categories.value[0].value;
   }
 
   // 如果恢复的处方类型是中药，检测并显示转诊提示
@@ -1132,7 +1177,10 @@ function saveReceptionDraft() {
       priceDiscount: priceDiscount.value,
     }),
   );
-  localStorage.setItem(`activeCategory${registerId}`, String(activeCategory.value));
+  localStorage.setItem(
+    `activeCategory${registerId}`,
+    String(activeCategory.value),
+  );
 }
 
 /** 恢复接诊草稿 */
@@ -1149,17 +1197,24 @@ async function restoreReceptionDraft(registerId: number) {
     medicalAdvice.value = draft.medicalAdvice ?? '';
     treatmentPrice.value = draft.treatmentPrice ?? 0;
     ruleType.value = Number(draft.ruleType ?? 1);
-    if (draft.packageMethodId != null) {
-      packageMethodId.value = Number(draft.packageMethodId);
-    }
-    if (draft.processRuleId != null) {
-      processRuleId.value = Number(draft.processRuleId);
-    }
-    if (draft.childProcessRuleId != null) {
-      childProcessRuleId.value = Number(draft.childProcessRuleId);
-    }
-    if (draft.processRuleNoteId != null) {
-      processRuleNoteId.value = Number(draft.processRuleNoteId);
+    if (ruleType.value === 1) {
+      packageMethodId.value =
+        draft.packageMethodId == null ? 2 : Number(draft.packageMethodId);
+      processRuleId.value = undefined;
+      childProcessRuleId.value = undefined;
+      processRuleNoteId.value = undefined;
+    } else {
+      packageMethodId.value = 2;
+      processRuleId.value =
+        draft.processRuleId == null ? undefined : Number(draft.processRuleId);
+      childProcessRuleId.value =
+        draft.childProcessRuleId == null
+          ? undefined
+          : Number(draft.childProcessRuleId);
+      processRuleNoteId.value =
+        draft.processRuleNoteId == null
+          ? undefined
+          : Number(draft.processRuleNoteId);
     }
     if (draft.dosage != null) dosage.value = draft.dosage;
     if (draft.dayDosage != null) dayDosage.value = draft.dayDosage;
@@ -1183,7 +1238,7 @@ function clearReceptionDraft(registerId?: number) {
   }
 }
 
-let draftSaveTimer: ReturnType<typeof setTimeout> | null = null;
+let draftSaveTimer: null | ReturnType<typeof setTimeout> = null;
 function debouncedSaveReceptionDraft() {
   if (draftSaveTimer) clearTimeout(draftSaveTimer);
   draftSaveTimer = setTimeout(() => saveReceptionDraft(), 300);
@@ -1194,7 +1249,10 @@ function debouncedSaveReceptionDraft() {
  * @param registerId 挂号ID
  * @param category 类型：1-中药，2-西药
  */
-const getStorageKey = (registerId: number | string | undefined, category: number) => {
+const getStorageKey = (
+  registerId: number | string | undefined,
+  category: number,
+) => {
   return `prescriptionData_${category}_${registerId}`;
 };
 
@@ -1250,7 +1308,11 @@ function snapshotDrugOrigins(drugs: any[]) {
 function applyCartPriceDiscount(discount: number) {
   priceDiscount.value = discount;
   const scope = priceAdjustConfig.value.order_price_adjust_scope;
-  currentDrugs.value = applyRatioDrugs(snapshotDrugOrigins(currentDrugs.value), discount, scope);
+  currentDrugs.value = applyRatioDrugs(
+    snapshotDrugOrigins(currentDrugs.value),
+    discount,
+    scope,
+  );
   saveToLocalStorage();
   message.success(discount === 100 ? '已清除价格浮动' : '价格已更新');
 }
@@ -1259,11 +1321,13 @@ function clearCartPriceDiscount() {
   applyCartPriceDiscount(100);
 }
 
-const priceDiscountLabel = computed(() => formatPriceDiscountLabel(priceDiscount.value));
+const priceDiscountLabel = computed(() =>
+  formatPriceDiscountLabel(priceDiscount.value),
+);
 
 function openOrderPriceAdjust() {
   if (guardSpecialPrescriptionCartEdit()) return;
-  if (!priceAdjustEnabled.value || !currentDrugs.value.length) return;
+  if (!priceAdjustEnabled.value || currentDrugs.value.length === 0) return;
   currentDrugs.value = snapshotDrugOrigins(currentDrugs.value);
   const discount = Number(priceDiscount.value);
   priceAdjustDrawerApi.setData({
@@ -1271,8 +1335,11 @@ function openOrderPriceAdjust() {
     priceDiscount: discount,
     price_discount: discount,
     previewOriginPrice: 100,
-    quickOptions: normalizeQuickOptions(priceAdjustConfig.value.order_discount_quick_options),
-    onApplyPreSend: (payload: { priceDiscount: number }) => applyCartPriceDiscount(payload.priceDiscount),
+    quickOptions: normalizeQuickOptions(
+      priceAdjustConfig.value.order_discount_quick_options,
+    ),
+    onApplyPreSend: (payload: { priceDiscount: number }) =>
+      applyCartPriceDiscount(payload.priceDiscount),
   });
   priceAdjustDrawerApi.open();
 }
@@ -1309,7 +1376,9 @@ const aiRxGenerationId = ref(0);
  */
 const getCurrentDrugs = () => {
   currentDrugs.value = JSON.parse(
-    localStorage.getItem(getStorageKey(getRegisterId(), activeCategory.value)) || '[]',
+    localStorage.getItem(
+      getStorageKey(getRegisterId(), activeCategory.value),
+    ) || '[]',
   );
   loadExcipientsFromLocalStorage();
 };
@@ -1317,7 +1386,7 @@ getCurrentDrugs();
 
 /** 中药与当前门店价不一致的行，key 为药品 id */
 const staleChinesePriceMap = ref<Record<string, any>>({});
-let chinesePriceDiffTimer: ReturnType<typeof setTimeout> | null = null;
+let chinesePriceDiffTimer: null | ReturnType<typeof setTimeout> = null;
 
 /** 药品行在过期价字典里的 key */
 function chineseDrugPriceKey(drug: any) {
@@ -1329,7 +1398,11 @@ function chineseDrugPriceKey(drug: any) {
  * 为什么：保留原价填入后，接诊页要能看出哪些药还能更新到最新门店价
  */
 async function refreshChinesePriceDiff() {
-  if (activeCategory.value !== 1 || isSpecialPrescriptionCartLocked.value || currentDrugs.value.length === 0) {
+  if (
+    activeCategory.value !== 1 ||
+    isSpecialPrescriptionCartLocked.value ||
+    currentDrugs.value.length === 0
+  ) {
     staleChinesePriceMap.value = {};
     return;
   }
@@ -1366,13 +1439,20 @@ const chinesePriceSignature = computed(() => {
     return '';
   }
   return currentDrugs.value
-    .map((drug: any) => `${drug.id}:${drug.origin_price ?? drug.price}:${drug.origin_buy_price ?? drug.buy_price}`)
+    .map(
+      (drug: any) =>
+        `${drug.id}:${drug.origin_price ?? drug.price}:${drug.origin_buy_price ?? drug.buy_price}`,
+    )
     .join('|');
 });
 
-watch(chinesePriceSignature, () => {
-  scheduleChinesePriceDiff();
-}, { immediate: true });
+watch(
+  chinesePriceSignature,
+  () => {
+    scheduleChinesePriceDiff();
+  },
+  { immediate: true },
+);
 
 /**
  * 把指定差异行改成最新供货价和零售价
@@ -1381,8 +1461,15 @@ watch(chinesePriceSignature, () => {
 function commitLatestChinesePrices(items: any[]) {
   applyLatestPrices(currentDrugs.value, items);
   if (Number(priceDiscount.value) !== 100) {
-    const scope = priceAdjustConfig.value.order_price_adjust_scope === 'both' ? 'both' : 'sale_only';
-    currentDrugs.value = applyRatioDrugs(currentDrugs.value, priceDiscount.value, scope);
+    const scope =
+      priceAdjustConfig.value.order_price_adjust_scope === 'both'
+        ? 'both'
+        : 'sale_only';
+    currentDrugs.value = applyRatioDrugs(
+      currentDrugs.value,
+      priceDiscount.value,
+      scope,
+    );
   }
   updateLocalStorage();
   scheduleChinesePriceDiff();
@@ -1440,7 +1527,7 @@ const checkData = ref([]);
  */
 const checkChineseMedicineConflict = () => {
   if (activeCategory.value === 2) {
-    // eslint-disable-next-line no-use-before-define
+     
     sendPrescription();
     return;
   }
@@ -1448,9 +1535,9 @@ const checkChineseMedicineConflict = () => {
     message: '正在检查药物相冲',
     duration: 1,
     description: '正在检查药物相冲，请稍等...',
-  })
+  });
   const names = currentDrugs.value.map((item) => item.drug_name);
-  checkChineseMedicineConflictApi({names: names}).then((res) => {
+  checkChineseMedicineConflictApi({ names }).then((res) => {
     if (res.is_exist === true) {
       checkData.value.message = res.message;
       doctorSecondSignModal.value = true;
@@ -1459,13 +1546,13 @@ const checkChineseMedicineConflict = () => {
         message: '检查成功',
         duration: 3,
         description: '暂无相冲药品',
-      })
-      // eslint-disable-next-line no-use-before-define
+      });
+       
       sendPrescription();
     }
-  })
+  });
   return;
-}
+};
 /**
  * 发送处方
  */
@@ -1505,15 +1592,16 @@ const sendPrescription = () => {
     // 当前处方中的药品列表
     drugs: currentDrugs.value,
     // 中药辅料（type=8），不进药味表
-    excipients: activeCategory.value === 1
-      ? currentExcipients.value.map((e: any) => ({
-          id: e.id,
-          drug_id: e.id,
-          number: e.number || e.select_number || 1,
-          price: e.price,
-          buy_price: e.buy_price,
-        }))
-      : [],
+    excipients:
+      activeCategory.value === 1
+        ? currentExcipients.value.map((e: any) => ({
+            id: e.id,
+            drug_id: e.id,
+            number: e.number || e.select_number || 1,
+            price: e.price,
+            buy_price: e.buy_price,
+          }))
+        : [],
     // 诊断信息
     diagnosis: diagnosis.value,
     // 医嘱信息
@@ -1548,84 +1636,95 @@ const sendPrescription = () => {
     day_dosage: dayDosage.value,
     // 是否二次签名
     doctor_second_sign: doctorSecondSign.value,
-    salesperson_transfer_prescription_id: salespersonTransferPrescriptionId.value || undefined,
+    salesperson_transfer_prescription_id:
+      salespersonTransferPrescriptionId.value || undefined,
     price_discount: priceDiscount.value,
     special_prescription_id: appliedSpecialPrescriptionId.value || 0,
     // P4：AI 导入来源生成 ID，后端据此统计采纳率/修改率（非 AI 导入时为 undefined 不传）
     ai_generation_id: aiRxGenerationId.value || undefined,
-  }).then(async (res) => {
-    message.success('处方已发送');
-    // 处方已提交，重置 AI 关联，避免下一张处方误关联
-    aiRxGenerationId.value = 0;
-    // 先记录本次发送结果（下面会清空诊断/购物车，成功页要用的数据在这里先落住）
-    sentPrescriptionInfo.value = {
-      order_id: Number(res?.order_id || 0),
-      order_no: res?.order_no || '',
-      total_pay_price: res?.total_pay_price || '',
-      is_pay: Number(res?.is_pay || 0),
-      patient_name: activePatient.value?.name || '',
-      diagnosis: diagnosis.value,
-    };
-    // 有 VIP 时同步保存病历（诊断/医嘱已与处方同源）
-    if (canUseMedicalRecord.value) {
-      try {
-        const registerId = Number(localStorage.getItem('doctorReception-id') || 0);
-        const payload = medicalRecordPanelRef.value?.getPayload?.() || {
-          diagnosis: diagnosis.value,
-          doctor_order: medicalAdvice.value,
-        };
-        await saveMedicalRecord({
-          ...payload,
-          register_id: registerId,
-          store_id: Number(myStoreId.value || 0),
-          user_patient_id: Number(
-            activePatient.value?.user_patient?.id ||
-              activePatient.value?.user_patient_id ||
-              0,
-          ),
-          diagnosis: diagnosis.value,
-          doctor_order: medicalAdvice.value,
-          medicalAdvice: medicalAdvice.value,
-        });
-      } catch (e) {
-        console.error('同步保存病历失败', e);
+  })
+    .then(async (res) => {
+      message.success('处方已发送');
+      // 处方已提交，重置 AI 关联，避免下一张处方误关联
+      aiRxGenerationId.value = 0;
+      // 先记录本次发送结果（下面会清空诊断/购物车，成功页要用的数据在这里先落住）
+      sentPrescriptionInfo.value = {
+        order_id: Number(res?.order_id || 0),
+        order_no: res?.order_no || '',
+        total_pay_price: res?.total_pay_price || '',
+        is_pay: Number(res?.is_pay || 0),
+        patient_name: activePatient.value?.name || '',
+        diagnosis: diagnosis.value,
+      };
+      // 有 VIP 时同步保存病历（诊断/医嘱已与处方同源）
+      if (canUseMedicalRecord.value) {
+        try {
+          const registerId = Number(
+            localStorage.getItem('doctorReception-id') || 0,
+          );
+          const payload = medicalRecordPanelRef.value?.getPayload?.() || {
+            diagnosis: diagnosis.value,
+            doctor_order: medicalAdvice.value,
+          };
+          await saveMedicalRecord({
+            ...payload,
+            register_id: registerId,
+            store_id: Number(myStoreId.value || 0),
+            user_patient_id: Number(
+              activePatient.value?.user_patient?.id ||
+                activePatient.value?.user_patient_id ||
+                0,
+            ),
+            diagnosis: diagnosis.value,
+            doctor_order: medicalAdvice.value,
+            medicalAdvice: medicalAdvice.value,
+          });
+        } catch (error) {
+          console.error('同步保存病历失败', error);
+        }
       }
-    }
 
-    // 检查是否需要转诊
-    const needTransfer = res?.result?.need_transfer || res?.data?.need_transfer || res?.need_transfer;
-    const transferPrescriptionId = res?.result?.transfer_prescription_id || res?.data?.transfer_prescription_id || res?.transfer_prescription_id;
+      // 检查是否需要转诊
+      const needTransfer =
+        res?.result?.need_transfer ||
+        res?.data?.need_transfer ||
+        res?.need_transfer;
+      const transferPrescriptionId =
+        res?.result?.transfer_prescription_id ||
+        res?.data?.transfer_prescription_id ||
+        res?.transfer_prescription_id;
 
-    if (needTransfer && transferPrescriptionId) {
-      // 如果需要转诊，获取转诊信息
-      fetchTransferPrescription(transferPrescriptionId);
-      message.info('该处方需要转诊，请等待中医诊所确认');
-    } else {
-      // 不需要转诊，清空转诊信息
-      transferPrescription.value = null;
-    }
+      if (needTransfer && transferPrescriptionId) {
+        // 如果需要转诊，获取转诊信息
+        fetchTransferPrescription(transferPrescriptionId);
+        message.info('该处方需要转诊，请等待中医诊所确认');
+      } else {
+        // 不需要转诊，清空转诊信息
+        transferPrescription.value = null;
+      }
 
-    // 清空当前数据
-    clearPrescriptionCart(false);
-    clearReceptionDraft(getRegisterId());
-    // 转诊单要等中医诊所确认，留在开方工作台展示转方卡；
-    // 普通发送进入成功页（tabType=3）：摘要 + 代付入口，不自动打开处方记录抽屉
-    tabType.value = needTransfer && transferPrescriptionId ? 2 : 3;
-    salespersonTransferPrescriptionId.value = 0;
-    checkSalespersonTransfer();
+      // 清空当前数据
+      clearPrescriptionCart(false);
+      clearReceptionDraft(getRegisterId());
+      // 转诊单要等中医诊所确认，留在开方工作台展示转方卡；
+      // 普通发送进入成功页（tabType=3）：摘要 + 代付入口，不自动打开处方记录抽屉
+      tabType.value = needTransfer && transferPrescriptionId ? 2 : 3;
+      salespersonTransferPrescriptionId.value = 0;
+      checkSalespersonTransfer();
 
-    // 刷新患者信息
-    if (selectPatientId.value) {
-      getPatientItem(selectPatientId.value).then((value) => {
-        patientInfo.value = value;
-        userPatientHealthInquiry.value = value.user_patient_health_inquiry;
-        prescriptionList.value = value.prescription;
-      });
-    }
-  }).catch((error) => {
-    console.error('发送处方失败:', error);
-    message.error('发送处方失败，请重试');
-  });
+      // 刷新患者信息
+      if (selectPatientId.value) {
+        getPatientItem(selectPatientId.value).then((value) => {
+          patientInfo.value = value;
+          userPatientHealthInquiry.value = value.user_patient_health_inquiry;
+          prescriptionList.value = value.prescription;
+        });
+      }
+    })
+    .catch((error) => {
+      console.error('发送处方失败:', error);
+      message.error('发送处方失败，请重试');
+    });
 };
 
 // 进入处方界面
@@ -1658,7 +1757,6 @@ watch(
   },
 );
 
-
 const [WesternDrugModal, WesternDrugModalApi] = useVbenModal({
   connectedComponent: WesternModal,
 });
@@ -1672,7 +1770,10 @@ const [SimpleProductModalComponent, SimpleProductModalApi] = useVbenModal({
  */
 function appendCommaText(base: string, add: string) {
   if (!add) return base || '';
-  const parts = (base || '').split('，').map((s) => s.trim()).filter(Boolean);
+  const parts = (base || '')
+    .split('，')
+    .map((s) => s.trim())
+    .filter(Boolean);
   if (parts.includes(add)) return parts.join('，');
   parts.push(add);
   return parts.join('，');
@@ -1696,7 +1797,6 @@ const [PrescriptionDetailModal, PrescriptionDetailModalApi] = useVbenModal({
   connectedComponent: PrescriptionDetail,
 });
 
-
 const [RefusalOfTreatmentModals, RefusalOfTreatmentModalApi] = useVbenModal({
   connectedComponent: RefusalOfTreatmentModal,
 });
@@ -1712,17 +1812,20 @@ const [ClaimQrcodeModals, ClaimQrcodeModalApi] = useVbenModal({
 });
 
 /** 医生创建就诊人记录弹窗 */
-const [DoctorCreatedPatientModals, DoctorCreatedPatientModalApi] = useVbenModal({
-  connectedComponent: DoctorCreatedPatientModal,
-});
+const [DoctorCreatedPatientModals, DoctorCreatedPatientModalApi] = useVbenModal(
+  {
+    connectedComponent: DoctorCreatedPatientModal,
+  },
+);
 
 /** 医生代支付码弹窗 */
 const [ProxyPayQrcodeModals, ProxyPayQrcodeModalApi] = useVbenModal({
   connectedComponent: ProxyPayQrcodeModal,
 });
-const [ApplyPublicAccountPayModals, ApplyPublicAccountPayModalApi] = useVbenModal({
-  connectedComponent: ApplyPublicAccountPayModal,
-});
+const [ApplyPublicAccountPayModals, ApplyPublicAccountPayModalApi] =
+  useVbenModal({
+    connectedComponent: ApplyPublicAccountPayModal,
+  });
 
 // ==================== 常用方弹窗 ====================
 const [CommonPrescriptionModals, CommonPrescriptionModalApi] = useVbenModal({
@@ -1762,9 +1865,9 @@ function openCommonPrescriptionModal() {
 function openCreateUserPatientModal() {
   CreateUserPatientModalApi.setData({
     onSuccess: (res: {
-      user_patient_id?: number;
-      register_id?: number;
       is_pay?: number;
+      register_id?: number;
+      user_patient_id?: number;
     }) => {
       const isPay = Number(res?.is_pay || 0) === 1;
       const registerId = Number(res?.register_id || 0);
@@ -1775,9 +1878,7 @@ function openCreateUserPatientModal() {
         getPatientList({ type: listType.value })
           .then((list) => {
             patients.value = Array.isArray(list) ? list : [];
-            const hit = patients.value.find(
-              (p) => Number(p.id) === registerId,
-            );
+            const hit = patients.value.find((p) => Number(p.id) === registerId);
             if (hit) {
               selectPatient(hit);
             } else {
@@ -1785,8 +1886,8 @@ function openCreateUserPatientModal() {
             }
             loadDoctorCreatedRecordTotal();
           })
-          .catch((e: any) => {
-            message.error(e?.message || '刷新患者列表失败');
+          .catch((error: any) => {
+            message.error(error?.message || '刷新患者列表失败');
           });
         return;
       }
@@ -1798,6 +1899,8 @@ function openCreateUserPatientModal() {
       refreshPatientList();
       loadDoctorCreatedRecordTotal();
     },
+    // 去重弹窗选择已有：与创建记录接诊同一分流
+    onSelectExisting: handleDoctorCreatedPatientStart,
   });
   CreateUserPatientModalApi.open();
 }
@@ -1805,7 +1908,9 @@ function openCreateUserPatientModal() {
 /**
  * 处理「创建记录」选择接诊后的分流：可接诊进列表；未支付弹认领码
  */
-async function handleDoctorCreatedPatientStart(res: DoctorCreatedPatientStartResult) {
+async function handleDoctorCreatedPatientStart(
+  res: DoctorCreatedPatientStartResult,
+) {
   const registerId = Number(res?.register_id || 0);
   const userPatientId = Number(res?.user_patient_id || 0);
   if (res?.action === 'claim_qrcode' && userPatientId > 0) {
@@ -1828,8 +1933,8 @@ async function handleDoctorCreatedPatientStart(res: DoctorCreatedPatientStartRes
     } else {
       message.warning('已创建挂号，请在列表中手动选择');
     }
-  } catch (e: any) {
-    message.error(e?.message || '刷新患者列表失败');
+  } catch (error: any) {
+    message.error(error?.message || '刷新患者列表失败');
   }
 }
 
@@ -1853,7 +1958,9 @@ const isActivePatientUnclaimed = computed(() => {
 
 /** 打开就诊人认领二维码（优先当前选中患者） */
 function openClaimQrcodeModal() {
-  const upId = Number(activePatient.value?.id || patientInfo.value?.user_patient_id || 0);
+  const upId = Number(
+    activePatient.value?.id || patientInfo.value?.user_patient_id || 0,
+  );
   ClaimQrcodeModalApi.setData({ user_patient_id: upId || undefined });
   ClaimQrcodeModalApi.open();
 }
@@ -1873,10 +1980,10 @@ function openProxyPayQrcode(orderId: number) {
  * 开方成功页 / 处方记录抽屉共用，避免两处条件分叉
  */
 function openApplyPublicAccountPayForOrder(payload: {
+  onSuccess?: (res?: any) => Promise<void> | void;
   order_id: number;
   order_no?: string;
-  total_pay_price?: string | number;
-  onSuccess?: (res?: any) => void | Promise<void>;
+  total_pay_price?: number | string;
 }) {
   const oid = Number(payload.order_id || 0);
   if (!oid) {
@@ -1934,7 +2041,10 @@ function confirmDailyPublicAccountPayForOrder(payload: {
               ? '订单已标记为已支付，将计入当日日汇总'
               : '已提交公账支付申请',
           );
-          if (sentPrescriptionInfo.value && Number(sentPrescriptionInfo.value.order_id) === oid) {
+          if (
+            sentPrescriptionInfo.value &&
+            Number(sentPrescriptionInfo.value.order_id) === oid
+          ) {
             if (res?.bill_mode === 'daily') {
               sentPrescriptionInfo.value = {
                 ...sentPrescriptionInfo.value,
@@ -1943,9 +2053,9 @@ function confirmDailyPublicAccountPayForOrder(payload: {
             }
           }
           resolve();
-        } catch (e) {
-          reject(e);
-          throw e;
+        } catch (error) {
+          reject(error);
+          throw error;
         } finally {
           publicAccountPaySubmitting.value = false;
         }
@@ -1963,9 +2073,9 @@ function confirmDailyPublicAccountPay() {
   void confirmDailyPublicAccountPayForOrder({
     order_id: Number(info.order_id || 0),
     order_no: info.order_no,
-  }).catch((e) => {
-    if (e?.message !== 'cancel') {
-      console.error(e);
+  }).catch((error) => {
+    if (error?.message !== 'cancel') {
+      console.error(error);
     }
   });
 }
@@ -1997,11 +2107,16 @@ function openGoldenFormulaModal() {
 /**
  * 金方确认导入：复用 AI 出方写入购物车逻辑
  */
-function handleImportGoldenFormula(payload: { rows?: any[]; formulaName?: string }) {
+function handleImportGoldenFormula(payload: {
+  formulaName?: string;
+  rows?: any[];
+}) {
   handleImportAiPrescription({ rows: payload?.rows || [] });
 }
 
-const aiPrescriptionDrawerRef = ref<InstanceType<typeof AiPrescriptionDrawer> | null>(null);
+const aiPrescriptionDrawerRef = ref<InstanceType<
+  typeof AiPrescriptionDrawer
+> | null>(null);
 const imageOcrDrawerRef = ref<InstanceType<typeof ImageOcrDrawer> | null>(null);
 
 /**
@@ -2042,16 +2157,16 @@ function openImageOcrDrawer() {
  * 识图确认导入：写入诊断 + 医嘱 + 药品（复用 AI 出方导入结构）
  */
 async function handleImportImageOcr(payload: {
-  medical_advice?: string;
-  clinical_diagnose?: string;
-  rows?: any[];
-  dosage?: number;
-  day_dosage?: number;
-  unmatched?: any[];
-  rule_type?: number;
-  process_rule_id?: number;
   child_process_rule_id?: number;
+  clinical_diagnose?: string;
+  day_dosage?: number;
+  dosage?: number;
+  medical_advice?: string;
+  process_rule_id?: number;
   process_rule_note_id?: number;
+  rows?: any[];
+  rule_type?: number;
+  unmatched?: any[];
 }) {
   if (activeCategory.value !== 1) {
     tabChange(1);
@@ -2162,18 +2277,18 @@ function handleSyncAiMedicalRecord(partial: Record<string, any>) {
  * 中药会同步剂数/每日次数，并按 usage 匹配先煎后下 way_id
  */
 async function handleImportAiPrescription(payload: {
-  rows?: any[];
-  dosage?: number;
-  day_dosage?: number;
-  rule_type?: number;
-  process_rule_id?: number;
   child_process_rule_id?: number;
-  process_rule_note_id?: number;
+  day_dosage?: number;
+  dosage?: number;
   generation_id?: number;
+  process_rule_id?: number;
+  process_rule_note_id?: number;
+  rows?: any[];
+  rule_type?: number;
 }) {
   if (guardSpecialPrescriptionCartEdit()) return;
   const list = Array.isArray(payload?.rows) ? payload.rows : [];
-  if (!list.length) {
+  if (list.length === 0) {
     message.warning('没有可导入的药品');
     return;
   }
@@ -2214,7 +2329,7 @@ async function handleImportAiPrescription(payload: {
       const drugId = Number(c.drug_id || 0);
       if (!drugId) continue;
       if (next.find((item: any) => Number(item.id) === drugId)) continue;
-      const doseNum = parseFloat(row.dose);
+      const doseNum = Number.parseFloat(row.dose);
       const qty = !Number.isNaN(doseNum) && doseNum > 0 ? doseNum : 1;
       const drug = c.drug || {};
       if (activeCategory.value === 1) {
@@ -2224,7 +2339,7 @@ async function handleImportAiPrescription(payload: {
           id: drugId,
           drug_name: c.drug_name || row.ai_name,
           number: qty,
-          price: parseFloat(c.price) || 0,
+          price: Number.parseFloat(c.price) || 0,
           way_id: wayId,
           use_ways: drugUseWay.value.find((item: any) => item.id === wayId),
           select_number: 1,
@@ -2239,7 +2354,7 @@ async function handleImportAiPrescription(payload: {
           drug_name: c.drug_name || drug.drug_name || row.ai_name,
           number: qty,
           select_number: qty,
-          price: parseFloat(c.price) || 0,
+          price: Number.parseFloat(c.price) || 0,
           image: c.image || drug.image || '',
           instruction: drug.instruction || '',
           time_id: c.time_id || drug.time_id || 0,
@@ -2270,12 +2385,12 @@ async function handleImportAiPrescription(payload: {
         drug_name: c.drug_name || row.ai_name,
         number: 1,
         select_number: 1,
-        price: parseFloat(c.price) || 0,
+        price: Number.parseFloat(c.price) || 0,
         image: c.image || '',
         type: activeCategory.value,
       });
     }
-    if (!next.length) {
+    if (next.length === 0) {
       message.warning('没有可导入的药品');
       return;
     }
@@ -2285,7 +2400,8 @@ async function handleImportAiPrescription(payload: {
     if (activeCategory.value === 1) {
       // 中药剂数/每日次数：有值用返回值，否则保留处方页默认 7/2
       dosage.value = Number(payload.dosage) > 0 ? Number(payload.dosage) : 7;
-      dayDosage.value = Number(payload.day_dosage) > 0 ? Number(payload.day_dosage) : 2;
+      dayDosage.value =
+        Number(payload.day_dosage) > 0 ? Number(payload.day_dosage) : 2;
       await applyAiProcessRules();
     }
     updateLocalStorage();
@@ -2387,21 +2503,33 @@ async function handleSelectCommonPrescription(
       // 加载煎法选项
       await loadProcessRuleData(prescription.process_rule_id, 0);
     }
-    if (prescription.child_process_rule_id && prescription.child_process_rule_id > 0) {
+    if (
+      prescription.child_process_rule_id &&
+      prescription.child_process_rule_id > 0
+    ) {
       childProcessRuleId.value = prescription.child_process_rule_id;
       // 加载备注选项
       await loadProcessRuleData(0, prescription.child_process_rule_id);
     }
-    if (prescription.process_rule_note_id && prescription.process_rule_note_id > 0) {
+    if (
+      prescription.process_rule_note_id &&
+      prescription.process_rule_note_id > 0
+    ) {
       processRuleNoteId.value = prescription.process_rule_note_id;
     }
   }
 
   // 更新诊断和医嘱 - 允许空字符串覆盖
-  if (prescription.clinical_diagnose !== undefined && prescription.clinical_diagnose !== null) {
+  if (
+    prescription.clinical_diagnose !== undefined &&
+    prescription.clinical_diagnose !== null
+  ) {
     diagnosis.value = prescription.clinical_diagnose;
   }
-  if (prescription.doctor_order !== undefined && prescription.doctor_order !== null) {
+  if (
+    prescription.doctor_order !== undefined &&
+    prescription.doctor_order !== null
+  ) {
     medicalAdvice.value = detailDoctorOrderToText(prescription.doctor_order);
   }
 
@@ -2454,9 +2582,12 @@ async function handleApplySpecialPrescription(switchToPrescription = false) {
       { skipPriceConfirm: true },
     );
 
-    appliedSpecialPrescriptionId.value = Number(res.special_prescription_id) || 0;
+    appliedSpecialPrescriptionId.value =
+      Number(res.special_prescription_id) || 0;
     appliedSpecialPrescriptionExpectedTotal.value =
-      res.expected_total_price != null ? Number(res.expected_total_price) : null;
+      res.expected_total_price == null
+        ? null
+        : Number(res.expected_total_price);
 
     if (selectPatientId.value) {
       const value = await getPatientItem(selectPatientId.value);
@@ -2535,10 +2666,18 @@ const saveAsCommonPrescription = async () => {
         dosage: dosage.value,
         day_dosage: dayDosage.value,
         rule_type: ruleType.value,
-        package_method_id: ruleType.value === 1 ? packageMethodId.value : undefined,
-        process_rule_id: ruleType.value === 2 ? (processRuleId.value || undefined) : undefined,
-        child_process_rule_id: ruleType.value === 2 ? (childProcessRuleId.value || undefined) : undefined,
-        process_rule_note_id: ruleType.value === 2 ? (processRuleNoteId.value || undefined) : undefined,
+        package_method_id:
+          ruleType.value === 1 ? packageMethodId.value : undefined,
+        process_rule_id:
+          ruleType.value === 2 ? processRuleId.value || undefined : undefined,
+        child_process_rule_id:
+          ruleType.value === 2
+            ? childProcessRuleId.value || undefined
+            : undefined,
+        process_rule_note_id:
+          ruleType.value === 2
+            ? processRuleNoteId.value || undefined
+            : undefined,
       });
     } else {
       // 西药处方 - 构建药品详细信息数组
@@ -2600,13 +2739,13 @@ const openWesternModal = () => {
     SimpleProductModalApi.open();
   } else {
     // 使用原有的西药/中药模态框
-  WesternDrugModalApi.setData({
-    values: activeCategory.value,
-    activePatient_id: getRegisterId(), // 与主页面 storage key 保持一致，使用挂号 ID
-    getCurrentDrugs,
-    storagePrefix: '', // 接诊页面不加前缀
-  });
-  WesternDrugModalApi.open();
+    WesternDrugModalApi.setData({
+      values: activeCategory.value,
+      activePatient_id: getRegisterId(), // 与主页面 storage key 保持一致，使用挂号 ID
+      getCurrentDrugs,
+      storagePrefix: '', // 接诊页面不加前缀
+    });
+    WesternDrugModalApi.open();
   }
 };
 const openPrescriptionDetail = (values) => {
@@ -2649,7 +2788,6 @@ function tabChange(id) {
   focusActiveCategoryTab();
 }
 
-
 /**
  * 检测并显示转诊提示
  * @description 当切换到中药处方时，如果当前诊所为西医诊所，显示转诊提示
@@ -2693,8 +2831,8 @@ async function checkAndShowTransferTip() {
 
       infoModalApi.setState({ title: '转诊提示', width: 500 });
       infoModalApi.setData({
-          content: `检测到当前诊所为西医诊所，本次处方开具后自动转接到【${storeName}】的【${doctorName}】的在线复诊中`,
-        });
+        content: `检测到当前诊所为西医诊所，本次处方开具后自动转接到【${storeName}】的【${doctorName}】的在线复诊中`,
+      });
       infoModalApi.open();
 
       // 更新上次提醒时间戳
@@ -2721,7 +2859,7 @@ function reception() {
 const updateReceptionStatus = () => {
   receptionStatus.value = 0;
   tabType.value = 0;
-}
+};
 
 /**
  * 拒诊
@@ -2729,7 +2867,7 @@ const updateReceptionStatus = () => {
 function refuseReception() {
   RefusalOfTreatmentModalApi.setData({
     values: {
-      register_id: localStorage.getItem(`doctorReception-id`)
+      register_id: localStorage.getItem(`doctorReception-id`),
     },
     getPatientListByReception,
     updateReceptionStatus,
@@ -2737,7 +2875,7 @@ function refuseReception() {
 
     // let patient = patients.
     // selectPatient(localStorage.getItem(`doctorReception-id`));
-  })
+  });
 
   RefusalOfTreatmentModalApi.open();
 }
@@ -2857,12 +2995,12 @@ function parsePrescriptionDetailContent(detail: any): Record<string, any> {
   return c && typeof c === 'object' ? c : {};
 }
 
-function mapWestRepiceToProduct(recipe: any): Record<string, any> | null {
+function mapWestRepiceToProduct(recipe: any): null | Record<string, any> {
   if (!recipe) return null;
   let drugObj: Record<string, any> = {};
   try {
     const raw = recipe.content;
-    drugObj = typeof raw === 'string' ? JSON.parse(raw) : (raw || {});
+    drugObj = typeof raw === 'string' ? JSON.parse(raw) : raw || {};
   } catch {
     return null;
   }
@@ -2895,7 +3033,8 @@ function mapWestRepiceToProduct(recipe: any): Record<string, any> | null {
     use_frequency: drugUseFrequency.value.find(
       (item: any) => item.id === freqId,
     ),
-    unit: drugObj.unit || drugUnit.value.find((item: any) => item.id === unitId),
+    unit:
+      drugObj.unit || drugUnit.value.find((item: any) => item.id === unitId),
     price: Number(drugObj.sell_price ?? drugObj.price ?? 0),
     way_id: drugObj.way_id,
     use_ways: drugUseWay.value.find((item: any) => item.id === drugObj.way_id),
@@ -2913,7 +3052,9 @@ function mapWestRepiceToProduct(recipe: any): Record<string, any> | null {
 /**
  * 将历史处方详情写入当前接诊编辑区（不提交）
  */
-async function applyHistoricalPrescriptionDetail(detail: any): Promise<boolean> {
+async function applyHistoricalPrescriptionDetail(
+  detail: any,
+): Promise<boolean> {
   const content = parsePrescriptionDetailContent(detail);
   const pt = Number(detail.prescription_type);
   const supported = [1, 2, 3, 5, 6, 7];
@@ -2947,7 +3088,7 @@ async function applyHistoricalPrescriptionDetail(detail: any): Promise<boolean>
     let rows: any[] = [];
     try {
       const raw = rep0.content;
-      rows = typeof raw === 'string' ? JSON.parse(raw) : (raw || []);
+      rows = typeof raw === 'string' ? JSON.parse(raw) : raw || [];
     } catch {
       message.error('解析中药处方失败');
       return false;
@@ -2960,8 +3101,7 @@ async function applyHistoricalPrescriptionDetail(detail: any): Promise<boolean>
     const mappedRows = rows.map((d: any) => {
       const drugId = Number(d.drug_id ?? d.id);
       // 落库煎法在 ChineseMedicineModel.order，详情可能带 use_way / useWay
-      const wayId =
-        d.way_id ?? d.use_way?.id ?? d.useWay?.id ?? d.order;
+      const wayId = d.way_id ?? d.use_way?.id ?? d.useWay?.id ?? d.order;
       return {
         index_id: d.id ?? drugId,
         id: drugId,
@@ -2979,7 +3119,8 @@ async function applyHistoricalPrescriptionDetail(detail: any): Promise<boolean>
         use_frequency: drugUseFrequency.value.find(
           (item: any) => item.id === d.frequency_id,
         ),
-        unit: d.unit || drugUnit.value.find((item: any) => item.id === d.unit_id),
+        unit:
+          d.unit || drugUnit.value.find((item: any) => item.id === d.unit_id),
         time_id: d.time_id,
         type_id: d.type_id,
         frequency_id: d.frequency_id,
@@ -2999,7 +3140,9 @@ async function applyHistoricalPrescriptionDetail(detail: any): Promise<boolean>
     // 辅料：优先 recipe.excipients，否则处方顶层；无则清空防残留
     const rawExcipients = Array.isArray(rep0.excipients)
       ? rep0.excipients
-      : (Array.isArray(content.excipients) ? content.excipients : []);
+      : Array.isArray(content.excipients)
+        ? content.excipients
+        : [];
     const mappedExcipients = rawExcipients
       .map((ex: any) => {
         const drugId = Number(ex.drug_id ?? ex.id);
@@ -3062,11 +3205,13 @@ async function applyHistoricalPrescriptionDetail(detail: any): Promise<boolean>
     currentExcipients.value = [];
   }
 
-  diagnosis.value =
-    detail.clinical_diagnose ?? content.clinical_diagnose ?? '';
-  medicalAdvice.value = content.doctor_order ?? detailDoctorOrderToText(detail.doctor_order) ?? '';
+  diagnosis.value = detail.clinical_diagnose ?? content.clinical_diagnose ?? '';
+  medicalAdvice.value =
+    content.doctor_order ?? detailDoctorOrderToText(detail.doctor_order) ?? '';
   category.value =
-    detail.category === 2 || detail.category === '2' || content.category === '医保'
+    detail.category === 2 ||
+    detail.category === '2' ||
+    content.category === '医保'
       ? 2
       : 1;
   doctorSecondSign.value = 0;
@@ -3096,8 +3241,8 @@ async function reusePrescriptionFromList(prescriptionId: number) {
         tabType.value = 2;
         message.success('已复用到开方页，请核对后发送');
       }
-    } catch (e) {
-      console.error(e);
+    } catch (error) {
+      console.error(error);
       message.error('加载处方详情失败');
     }
   };
@@ -3179,7 +3324,8 @@ function openPatientMrCiteDrawer() {
     onCite: (record: Record<string, any>) => {
       panel?.applyCitedRecord?.(record);
       if (record?.diagnosis) diagnosis.value = String(record.diagnosis);
-      if (record?.doctor_order) medicalAdvice.value = String(record.doctor_order);
+      if (record?.doctor_order)
+        medicalAdvice.value = String(record.doctor_order);
       if (!panel?.applyCitedRecord) {
         message.success('已引用诊断/医嘱');
       }
@@ -3206,7 +3352,8 @@ async function openPatientRxHistoryDrawer() {
     onProxyPay: openProxyPayQrcode,
     onReuse: reusePrescriptionFromList,
     // 点击处方号打开详情（与医生名片/患者管理一致）
-    onDetail: (prescriptionId: number) => openPrescriptionDetail(prescriptionId),
+    onDetail: (prescriptionId: number) =>
+      openPrescriptionDetail(prescriptionId),
     publicAccountPayEnabled: publicAccountPayEnabled.value,
     publicAccountPayTrigger: publicAccountPayTrigger.value,
     publicAccountBillMode: publicAccountBillMode.value,
@@ -3247,8 +3394,7 @@ function confirmWithdrawPrescription(item: any) {
   }
   AntModal.confirm({
     title: '确认撤回处方？',
-    content:
-      '撤回后患者将无法继续支付该订单，库存占用将释放。此操作不可撤销。',
+    content: '撤回后患者将无法继续支付该订单，库存占用将释放。此操作不可撤销。',
     async onOk() {
       try {
         await withdrawPrescriptionApi({
@@ -3262,11 +3408,11 @@ function confirmWithdrawPrescription(item: any) {
           userPatientHealthInquiry.value = value.user_patient_health_inquiry;
           prescriptionList.value = value.prescription;
         }
-      } catch (e: any) {
+      } catch (error: any) {
         message.error(
-          e?.response?.data?.message || e?.message || '撤回失败',
+          error?.response?.data?.message || error?.message || '撤回失败',
         );
-        return Promise.reject(e);
+        return Promise.reject(error);
       }
     },
   });
@@ -3279,7 +3425,7 @@ loadProcessRuleData();
  */
 async function handleChineseConfigChange(payload: ChineseMedicineConfigChange) {
   if (guardSpecialPrescriptionCartEdit()) return;
-  if (chineseErrorKeys.value.length) {
+  if (chineseErrorKeys.value.length > 0) {
     chineseErrorKeys.value = [];
   }
   const oldRuleType = ruleType.value;
@@ -3287,7 +3433,8 @@ async function handleChineseConfigChange(payload: ChineseMedicineConfigChange) {
   const oldChildProcessRuleId = childProcessRuleId.value;
   // 预设整包回填时同一次 payload 已带下级 ID，不能先清空再丢值（对齐小程序）
   const keepChild =
-    payload.childProcessRuleId != null && Number(payload.childProcessRuleId) > 0;
+    payload.childProcessRuleId != null &&
+    Number(payload.childProcessRuleId) > 0;
   const keepNote =
     payload.processRuleNoteId != null && Number(payload.processRuleNoteId) > 0;
 
@@ -3304,7 +3451,10 @@ async function handleChineseConfigChange(payload: ChineseMedicineConfigChange) {
     childProcessRuleList.value = [];
     processRuleNoteList.value = [];
   }
-  if (payload.processRuleId != null && payload.processRuleId !== oldProcessRuleId) {
+  if (
+    payload.processRuleId != null &&
+    payload.processRuleId !== oldProcessRuleId
+  ) {
     if (!keepChild) {
       childProcessRuleId.value = undefined;
       processRuleNoteId.value = undefined;
@@ -3312,7 +3462,10 @@ async function handleChineseConfigChange(payload: ChineseMedicineConfigChange) {
     childProcessRuleList.value = [];
     processRuleNoteList.value = [];
   }
-  if (payload.childProcessRuleId != null && payload.childProcessRuleId !== oldChildProcessRuleId) {
+  if (
+    payload.childProcessRuleId != null &&
+    payload.childProcessRuleId !== oldChildProcessRuleId
+  ) {
     if (!keepNote) {
       processRuleNoteId.value = undefined;
     }
@@ -3320,26 +3473,43 @@ async function handleChineseConfigChange(payload: ChineseMedicineConfigChange) {
   }
 
   if (payload.ruleType != null) ruleType.value = payload.ruleType;
-  if (payload.packageMethodId !== undefined) packageMethodId.value = payload.packageMethodId ?? 2;
-  if (payload.processRuleId !== undefined) processRuleId.value = payload.processRuleId ?? undefined;
-  if (payload.childProcessRuleId !== undefined) childProcessRuleId.value = payload.childProcessRuleId ?? undefined;
-  if (payload.processRuleNoteId !== undefined) processRuleNoteId.value = payload.processRuleNoteId ?? undefined;
+  if (payload.packageMethodId !== undefined)
+    packageMethodId.value = payload.packageMethodId ?? 2;
+  if (payload.processRuleId !== undefined)
+    processRuleId.value = payload.processRuleId ?? undefined;
+  if (payload.childProcessRuleId !== undefined)
+    childProcessRuleId.value = payload.childProcessRuleId ?? undefined;
+  if (payload.processRuleNoteId !== undefined)
+    processRuleNoteId.value = payload.processRuleNoteId ?? undefined;
   if (payload.dosage != null) dosage.value = payload.dosage;
   if (payload.dayDosage != null) dayDosage.value = payload.dayDosage;
 
-  if (payload.processRuleId != null && payload.processRuleId !== oldProcessRuleId) {
+  if (
+    payload.processRuleId != null &&
+    payload.processRuleId !== oldProcessRuleId
+  ) {
     await loadProcessRuleData(payload.processRuleId);
   }
-  if (payload.childProcessRuleId != null && payload.childProcessRuleId !== oldChildProcessRuleId) {
+  if (
+    payload.childProcessRuleId != null &&
+    payload.childProcessRuleId !== oldChildProcessRuleId
+  ) {
     await loadProcessRuleData(0, payload.childProcessRuleId);
   }
+  // 制剂/方案变更立即落草稿，避免 300ms 防抖内刷新丢配置
+  if (getRegisterId()) {
+    saveReceptionDraft();
+  }
 }
 
 const packageMethodId = ref(2);
 const dosage = ref(7);
 const dayDosage = ref(2);
-/** 无草稿覆盖时才自动应用煎药默认方案 */
-const processPresetAutoApply = ref(true);
+/**
+ * 无草稿覆盖时才自动应用煎药默认方案
+ * 初始 false：等 selectPatient 恢复草稿后再决定，防止刷新竞态盖成默认剂包
+ */
+const processPresetAutoApply = ref(false);
 
 watch(
   [
@@ -3414,7 +3584,11 @@ const doctorSecondSignModal = ref(false);
  * 中药克数不设默认值，未填写时不弹确认，避免误加 1g
  */
 function newDrugBlur() {
-  if (newDrugInfo.value.id && newDrugInfo.value.name && newDrugInfo.value.number > 0) {
+  if (
+    newDrugInfo.value.id &&
+    newDrugInfo.value.name &&
+    newDrugInfo.value.number > 0
+  ) {
     confirmModalApi.setData({
       title: '确认添加',
       content: `要把【${newDrugInfo.value.name}】添加到清单吗？`,
@@ -3478,8 +3652,7 @@ const getDrugListByWesternModal = debounce(async (searchText = '') => {
           ...item.drug,
           // 中药克数不默认 1，需医生手动填写；西药仍默认 1
           number:
-            matched?.number ??
-            (activeCategory.value === 1 ? undefined : 1),
+            matched?.number ?? (activeCategory.value === 1 ? undefined : 1),
         },
       };
     });
@@ -3514,8 +3687,7 @@ function onSelectNewChineseDrug(item: any) {
   newDrugInfo.value.price = item.price;
   newDrugInfo.value.name = item.drug?.drug_name || '';
   newDrugInfo.value.unit =
-    item.drug?.unit ||
-    drugUnit.value.find((u) => u.id === item.drug?.unit_id);
+    item.drug?.unit || drugUnit.value.find((u) => u.id === item.drug?.unit_id);
   newDrugInfo.value.unit_id = item.drug?.unit_id;
   setTimeout(() => {
     const newDrugNumberInput = document.querySelector(
@@ -3555,8 +3727,7 @@ function onSelectOldChineseDrug(index: number, item: any) {
       (u) => u.id === data.drug.frequency_id,
     ),
     unit:
-      data.drug?.unit ||
-      drugUnit.value.find((u) => u.id === data.drug.unit_id),
+      data.drug?.unit || drugUnit.value.find((u) => u.id === data.drug.unit_id),
     price: data.price,
     buy_price: data.buy_price,
     way_id: data.drug?.way_id,
@@ -3618,7 +3789,9 @@ const selectChineseId = ref(0);
 function selectOldDrugInfo(id) {
   if (guardSpecialPrescriptionCartEdit()) return;
   const check = JSON.parse(
-    localStorage.getItem(getStorageKey(getRegisterId(), activeCategory.value)) || '[]',
+    localStorage.getItem(
+      getStorageKey(getRegisterId(), activeCategory.value),
+    ) || '[]',
   ).find((v) => v.id === id);
   if (check) {
     currentDrugs.value[selectChineseIndex.value].id = selectChineseId.value;
@@ -3687,9 +3860,7 @@ function searchOption(inputValue) {
  */
 function addDrugByChinese() {
   if (guardSpecialPrescriptionCartEdit()) return;
-  const check = currentDrugs.value.find(
-    (v) => v.id === newDrugInfo.value.id,
-  );
+  const check = currentDrugs.value.find((v) => v.id === newDrugInfo.value.id);
   if (check) {
     message.error('该药品已经在处方中了！');
     return;
@@ -3860,10 +4031,7 @@ function handleExcipientSelect(drug: any) {
   }
   // 主档 quick_numbers 解析为快捷按钮；无配置则只留手输
   const quickNumbers = parseQuickNumbers(
-    drug._quickNumbers ||
-      drug.drug?.quick_numbers ||
-      drug.quick_numbers ||
-      '',
+    drug._quickNumbers || drug.drug?.quick_numbers || drug.quick_numbers || '',
   );
   currentExcipients.value.push({
     index_id: drug._id || drug.id,
@@ -3877,7 +4045,8 @@ function handleExcipientSelect(drug: any) {
     quick_numbers: quickNumbers,
     number: 1,
     price: drug._price || drug.price,
-    buy_price: drug._buyPrice || drug.buy_price || drug.drug_store_relations?.buy_price,
+    buy_price:
+      drug._buyPrice || drug.buy_price || drug.drug_store_relations?.buy_price,
     type: 8,
     select_number: 1,
   });
@@ -3891,9 +4060,7 @@ function handleExcipientSelect(drug: any) {
  */
 function parseQuickNumbers(raw: unknown): number[] {
   if (Array.isArray(raw)) {
-    return raw
-      .map((v) => Number(v))
-      .filter((n) => Number.isFinite(n) && n > 0);
+    return raw.map((v) => Number(v)).filter((n) => Number.isFinite(n) && n > 0);
   }
   const s = String(raw || '').trim();
   if (!s) return [];
@@ -3911,7 +4078,7 @@ function parseQuickNumbers(raw: unknown): number[] {
 /**
  * 手输/步进器改辅料数量
  */
-function setExcipientNumber(index: number, value: number | null) {
+function setExcipientNumber(index: number, value: null | number) {
   const row = currentExcipients.value[index];
   if (!row) return;
   const n = Number(value);
@@ -3960,7 +4127,9 @@ const fetchTransferPrescription = async (transferPrescriptionId: number) => {
   try {
     // 通过转诊处方ID获取转诊信息
     // 注意：这里需要根据实际API调整，可能需要通过register_id获取
-    const registerId = Number.parseInt(localStorage.getItem(`doctorReception-id`));
+    const registerId = Number.parseInt(
+      localStorage.getItem(`doctorReception-id`),
+    );
     if (registerId) {
       const res = await getTransferPrescriptionByRegisterApi(registerId);
       const data = res?.result || res?.data || res;
@@ -3993,7 +4162,7 @@ const handleTransferImportSuccess = () => {
 };
 
 function switchStore(id) {
-  switchStoreApi({store_id: id}).then(() => {
+  switchStoreApi({ store_id: id }).then(() => {
     myStoreId.value = id;
     updateLocalStorageStoreInfo();
     // 根据id在storeList中查找诊所名称
@@ -4018,7 +4187,7 @@ function updateLocalStorageStoreInfo() {
  */
 const leftPinned = ref(false);
 const leftHover = ref(false);
-let leftLeaveTimer: ReturnType<typeof setTimeout> | null = null;
+let leftLeaveTimer: null | ReturnType<typeof setTimeout> = null;
 /** 门店下拉打开时暂不因 mouseleave 收起（下拉挂到 body） */
 const storeSelectOpen = ref(false);
 
@@ -4124,7 +4293,11 @@ function onStoreSelectOpenChange(open: boolean) {
           @change="switchStore"
           @dropdown-visible-change="onStoreSelectOpenChange"
         >
-          <SelectOption v-for="item in myStoreList" :key="item.id" :value="item.id">
+          <SelectOption
+            v-for="item in myStoreList"
+            :key="item.id"
+            :value="item.id"
+          >
             {{ item.name }}
           </SelectOption>
         </Select>
@@ -4150,7 +4323,12 @@ function onStoreSelectOpenChange(open: boolean) {
           </Button>
         </div>
         <div class="patient-list-actions mb-1 mt-1 flex flex-wrap gap-1">
-          <Button size="small" type="primary" ghost @click="openCreateUserPatientModal">
+          <Button
+            size="small"
+            type="primary"
+            ghost
+            @click="openCreateUserPatientModal"
+          >
             <UserAddOutlined />
             就诊人
           </Button>
@@ -4172,10 +4350,7 @@ function onStoreSelectOpenChange(open: boolean) {
             </Badge>
           </Tooltip>
         </div>
-        <div
-          v-for="(patient, index) in patients"
-          :key="index"
-        >
+        <div v-for="(patient, index) in patients" :key="index">
           <div
             v-if="patient.user_patient"
             :class="{ active: selectPatientId === patient.id }"
@@ -4194,7 +4369,11 @@ function onStoreSelectOpenChange(open: boolean) {
                   <Tag
                     v-if="patient.special_prescription_patient_record"
                     class="patient-special-tag"
-                    :color="patient.special_prescription_patient_record.status === 0 ? 'orange' : 'default'"
+                    :color="
+                      patient.special_prescription_patient_record.status === 0
+                        ? 'orange'
+                        : 'default'
+                    "
                   >
                     特色方{{
                       patient.special_prescription_patient_record.status === 0
@@ -4204,16 +4383,21 @@ function onStoreSelectOpenChange(open: boolean) {
                   </Tag>
                 </h3>
                 <p class="phone">
-                  <SensitiveText :record="patient.user_patient" field="mobile" :show-eye="false" />
+                  <SensitiveText
+                    :record="patient.user_patient"
+                    field="mobile"
+                    :show-eye="false"
+                  />
                 </p>
               </div>
               <p class="patient-salesperson">
                 推广员：{{ patient.salesperson?.nick_name || '无' }}
               </p>
               <div class="patient-meta">
-                <span :class="getRegisterStatus(patient.status)" class="status">{{
-                  getRegisterStatus(patient.status)
-                }}</span>
+                <span
+                  :class="getRegisterStatus(patient.status)"
+                  class="status"
+                  >{{ getRegisterStatus(patient.status) }}</span>
                 <span class="patient-time">{{ patient.updated_at }}</span>
               </div>
             </div>
@@ -4224,1108 +4408,1480 @@ function onStoreSelectOpenChange(open: boolean) {
 
     <!-- 右侧主区域 -->
     <div class="reception-main">
-    <!-- 开方页返回：右上角悬浮，不占布局高度 -->
-    <!-- 右侧：未接诊轻量操作区 / 已接诊开方工作台 -->
-    <Page v-if="tabType === 1" class="prescription-panel">
-      <PatientBriefBar
-        :register="patientInfo"
-        :patient="activePatient"
-        :category="category"
-        :store-name="currentStoreName"
-        :is-online="false"
-      />
-      <div class="prescription-header flex flex-wrap gap-2">
-        <Button
-          v-if="receptionStatus === 1"
-          class="send-btn"
-          type="primary"
-          @click="reception"
-        >
-          接诊
-        </Button>
-        <Button
-          v-if="receptionStatus === 1"
-          class="send-btn"
-          type="primary"
-          danger
-          @click="refuseReception"
-        >
-          拒诊
-        </Button>
-        <Button type="link" size="small" @click="openPatientInfoDrawer">患者信息</Button>
-        <Button type="link" size="small" @click="openPatientMrCiteDrawer">患者病历</Button>
-        <Button type="link" size="small" @click="openPatientRxHistoryDrawer">处方记录</Button>
-        <Button
-          v-if="isActivePatientUnclaimed"
-          type="link"
-          size="small"
-          @click="openClaimQrcodeModal"
-        >
-          <QrcodeOutlined />
-          认领码
-        </Button>
-      </div>
-      <SpecialPrescriptionImportCard
-        v-if="specialPrescriptionRecord && hasSpecialPrescriptionRecord"
-        class="mt-4 max-w-xl"
-        :record="specialPrescriptionRecord"
-        :purchase-label="specialPrescriptionPurchaseLabel"
-        :loading="applyingSpecialPrescription"
-        @apply="handleApplySpecialPrescription(true)"
-      />
-      <div v-if="transferPrescription" class="transfer-section mt-5">
-        <TransferPrescriptionCard
-          :transfer-data="transferPrescription"
-          :register-id="doctorReceptionRegisterId"
-          @import-success="handleTransferImportSuccess"
+      <!-- 开方页返回：右上角悬浮，不占布局高度 -->
+      <!-- 右侧：未接诊轻量操作区 / 已接诊开方工作台 -->
+      <Page v-if="tabType === 1" class="prescription-panel">
+        <PatientBriefBar
+          :register="patientInfo"
+          :patient="activePatient"
+          :category="category"
+          :store-name="currentStoreName"
+          :is-online="false"
         />
-      </div>
-    </Page>
-
-    <Page v-if="tabType === 2" class="prescription-panel prescription-panel--rx">
-      <Spin :spinning="prescriptionTypeLoading">
-      <div class="rx-workspace">
-      <!-- 顶栏固定：患者简要 + 一级 Tab + 处方工具栏 -->
-      <div class="rx-workspace-sticky">
-      <PatientBriefBar
-        :register="patientInfo"
-        :patient="activePatient"
-        :category="category"
-        :store-name="currentStoreName"
-        :is-online="false"
-      />
-      <template v-if="prescriptionTypeAllowed">
-      <!-- 一级 Tab + 右侧紧凑操作（吸顶） -->
-      <Tabs
-        v-model:active-key="rxMrTab"
-        class="mb-0 rx-primary-tabs"
-      >
-        <TabPane key="rx" tab="处方" />
-        <TabPane v-if="canUseMedicalRecord" key="mr" tab="病历" />
-        <template #rightExtra>
-          <div class="rx-tab-extra-actions">
-            <Button type="link" size="small" @click="openPatientInfoDrawer">
-              <UserOutlined />
-              患者信息
-            </Button>
-            <Button type="link" size="small" @click="openPatientMrCiteDrawer">
-              <FileTextOutlined />
-              患者病历
-            </Button>
-            <Button type="link" size="small" @click="openPatientRxHistoryDrawer">
-              <MedicineBoxOutlined />
-              处方记录
-            </Button>
-            <Button
-              v-if="isActivePatientUnclaimed"
-              type="link"
-              size="small"
-              @click="openClaimQrcodeModal"
-            >
-              <QrcodeOutlined />
-              认领码
-            </Button>
-            <Button
-              v-if="canEndReception"
-              type="link"
-              size="small"
-              danger
-              @click="endOfDiagnosis"
-            >
-              <StopOutlined />
-              结束接诊
-            </Button>
-            <Button type="primary" size="small" @click="submitCurrentPrescription">
-              <SendOutlined />
-              发送处方
-            </Button>
-            <Button
-              v-if="canUseCommonPrescription"
-              type="link"
-              size="small"
-              @click="openSaveCommonPrescriptionModal"
-            >
-              <SaveOutlined />
-              另存为常用方
-            </Button>
-          </div>
-        </template>
-      </Tabs>
-
-      <!-- 处方工具栏：仅处方态吸顶 -->
-      <div
-        v-if="!canUseMedicalRecord || rxMrTab === 'rx'"
-        class="rx-workspace-toolbar mt-1 mb-1 flex flex-wrap items-center gap-1"
-      >
-        <Button
-          v-if="activeCategory === 2 && !isSpecialPrescriptionCartLocked"
-          type="link"
-          size="small"
-          @click="openWesternModal"
-        >
-          <PlusOutlined />
-          添加商品
-        </Button>
-        <Button
-          v-if="canUseCommonPrescription"
-          type="link"
-          size="small"
-          @click="openCommonPrescriptionModal"
-        >
-          <BookOutlined />
-          选择常用方
-        </Button>
-        <Button
-          v-if="activeCategory === 1 && !isSpecialPrescriptionCartLocked && canUseGoldenFormula"
-          type="link"
-          size="small"
-          @click="openGoldenFormulaModal"
-        >
-          <MedicineBoxOutlined />
-          导入金方
-        </Button>
-        <Button
-          v-if="!isSpecialPrescriptionCartLocked && canUseAiPrescription"
-          type="link"
-          size="small"
-          @click="openAiPrescriptionDrawer"
-        >
-          <RobotOutlined />
-          AI辅助出方
-        </Button>
-        <Button
-          v-if="!isSpecialPrescriptionCartLocked"
-          type="link"
-          size="small"
-          @click="openImageOcrDrawer"
-        >
-          <PictureOutlined />
-          识图开方
-        </Button>
-        <Button
-          v-if="!isSpecialPrescriptionCartLocked && canUseAiPrescription"
-          type="link"
-          size="small"
-          @click="openVoicePrescriptionDrawer"
-        >
-          <AudioOutlined />
-          语音开方
-        </Button>
-        <Button
-          v-if="canUseCommonPrescription"
-          type="link"
-          size="small"
-          @click="openSaveCommonPrescriptionModal"
-        >
-          <SaveOutlined />
-          保存常用方
-        </Button>
-        <Button
-          type="link"
-          size="small"
-          danger
-          @click="handleClearPrescriptionCart"
-        >
-          <ClearOutlined />
-          清空药方
-        </Button>
-        <Button
-          v-if="activeCategory === 1 && hasSalespersonTransfer"
-          type="link"
-          size="small"
-          @click="salespersonTransferDrawerOpen = true"
-        >
-          <SwapOutlined />
-          查看传方
-        </Button>
-        <RadioGroup
-          v-if="allowInsuranceCategory === 1"
-          v-model:value="category"
-          size="small"
-          class="ml-2"
-        >
-          <RadioButton :value="1">自费</RadioButton>
-          <RadioButton :value="2">医保</RadioButton>
-        </RadioGroup>
-      </div>
-
-      <!-- 病历工具栏：仅病历态吸顶 -->
-      <div
-        v-if="canUseMedicalRecord && rxMrTab === 'mr'"
-        class="rx-workspace-toolbar mt-1 mb-1 flex flex-wrap items-center gap-1"
-      >
-        <Button
-          type="link"
-          size="small"
-          danger
-          @click="medicalRecordPanelRef?.clear?.()"
-        >
-          <ClearOutlined />
-          清空病历
-        </Button>
-        <Button
-          type="link"
-          size="small"
-          @click="medicalRecordPanelRef?.openCiteHistory?.()"
-        >
-          <HistoryOutlined />
-          引用历史病历
-        </Button>
-        <Button
-          v-if="canUseAiMedicalRecord"
-          type="link"
-          size="small"
-          @click="medicalRecordPanelRef?.aiGenerate?.()"
-        >
-          <RobotOutlined />
-          AI写病历
-        </Button>
-        <Button
-          type="link"
-          size="small"
-          @click="medicalRecordPanelRef?.save?.()"
-        >
-          <SaveOutlined />
-          保存病历
-        </Button>
-      </div>
-      </template>
-      </div>
-      <!-- /rx-workspace-sticky -->
-
-      <Empty
-        v-if="!prescriptionTypeLoading && !prescriptionTypeAllowed"
-        :description="prescriptionTypeDenyMessage || '当前门店未开通开方权限'"
-        class="py-20"
-      />
-
-      <div
-        v-else
-        class="rx-workspace-scroll"
-      >
-      <div v-show="!canUseMedicalRecord || rxMrTab === 'rx'">
-      <!-- 二级 Tab：处方类型，随内容区滚动，病历态不展示 -->
-      <Tabs
-        :active-key="String(activeCategory)"
-        class="rx-secondary-tabs mb-2"
-        size="small"
-        @change="(key) => tabChange(Number(key))"
-      >
-        <TabPane
-          v-for="categoryItem in categories"
-          :key="String(categoryItem.value)"
-        >
-          <template #tab>
-            <span
-              :id="`rx-pc-tab-${categoryItem.value}`"
-              class="rx-secondary-tab-label"
-            >
-              <img
-                v-if="categoryItem.icon"
-                class="tab-type-icon"
-                :src="categoryItem.icon"
-                alt=""
-              />
-              <span>{{ categoryItem.label }}</span>
-              <span
-                v-if="categoryItem.icon_text"
-                class="tab-type-badge"
-              >{{ categoryItem.icon_text }}</span>
-            </span>
-          </template>
-        </TabPane>
-      </Tabs>
-      <div class="rx-swipe-panel">
-
-      <SpecialPrescriptionImportCard
-        v-if="hasSpecialPrescriptionRecord"
-        class="mt-5 max-w-xl"
-        :record="specialPrescriptionRecord"
-        :purchase-label="specialPrescriptionPurchaseLabel"
-        :loading="applyingSpecialPrescription"
-        @apply="() => handleApplySpecialPrescription()"
-      />
-
-      <SalespersonTransferDrawer
-        v-model:open="salespersonTransferDrawerOpen"
-        :register-id="doctorReceptionRegisterId"
-        @import="handleSalespersonTransferImport"
-      />
-      <div style="width: 0; height: 0; overflow: hidden">
-        <ImagePreviewGroup
-          :preview="{
-            visible,
-            onVisibleChange: setVisible,
-          }"
-          :style="{ display: 'none' }"
-        >
-          <Image
-            v-for="image in previewImage"
-            v-if="visible === true"
-            :src="image"
-            :width="200"
-          />
-        </ImagePreviewGroup>
-      </div>
-      <!-- 已选药品列表 -->
-      <div v-if="activeCategory === 1" class="mb-3 mt-2 flex items-center justify-between text-base font-medium text-gray-700">
-        <span>已选 {{ currentDrugs.length }} 种药</span>
-        <Button
-          v-if="currentDrugs.length > 0 && !isSpecialPrescriptionCartLocked"
-          type="link"
-          size="small"
-          @click="batchUpdateChinesePrices"
-        >
-          批量更新价格
-        </Button>
-      </div>
-      <!-- 中药 -->
-      <div v-if="activeCategory === 1" class="mb-5 mt-3 flex" style="flex-wrap: wrap; width: 100%;">
-        <Row>
-          <Col
-            v-for="(drug, index) in currentDrugs"
-            :key="`${drug.index_id || drug.id}-${index}`"
-            :lg="12"
-            :md="24"
-            :sm="24"
-            :xl="leftShow ? 12 : 8"
-            :xs="leftShow ? 12 : 8"
-            :xxl="leftShow ? 8 : 6"
+        <div class="prescription-header flex flex-wrap gap-2">
+          <Button
+            v-if="receptionStatus === 1"
+            class="send-btn"
+            type="primary"
+            @click="reception"
           >
-            <Card class="mt-0" title="">
-              <div class="chinese-drug-card">
-                <span class="card-index">{{ index + 1 }}、</span>
-                <div class="chinese-drug-row">
-                  <ChineseDrugNameBubble
-                    :display-name="drug.drug_name"
-                    :disabled="isSpecialPrescriptionCartLocked"
-                    :store-id="myStoreId"
-                    :register-id="getRegisterId()"
-                    :type="1"
-                    compact
-                    input-class="old-select-drug-name"
-                    placeholder="药名"
-                    @select="(item) => onSelectOldChineseDrug(index, item)"
-                  />
-                  <span class="chinese-drug-sep">,</span>
-                  <InputNumber
-                    v-model:value="drug.number"
-                    :disabled="isSpecialPrescriptionCartLocked"
-                    :class="`chinese-drug-num old-number-input-${index}`"
-                    :controls="false"
-                    :style="{ width: '108px' }"
-                    @blur="updateChineseNumber"
-                    @keydown="updateChineseNumberGoNewDrug($event)"
-                  >
-                    <template #addonAfter>{{ drug.unit?.name || 'g' }}</template>
-                  </InputNumber>
-                </div>
-                <!-- 三块同一行：煎法 | 价格(可换行) | 更新价格；避开 .card-price 绝对定位 -->
-                <div class="chinese-drug-meta">
-                  <ChineseDrugWayBubble
-                    class="meta-way"
-                    :model-value="drug?.way_id || 0"
-                    :options="drugUseWay"
-                    :disabled="isSpecialPrescriptionCartLocked"
-                    trigger="link"
-                    placeholder="煎法"
-                    @change="(id) => onChineseDrugWayChange(index, id)"
-                  />
-                  <div class="chinese-drug-meta-price">
-                    <span class="chinese-drug-price-amount">
-                      ￥{{ (drug.price * (drug.number || 0)).toFixed(2) }}
-                    </span>
-                    <span
-                      v-if="getChineseItemMargin(drug) && getChineseItemMargin(drug) !== '--'"
-                      class="chinese-drug-margin"
-                    >
-                      毛利率 {{ getChineseItemMargin(drug) }}%
-                    </span>
-                  </div>
+            接诊
+          </Button>
+          <Button
+            v-if="receptionStatus === 1"
+            class="send-btn"
+            type="primary"
+            danger
+            @click="refuseReception"
+          >
+            拒诊
+          </Button>
+          <Button type="link" size="small" @click="openPatientInfoDrawer">
+患者信息
+</Button>
+          <Button type="link" size="small" @click="openPatientMrCiteDrawer">
+患者病历
+</Button>
+          <Button type="link" size="small" @click="openPatientRxHistoryDrawer">
+处方记录
+</Button>
+          <Button
+            v-if="isActivePatientUnclaimed"
+            type="link"
+            size="small"
+            @click="openClaimQrcodeModal"
+          >
+            <QrcodeOutlined />
+            认领码
+          </Button>
+        </div>
+        <SpecialPrescriptionImportCard
+          v-if="specialPrescriptionRecord && hasSpecialPrescriptionRecord"
+          class="mt-4 max-w-xl"
+          :record="specialPrescriptionRecord"
+          :purchase-label="specialPrescriptionPurchaseLabel"
+          :loading="applyingSpecialPrescription"
+          @apply="handleApplySpecialPrescription(true)"
+        />
+        <div v-if="transferPrescription" class="transfer-section mt-5">
+          <TransferPrescriptionCard
+            :transfer-data="transferPrescription"
+            :register-id="doctorReceptionRegisterId"
+            @import-success="handleTransferImportSuccess"
+          />
+        </div>
+      </Page>
+
+      <Page
+        v-if="tabType === 2"
+        class="prescription-panel prescription-panel--rx"
+      >
+        <Spin :spinning="prescriptionTypeLoading">
+          <div class="rx-workspace">
+            <!-- 顶栏固定：患者简要 + 一级 Tab + 处方工具栏 -->
+            <div class="rx-workspace-sticky">
+              <PatientBriefBar
+                :register="patientInfo"
+                :patient="activePatient"
+                :category="category"
+                :store-name="currentStoreName"
+                :is-online="false"
+              />
+              <template v-if="prescriptionTypeAllowed">
+                <!-- 一级 Tab + 右侧紧凑操作（吸顶） -->
+                <Tabs v-model:active-key="rxMrTab" class="mb-0 rx-primary-tabs">
+                  <TabPane key="rx" tab="处方" />
+                  <TabPane v-if="canUseMedicalRecord" key="mr" tab="病历" />
+                  <template #rightExtra>
+                    <div class="rx-tab-extra-actions">
+                      <Button
+                        type="link"
+                        size="small"
+                        @click="openPatientInfoDrawer"
+                      >
+                        <UserOutlined />
+                        患者信息
+                      </Button>
+                      <Button
+                        type="link"
+                        size="small"
+                        @click="openPatientMrCiteDrawer"
+                      >
+                        <FileTextOutlined />
+                        患者病历
+                      </Button>
+                      <Button
+                        type="link"
+                        size="small"
+                        @click="openPatientRxHistoryDrawer"
+                      >
+                        <MedicineBoxOutlined />
+                        处方记录
+                      </Button>
+                      <Button
+                        v-if="isActivePatientUnclaimed"
+                        type="link"
+                        size="small"
+                        @click="openClaimQrcodeModal"
+                      >
+                        <QrcodeOutlined />
+                        认领码
+                      </Button>
+                      <Button
+                        v-if="canEndReception"
+                        type="link"
+                        size="small"
+                        danger
+                        @click="endOfDiagnosis"
+                      >
+                        <StopOutlined />
+                        结束接诊
+                      </Button>
+                      <Button
+                        type="primary"
+                        size="small"
+                        @click="submitCurrentPrescription"
+                      >
+                        <SendOutlined />
+                        发送处方
+                      </Button>
+                      <Button
+                        v-if="canUseCommonPrescription"
+                        type="link"
+                        size="small"
+                        @click="openSaveCommonPrescriptionModal"
+                      >
+                        <SaveOutlined />
+                        另存为常用方
+                      </Button>
+                    </div>
+                  </template>
+                </Tabs>
+
+                <!-- 处方工具栏：仅处方态吸顶 -->
+                <div
+                  v-if="!canUseMedicalRecord || rxMrTab === 'rx'"
+                  class="rx-workspace-toolbar mt-1 mb-1 flex flex-wrap items-center gap-1"
+                >
                   <Button
-                    v-if="!isSpecialPrescriptionCartLocked"
-                    class="meta-update"
+                    v-if="
+                      activeCategory === 2 && !isSpecialPrescriptionCartLocked
+                    "
                     type="link"
                     size="small"
-                    @click="updateOneChinesePrice(index)"
+                    @click="openWesternModal"
                   >
-                    更新价格
+                    <PlusOutlined />
+                    添加商品
+                  </Button>
+                  <Button
+                    v-if="canUseCommonPrescription"
+                    type="link"
+                    size="small"
+                    @click="openCommonPrescriptionModal"
+                  >
+                    <BookOutlined />
+                    选择常用方
+                  </Button>
+                  <Button
+                    v-if="
+                      activeCategory === 1 &&
+                      !isSpecialPrescriptionCartLocked &&
+                      canUseGoldenFormula
+                    "
+                    type="link"
+                    size="small"
+                    @click="openGoldenFormulaModal"
+                  >
+                    <MedicineBoxOutlined />
+                    导入金方
+                  </Button>
+                  <Button
+                    v-if="
+                      !isSpecialPrescriptionCartLocked && canUseAiPrescription
+                    "
+                    type="link"
+                    size="small"
+                    @click="openAiPrescriptionDrawer"
+                  >
+                    <RobotOutlined />
+                    AI辅助出方
+                  </Button>
+                  <Button
+                    v-if="!isSpecialPrescriptionCartLocked"
+                    type="link"
+                    size="small"
+                    @click="openImageOcrDrawer"
+                  >
+                    <PictureOutlined />
+                    识图开方
+                  </Button>
+                  <Button
+                    v-if="
+                      !isSpecialPrescriptionCartLocked && canUseAiPrescription
+                    "
+                    type="link"
+                    size="small"
+                    @click="openVoicePrescriptionDrawer"
+                  >
+                    <AudioOutlined />
+                    语音开方
+                  </Button>
+                  <Button
+                    v-if="canUseCommonPrescription"
+                    type="link"
+                    size="small"
+                    @click="openSaveCommonPrescriptionModal"
+                  >
+                    <SaveOutlined />
+                    保存常用方
+                  </Button>
+                  <Button
+                    type="link"
+                    size="small"
+                    danger
+                    @click="handleClearPrescriptionCart"
+                  >
+                    <ClearOutlined />
+                    清空药方
+                  </Button>
+                  <Button
+                    v-if="activeCategory === 1 && hasSalespersonTransfer"
+                    type="link"
+                    size="small"
+                    @click="salespersonTransferDrawerOpen = true"
+                  >
+                    <SwapOutlined />
+                    查看传方
+                  </Button>
+                  <RadioGroup
+                    v-if="allowInsuranceCategory === 1"
+                    v-model:value="category"
+                    size="small"
+                    class="ml-2"
+                  >
+                    <RadioButton :value="1">自费</RadioButton>
+                    <RadioButton :value="2">医保</RadioButton>
+                  </RadioGroup>
+                </div>
+
+                <!-- 病历工具栏：仅病历态吸顶 -->
+                <div
+                  v-if="canUseMedicalRecord && rxMrTab === 'mr'"
+                  class="rx-workspace-toolbar mt-1 mb-1 flex flex-wrap items-center gap-1"
+                >
+                  <Button
+                    type="link"
+                    size="small"
+                    danger
+                    @click="medicalRecordPanelRef?.clear?.()"
+                  >
+                    <ClearOutlined />
+                    清空病历
+                  </Button>
+                  <Button
+                    type="link"
+                    size="small"
+                    @click="medicalRecordPanelRef?.openCiteHistory?.()"
+                  >
+                    <HistoryOutlined />
+                    引用历史病历
+                  </Button>
+                  <Button
+                    v-if="canUseAiMedicalRecord"
+                    type="link"
+                    size="small"
+                    @click="medicalRecordPanelRef?.aiGenerate?.()"
+                  >
+                    <RobotOutlined />
+                    AI写病历
+                  </Button>
+                  <Button
+                    type="link"
+                    size="small"
+                    @click="medicalRecordPanelRef?.save?.()"
+                  >
+                    <SaveOutlined />
+                    保存病历
                   </Button>
                 </div>
-                <Button
-                  v-if="!isSpecialPrescriptionCartLocked"
-                  class="card-delete"
-                  type="link"
-                  @click="removeDrug(index)"
-                >
-                  <DeleteTwoTone/>
-                </Button>
-              </div>
-            </Card>
-          </Col>
-          <Col
-            v-if="!isSpecialPrescriptionCartLocked"
-            :lg="12"
-            :md="12"
-            :sm="12"
-            :xl="leftShow ? 12 : 8"
-            :xs="leftShow ? 12 : 8"
-            :xxl="leftShow ? 8 : 6"
-          >
-            <Card title="">
-              <div class="chinese-drug-card">
-                <span class="card-index">{{ currentDrugs.length + 1 }}、</span>
-                <div class="chinese-drug-row">
-                  <ChineseDrugNameBubble
-                    :display-name="newDrugInfo.name || ''"
-                    :store-id="myStoreId"
-                    :register-id="getRegisterId()"
-                    :type="1"
-                    compact
-                    input-class="new-select-drug-name"
-                    placeholder="药名"
-                    @select="onSelectNewChineseDrug"
-                  />
-                  <span class="chinese-drug-sep">,</span>
-                  <InputNumber
-                    v-model:value="newDrugInfo.number"
-                    class="chinese-drug-num new-number-input"
-                    :style="{ width: '108px' }"
-                    @blur="newDrugBlur"
-                    @keydown="selectDrugByNewDrugInfo($event, true)"
-                  >
-                    <template #addonAfter>{{ newDrugInfo.unit?.name || 'g' }}</template>
-                  </InputNumber>
-                </div>
-                <div class="chinese-drug-meta">
-                  <ChineseDrugWayBubble
-                    v-model="newDrugInfo.way_id"
-                    :options="drugUseWay"
-                    trigger="link"
-                    placeholder="煎法"
-                  />
-                  <p class="card-price">
-                    ￥<span>{{
-                      (
-                        (newDrugInfo.price || 0) * (newDrugInfo.number || 0)
-                      ).toFixed(2)
-                    }}元</span>
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </Col>
-          <!-- 不知道为什么会出问题 -->
-          <Col
-            v-if="currentDrugs.length < 3"
-            :lg="12"
-            :md="24"
-            :sm="24"
-            :xl="12"
-            :xs="24"
-            :xxl="8"
-          >
-
-            <Card title="" style="opacity: 0">
-              <div>
-                <span class="card-index">{{ currentDrugs.length + 1 }}、</span>
-                <div>
-                  <Select
-                    v-model:value="newDrugInfo.id"
-                    :filter-option="false"
-                    class="new-select-drug-name w-1/5"
-                    style="min-width: 100px"
-                    placeholder="药名"
-                    show-search
-                    @change="selectNewDrugInfo"
-                    @search="searchOption"
-                    disabled
-                  >
-                    <SelectOption
-                      v-for="(value, index) in drugList"
-                      :key="index"
-                      :value="value.drug_id"
-                      disabled
-                    >
-                      {{ value.drug.drug_name }}
-                    </SelectOption>
-                  </Select>
-                  ,
-                  <InputNumber
-                    v-model:value="newDrugInfo.number"
-                    class="new-number-input w-1/5"
-                    style="min-width: 100px"
-                    @blur="updateChineseNumber"
-                    @keydown="selectDrugByNewDrugInfo($event, true)"
-                    disabled
-                  >
-                    <template #addonAfter>{{ newDrugInfo.unit?.name || 'g' }}</template>
-                  </InputNumber>
-                  ,
-                  <span>
-                    <Select
-                      v-model:value="newDrugInfo.way_id"
-                      placeholder="用法"
-                      @keydown="selectDrugByNewDrugInfo($event, true)"
-                      disabled
-                    >
-                      <SelectOption :value="0">煎服</SelectOption>
-                      <SelectOption
-                        v-for="(value, index) in drugUseWay"
-                        :key="index"
-                        :value="value.id"
-                      >
-                        {{ value.name }}
-                      </SelectOption>
-                    </Select>
-                  </span>
-                  <p class="card-price">
-                    ￥<span>{{
-                      (
-                        (newDrugInfo.price || 0) * (newDrugInfo.number || 0)
-                      ).toFixed(2)
-                    }}元</span>
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </Col>
-          <Col
-            v-if="currentDrugs.length < 3"
-            :lg="12"
-            :md="24"
-            :sm="24"
-            :xl="12"
-            :xs="24"
-            :xxl="8"
-          >
-
-            <Card title="" style="opacity: 0">
-              <div>
-                <span class="card-index">{{ currentDrugs.length + 1 }}、</span>
-                <div>
-                  <Select
-                    v-model:value="newDrugInfo.id"
-                    :filter-option="false"
-                    class="new-select-drug-name w-1/5"
-                    style="min-width: 100px"
-                    placeholder="药名"
-                    show-search
-                    @change="selectNewDrugInfo"
-                    @search="searchOption"
-                    disabled
-                  >
-                    <SelectOption
-                      v-for="(value, index) in drugList"
-                      :key="index"
-                      :value="value.drug_id"
-                      disabled
-                    >
-                      {{ value.drug.drug_name }}
-                    </SelectOption>
-                  </Select>
-                  ,
-                  <InputNumber
-                    v-model:value="newDrugInfo.number"
-                    class="new-number-input w-1/5"
-                    style="min-width: 100px"
-                    @blur="updateChineseNumber"
-                    @keydown="selectDrugByNewDrugInfo($event, true)"
-                    disabled
-                  >
-                    <template #addonAfter>{{ newDrugInfo.unit?.name || 'g' }}</template>
-                  </InputNumber>
-                  ,
-                  <span>
-                    <Select
-                      v-model:value="newDrugInfo.way_id"
-                      placeholder="用法"
-                      @blur="updateChineseNumber"
-                      @keydown="selectDrugByNewDrugInfo($event, true)"
-                      disabled
-                    >
-                      <SelectOption :value="0">煎服</SelectOption>
-                      <SelectOption
-                        v-for="(value, index) in drugUseWay"
-                        :key="index"
-                        :value="value.id"
-                      >
-                        {{ value.name }}
-                      </SelectOption>
-                    </Select>
-                  </span>
-                  <p class="card-price">
-                    ￥<span>{{
-                      (
-                        (newDrugInfo.price || 0) * (newDrugInfo.number || 0)
-                      ).toFixed(2)
-                    }}元</span>
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </Col>
-        </Row>
-      </div>
-      <!-- 西（中成）药列表（type=2） -->
-      <div v-else-if="activeCategory === 2" class="selected-drugs">
-        <div class="drug-table">
-          <div class="table-header">
-            <span v-if="activeCategory !== 1">商品图片</span>
-            <span>商品名称</span>
-            <span>数量</span>
-            <span>单价</span>
-            <span>操作</span>
-          </div>
-          <div class="table-body">
-            <div
-              v-for="(drug, index) in currentDrugs"
-              :key="drug.id"
-              class="table-row"
-            >
-              <div
-                v-if="activeCategory !== 1"
-                style="width: 120px; margin: 0 auto"
-              >
-                <Image :src="drug.image"/>
-              </div>
-              <div>
-                <p>
-                  <span>药品名称：{{ drug.drug_name }}</span>
-                </p>
-                <!-- 西药用法显示/编辑模式 -->
-                <p v-if="activeCategory !== 1 && !drug.isEditing">
-                  <span>用法：{{
-                      `${drug.use_type?.name}，${drug.use_frequency?.name}，${drug.use_num?.name}，每次${drug.number}${drug.unit?.name}`
-                    }}</span>
-                </p>
-                <div v-else-if="activeCategory !== 1 && drug.isEditing" class="edit-usage-form">
-                  <span>用法：</span>
-                  <Select
-                    :value="drug.use_type?.id"
-                    :disabled="isSpecialPrescriptionCartLocked"
-                    size="small"
-                    style="width: 80px"
-                    @change="(val) => updateDrugUsage(index, 'use_type', drugUseType.find(item => item.id === val))"
-                  >
-                    <SelectOption v-for="item in drugUseType" :key="item.id" :value="item.id">
-                      {{ item.name }}
-                    </SelectOption>
-                  </Select>
-                  <Select
-                    :value="drug.use_frequency?.id"
-                    :disabled="isSpecialPrescriptionCartLocked"
-                    size="small"
-                    style="width: 100px; margin-left: 4px"
-                    @change="(val) => updateDrugUsage(index, 'use_frequency', drugUseFrequency.find(item => item.id === val))"
-                  >
-                    <SelectOption v-for="item in drugUseFrequency" :key="item.id" :value="item.id">
-                      {{ item.name }}
-                    </SelectOption>
-                  </Select>
-                  <Select
-                    :value="drug.use_num?.id"
-                    :disabled="isSpecialPrescriptionCartLocked"
-                    size="small"
-                    style="width: 80px; margin-left: 4px"
-                    @change="(val) => updateDrugUsage(index, 'use_num', drugTime.find(item => item.id === val))"
-                  >
-                    <SelectOption v-for="item in drugTime" :key="item.id" :value="item.id">
-                      {{ item.name }}
-                    </SelectOption>
-                  </Select>
-                  <span style="margin-left: 4px">每次</span>
-                  <InputNumber
-                    v-model:value="drug.number"
-                    :disabled="isSpecialPrescriptionCartLocked"
-                    :min="1"
-                    size="small"
-                    style="width: 60px; margin-left: 4px"
-                  />
-                  <Select
-                    :value="drug.unit?.id"
-                    :disabled="isSpecialPrescriptionCartLocked"
-                    size="small"
-                    style="width: 60px; margin-left: 4px"
-                    @change="(val) => updateDrugUsage(index, 'unit', drugUnit.find(item => item.id === val))"
-                  >
-                    <SelectOption v-for="item in drugUnit" :key="item.id" :value="item.id">
-                      {{ item.name }}
-                    </SelectOption>
-                  </Select>
-                </div>
-              </div>
-              <div>
-                <div v-if="activeCategory === 1" class="quantity-control">
-                  <InputNumber
-                    v-model:value="drug.select_number"
-                    class="w-full"
-                    @blur="updateChineseNumber"
-                  >
-                    <template #addonAfter>{{ drug.unit?.name || 'g' }}</template>
-                  </InputNumber>
-                </div>
-                <div v-else class="quantity-control">
-                  <Button type="primary" :disabled="isSpecialPrescriptionCartLocked" @click="decrement(index)">-</Button>
-                  <span style="margin: 0 20px">{{ drug.select_number }}</span>
-                  <Button type="primary" :disabled="isSpecialPrescriptionCartLocked" @click="increment(index)">+</Button>
-                </div>
-              </div>
-              <span>{{ drug.price }}</span>
-              <div>
-                <Button
-                  v-if="activeCategory !== 1 && !drug.isEditing && !isSpecialPrescriptionCartLocked"
-                  type="link"
-                  @click="toggleEditDrug(index)"
-                >编辑</Button>
-                <Button
-                  v-if="activeCategory !== 1 && drug.isEditing"
-                  type="link"
-                  @click="saveEditDrug(index)"
-                >保存</Button>
-                <Button v-if="!isSpecialPrescriptionCartLocked" type="link" @click="removeDrug(index)">删除</Button>
-                <Button
-                  v-if="drug.instruction !== ''"
-                  type="link"
-                  @click="setVisible(true, drug.instruction)"
-                >
-                  查看说明书
-                </Button>
-              </div>
+              </template>
             </div>
-          </div>
-        </div>
-      </div>
-      <!-- 简单产品列表（type=3,5,6,7：保健食品、产品服务包、非药品、医疗器械） -->
-      <div v-else-if="[3, 5, 6, 7].includes(activeCategory)" class="selected-drugs">
-        <!-- 搜索组件 -->
-        <div class="mb-5">
-          <DrugSearchSelect
-            v-if="!isSpecialPrescriptionCartLocked"
-            :type="activeCategory"
-            :store-id="myStoreId"
-            :placeholder="`输入${categories.find(c => c.value === activeCategory)?.label || '商品'}名称搜索`"
-            @select="handleSimpleProductSelect"
-          />
-        </div>
-        <!-- 已选商品列表（表格形式，与西药一致） -->
-        <div class="drug-table">
-          <div class="table-header">
-            <span>商品图片</span>
-            <span>商品名称</span>
-            <span>数量</span>
-            <span>单价</span>
-            <span>操作</span>
-          </div>
-          <div class="table-body">
-            <div
-              v-for="(drug, index) in currentDrugs"
-              :key="drug.id"
-              class="table-row"
-            >
-              <div style="width: 120px; margin: 0 auto">
-                <Image :src="drug.image"/>
-              </div>
-              <div>
-                <p>
-                  <span>药品名称：{{ drug.drug_name }}</span>
-                </p>
-              </div>
-              <div>
-                <div class="quantity-control">
-                  <Button type="primary" :disabled="isSpecialPrescriptionCartLocked" @click="decrement(index)">-</Button>
-                  <span style="margin: 0 20px">{{ drug.select_number }}</span>
-                  <Button type="primary" :disabled="isSpecialPrescriptionCartLocked" @click="increment(index)">+</Button>
-                </div>
-              </div>
-              <span>{{ drug.price }}</span>
-              <div>
-                <Button v-if="!isSpecialPrescriptionCartLocked" type="link" @click="removeDrug(index)">删除</Button>
-                <Button
-                  v-if="drug.instruction !== ''"
-                  type="link"
-                  @click="setVisible(true, drug.instruction)"
-                >
-                  查看说明书
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+            <!-- /rx-workspace-sticky -->
 
-      <!-- 中药辅料：挂在药味下方、制剂配置上方 -->
-      <div v-if="activeCategory === 1" class="mb-5 rounded border border-[hsl(var(--border))] p-3">
-        <div class="mb-2 flex items-center justify-between font-medium text-[hsl(var(--foreground))]">
-          <span>辅料（可选）</span>
-          <span class="text-sm font-normal text-[hsl(var(--muted-foreground))]">单价×数量×剂数，分账全归平台</span>
-        </div>
-        <DrugSearchSelect
-          v-if="!isSpecialPrescriptionCartLocked"
-          :type="8"
-          :store-id="myStoreId"
-          :register-id="getRegisterId()"
-          placeholder="搜索辅料名称添加"
-          class="mb-3"
-          @select="handleExcipientSelect"
-        />
-        <div
-          v-for="(item, index) in currentExcipients"
-          :key="item.id"
-          class="mb-2 flex flex-wrap items-center justify-between gap-3 text-sm"
-        >
-          <span class="min-w-0 flex-1 truncate">
-            {{ item.drug_name }}
-            <span
-              v-if="item.specification"
-              class="ml-1 text-[hsl(var(--muted-foreground))]"
-            >（{{ item.specification }}）</span>
-          </span>
-          <div class="quantity-control flex flex-wrap items-center gap-2">
-            <Button type="primary" size="small" :disabled="isSpecialPrescriptionCartLocked" @click="decrementExcipient(index)">-</Button>
-            <InputNumber
-              :value="item.number"
-              :min="0.01"
-              :step="1"
-              :disabled="isSpecialPrescriptionCartLocked"
-              size="small"
-              class="w-[88px]"
-              @update:value="(v) => setExcipientNumber(index, v as number | null)"
+            <Empty
+              v-if="!prescriptionTypeLoading && !prescriptionTypeAllowed"
+              :description="
+                prescriptionTypeDenyMessage || '当前门店未开通开方权限'
+              "
+              class="py-20"
             />
-            <Button type="primary" size="small" :disabled="isSpecialPrescriptionCartLocked" @click="incrementExcipient(index)">+</Button>
-            <template v-if="item.quick_numbers?.length">
-              <Tag
-                v-for="qty in item.quick_numbers"
-                :key="`${item.id}-${qty}`"
-                class="m-0 cursor-pointer"
-                :color="Number(item.number) === Number(qty) ? 'blue' : undefined"
-                @click="applyExcipientQuickNumber(index, qty)"
-              >{{ qty }}</Tag>
-            </template>
-          </div>
-          <span class="w-20 text-right">¥{{ item.price }}</span>
-          <Button v-if="!isSpecialPrescriptionCartLocked" type="link" size="small" @click="removeExcipient(index)">删除</Button>
-        </div>
-        <div v-if="currentExcipients.length === 0" class="text-sm text-[hsl(var(--muted-foreground))]">未添加辅料</div>
-      </div>
 
-      <!-- 诊断和医嘱 -->
-      <div class="diagnosis-area">
-        <ChineseMedicineConfig
-          v-if="activeCategory === 1"
-          :key="`cmc-${selectPatientId || 0}-${Number(myStoreId || 0)}`"
-          :rule-type="ruleType"
-          :package-method-id="packageMethodId"
-          :process-rule-id="processRuleId"
-          :child-process-rule-id="childProcessRuleId"
-          :process-rule-note-id="processRuleNoteId"
-          :dosage="dosage"
-          :day-dosage="dayDosage"
-          :process-rule-list="processRuleList"
-          :child-process-rule-list="childProcessRuleList"
-          :process-rule-note-list="processRuleNoteList"
-          :disabled="isSpecialPrescriptionCartLocked"
-          :error-keys="chineseErrorKeys"
-          :store-id="Number(myStoreId || 0)"
-          :auto-apply-default="processPresetAutoApply"
-          class="mb-5 p-3"
-          @change="handleChineseConfigChange"
-        />
-        <div class="mb-2">
-          <div class="mr-field-head mb-1">
-            <span class="mr-field-label font-medium">诊断</span>
-            <div class="mr-field-search">
-              <EntryKeywordBubble
-                source="diagnosis"
-                placeholder="诊断关键字"
-                compact
-                @select="(item) => onPickDiagnosis(item.content || item.title)"
-              />
-            </div>
-          </div>
-          <Textarea
-            v-model:value="diagnosis"
-            :rows="2"
-            placeholder="输入诊断结果..."
-          />
-          <CommonDxOrderChips
-            source="diagnosis"
-            :limit="8"
-            :field-value="diagnosis"
-            collapsible
-            default-collapsed
-            @select="onPickDiagnosis"
-          />
-        </div>
-        <div class="mb-2">
-          <div class="mr-field-head mb-1">
-            <span class="mr-field-label font-medium">医嘱</span>
-            <div class="mr-field-search">
-              <EntryKeywordBubble
-                source="doctor_order"
-                placeholder="医嘱关键字"
-                compact
-                @select="(item) => onPickDoctorOrder(item.content || item.title)"
-              />
-            </div>
-          </div>
-          <Textarea
-            v-model:value="medicalAdvice"
-            :rows="2"
-            placeholder="输入医嘱..."
-          />
-          <CommonDxOrderChips
-            source="doctor_order"
-            :limit="8"
-            :field-value="medicalAdvice"
-            collapsible
-            default-collapsed
-            @select="onPickDoctorOrder"
-          />
-        </div>
-        诊疗费用：
-        <InputNumber
-          v-model:value="treatmentPrice"
-          placeholder="请输入诊疗价格"
-        >
-          <template #addonAfter> /元</template>
-        </InputNumber>
-      </div>
-
-      <!-- 费用总计：液态玻璃浮层。缩小时改成横条，金额都还在 -->
-      <div
-        class="price-box"
-        :class="{ 'is-mini': pricePanelMini }"
-      >
-        <div class="price-glass-bar">
-          <div class="price-glass-head">
-            <span v-if="!pricePanelMini">费用</span>
-            <span class="price-glass-tools">
-            <button
-              type="button"
-              class="price-glass-shrink"
-              :title="pricePanelMini ? '展开' : '缩小'"
-              :aria-label="pricePanelMini ? '展开费用面板' : '缩小费用面板'"
-              @click="setPricePanelMini(!pricePanelMini)"
-            >
-              <ExpandOutlined v-if="pricePanelMini" />
-              <ShrinkOutlined v-else />
-            </button>
-            <button
-              v-if="pricePanelMini"
-              type="button"
-              class="price-glass-shrink"
-              :class="{ 'is-on': pricePanelShowActions }"
-              :title="pricePanelShowActions ? '隐藏发送和另存为' : '显示发送和另存为'"
-              :aria-pressed="pricePanelShowActions"
-              @click="setPricePanelShowActions(!pricePanelShowActions)"
-            >
-              按钮
-            </button>
-            </span>
-          </div>
-          <div class="price-glass-metrics">
-            <div class="price-glass-row is-money">
-              <span>加工费</span>
-              <b>¥{{ formatPriceDisplay(processingFee) }}</b>
-            </div>
-            <div class="price-glass-row is-money">
-              <span>商品价格</span>
-              <b>
-                <Button
-                  v-if="priceAdjustEnabled && currentDrugs.length && !isSpecialPrescriptionCartLocked"
-                  type="link"
-                  class="!h-auto !p-0"
-                  @click="openOrderPriceAdjust"
+            <div v-else class="rx-workspace-scroll">
+              <div v-show="!canUseMedicalRecord || rxMrTab === 'rx'">
+                <!-- 二级 Tab：处方类型，随内容区滚动，病历态不展示 -->
+                <Tabs
+                  :active-key="String(activeCategory)"
+                  class="rx-secondary-tabs mb-2"
+                  size="small"
+                  @change="(key) => tabChange(Number(key))"
                 >
-                  ¥{{ formatPriceDisplay(totalProductCost) }}
-                </Button>
-                <template v-else>¥{{ formatPriceDisplay(totalProductCost) }}</template>
-              </b>
+                  <TabPane
+                    v-for="categoryItem in categories"
+                    :key="String(categoryItem.value)"
+                  >
+                    <template #tab>
+                      <span
+                        :id="`rx-pc-tab-${categoryItem.value}`"
+                        class="rx-secondary-tab-label"
+                      >
+                        <img
+                          v-if="categoryItem.icon"
+                          class="tab-type-icon"
+                          :src="categoryItem.icon"
+                          alt=""
+                        />
+                        <span>{{ categoryItem.label }}</span>
+                        <span
+                          v-if="categoryItem.icon_text"
+                          class="tab-type-badge"
+                          >{{ categoryItem.icon_text }}</span>
+                      </span>
+                    </template>
+                  </TabPane>
+                </Tabs>
+                <div class="rx-swipe-panel">
+                  <SpecialPrescriptionImportCard
+                    v-if="hasSpecialPrescriptionRecord"
+                    class="mt-5 max-w-xl"
+                    :record="specialPrescriptionRecord"
+                    :purchase-label="specialPrescriptionPurchaseLabel"
+                    :loading="applyingSpecialPrescription"
+                    @apply="() => handleApplySpecialPrescription()"
+                  />
+
+                  <SalespersonTransferDrawer
+                    v-model:open="salespersonTransferDrawerOpen"
+                    :register-id="doctorReceptionRegisterId"
+                    @import="handleSalespersonTransferImport"
+                  />
+                  <div style="width: 0; height: 0; overflow: hidden">
+                    <ImagePreviewGroup
+                      :preview="{
+                        visible,
+                        onVisibleChange: setVisible,
+                      }"
+                      :style="{ display: 'none' }"
+                    >
+                      <Image
+                        v-for="image in previewImage"
+                        v-if="visible === true"
+                        :src="image"
+                        :width="200"
+                      />
+                    </ImagePreviewGroup>
+                  </div>
+                  <!-- 已选药品列表 -->
+                  <div
+                    v-if="activeCategory === 1"
+                    class="mb-3 mt-2 flex items-center justify-between text-base font-medium text-gray-700"
+                  >
+                    <span>已选 {{ currentDrugs.length }} 种药</span>
+                    <Button
+                      v-if="
+                        currentDrugs.length > 0 &&
+                        !isSpecialPrescriptionCartLocked
+                      "
+                      type="link"
+                      size="small"
+                      @click="batchUpdateChinesePrices"
+                    >
+                      批量更新价格
+                    </Button>
+                  </div>
+                  <!-- 中药 -->
+                  <div
+                    v-if="activeCategory === 1"
+                    class="mb-5 mt-3 flex"
+                    style="flex-wrap: wrap; width: 100%"
+                  >
+                    <Row>
+                      <Col
+                        v-for="(drug, index) in currentDrugs"
+                        :key="`${drug.index_id || drug.id}-${index}`"
+                        :lg="12"
+                        :md="24"
+                        :sm="24"
+                        :xl="leftShow ? 12 : 8"
+                        :xs="leftShow ? 12 : 8"
+                        :xxl="leftShow ? 8 : 6"
+                      >
+                        <Card class="mt-0" title="">
+                          <div class="chinese-drug-card">
+                            <span class="card-index">{{ index + 1 }}、</span>
+                            <div class="chinese-drug-row">
+                              <ChineseDrugNameBubble
+                                :display-name="drug.drug_name"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                :store-id="myStoreId"
+                                :register-id="getRegisterId()"
+                                :type="1"
+                                compact
+                                input-class="old-select-drug-name"
+                                placeholder="药名"
+                                @select="
+                                  (item) => onSelectOldChineseDrug(index, item)
+                                "
+                              />
+                              <span class="chinese-drug-sep">,</span>
+                              <InputNumber
+                                v-model:value="drug.number"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                :class="`chinese-drug-num old-number-input-${index}`"
+                                :controls="false"
+                                :style="{ width: '108px' }"
+                                @blur="updateChineseNumber"
+                                @keydown="updateChineseNumberGoNewDrug($event)"
+                              >
+                                <template #addonAfter>
+{{
+                                  drug.unit?.name || 'g'
+                                }}
+</template>
+                              </InputNumber>
+                            </div>
+                            <!-- 三块同一行：煎法 | 价格(可换行) | 更新价格；避开 .card-price 绝对定位 -->
+                            <div class="chinese-drug-meta">
+                              <ChineseDrugWayBubble
+                                class="meta-way"
+                                :model-value="drug?.way_id || 0"
+                                :options="drugUseWay"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                trigger="link"
+                                placeholder="煎法"
+                                @change="
+                                  (id) => onChineseDrugWayChange(index, id)
+                                "
+                              />
+                              <div class="chinese-drug-meta-price">
+                                <span class="chinese-drug-price-amount">
+                                  ￥{{
+                                    (drug.price * (drug.number || 0)).toFixed(2)
+                                  }}
+                                </span>
+                                <span
+                                  v-if="
+                                    getChineseItemMargin(drug) &&
+                                    getChineseItemMargin(drug) !== '--'
+                                  "
+                                  class="chinese-drug-margin"
+                                >
+                                  毛利率 {{ getChineseItemMargin(drug) }}%
+                                </span>
+                              </div>
+                              <Button
+                                v-if="!isSpecialPrescriptionCartLocked"
+                                class="meta-update"
+                                type="link"
+                                size="small"
+                                @click="updateOneChinesePrice(index)"
+                              >
+                                更新价格
+                              </Button>
+                            </div>
+                            <Button
+                              v-if="!isSpecialPrescriptionCartLocked"
+                              class="card-delete"
+                              type="link"
+                              @click="removeDrug(index)"
+                            >
+                              <DeleteTwoTone />
+                            </Button>
+                          </div>
+                        </Card>
+                      </Col>
+                      <Col
+                        v-if="!isSpecialPrescriptionCartLocked"
+                        :lg="12"
+                        :md="12"
+                        :sm="12"
+                        :xl="leftShow ? 12 : 8"
+                        :xs="leftShow ? 12 : 8"
+                        :xxl="leftShow ? 8 : 6"
+                      >
+                        <Card title="">
+                          <div class="chinese-drug-card">
+                            <span class="card-index">{{ currentDrugs.length + 1 }}、</span>
+                            <div class="chinese-drug-row">
+                              <ChineseDrugNameBubble
+                                :display-name="newDrugInfo.name || ''"
+                                :store-id="myStoreId"
+                                :register-id="getRegisterId()"
+                                :type="1"
+                                compact
+                                input-class="new-select-drug-name"
+                                placeholder="药名"
+                                @select="onSelectNewChineseDrug"
+                              />
+                              <span class="chinese-drug-sep">,</span>
+                              <InputNumber
+                                v-model:value="newDrugInfo.number"
+                                class="chinese-drug-num new-number-input"
+                                :style="{ width: '108px' }"
+                                @blur="newDrugBlur"
+                                @keydown="selectDrugByNewDrugInfo($event, true)"
+                              >
+                                <template #addonAfter>
+{{
+                                  newDrugInfo.unit?.name || 'g'
+                                }}
+</template>
+                              </InputNumber>
+                            </div>
+                            <div class="chinese-drug-meta">
+                              <ChineseDrugWayBubble
+                                v-model="newDrugInfo.way_id"
+                                :options="drugUseWay"
+                                trigger="link"
+                                placeholder="煎法"
+                              />
+                              <p class="card-price">
+                                ￥<span>{{
+                                    (
+                                      (newDrugInfo.price || 0) *
+                                      (newDrugInfo.number || 0)
+                                    ).toFixed(2)
+                                  }}元</span>
+                              </p>
+                            </div>
+                          </div>
+                        </Card>
+                      </Col>
+                      <!-- 不知道为什么会出问题 -->
+                      <Col
+                        v-if="currentDrugs.length < 3"
+                        :lg="12"
+                        :md="24"
+                        :sm="24"
+                        :xl="12"
+                        :xs="24"
+                        :xxl="8"
+                      >
+                        <Card title="" style="opacity: 0">
+                          <div>
+                            <span class="card-index">{{ currentDrugs.length + 1 }}、</span>
+                            <div>
+                              <Select
+                                v-model:value="newDrugInfo.id"
+                                :filter-option="false"
+                                class="new-select-drug-name w-1/5"
+                                style="min-width: 100px"
+                                placeholder="药名"
+                                show-search
+                                @change="selectNewDrugInfo"
+                                @search="searchOption"
+                                disabled
+                              >
+                                <SelectOption
+                                  v-for="(value, index) in drugList"
+                                  :key="index"
+                                  :value="value.drug_id"
+                                  disabled
+                                >
+                                  {{ value.drug.drug_name }}
+                                </SelectOption>
+                              </Select>
+                              ,
+                              <InputNumber
+                                v-model:value="newDrugInfo.number"
+                                class="new-number-input w-1/5"
+                                style="min-width: 100px"
+                                @blur="updateChineseNumber"
+                                @keydown="selectDrugByNewDrugInfo($event, true)"
+                                disabled
+                              >
+                                <template #addonAfter>
+{{
+                                  newDrugInfo.unit?.name || 'g'
+                                }}
+</template>
+                              </InputNumber>
+                              ,
+                              <span>
+                                <Select
+                                  v-model:value="newDrugInfo.way_id"
+                                  placeholder="用法"
+                                  @keydown="
+                                    selectDrugByNewDrugInfo($event, true)
+                                  "
+                                  disabled
+                                >
+                                  <SelectOption :value="0">煎服</SelectOption>
+                                  <SelectOption
+                                    v-for="(value, index) in drugUseWay"
+                                    :key="index"
+                                    :value="value.id"
+                                  >
+                                    {{ value.name }}
+                                  </SelectOption>
+                                </Select>
+                              </span>
+                              <p class="card-price">
+                                ￥<span>{{
+                                    (
+                                      (newDrugInfo.price || 0) *
+                                      (newDrugInfo.number || 0)
+                                    ).toFixed(2)
+                                  }}元</span>
+                              </p>
+                            </div>
+                          </div>
+                        </Card>
+                      </Col>
+                      <Col
+                        v-if="currentDrugs.length < 3"
+                        :lg="12"
+                        :md="24"
+                        :sm="24"
+                        :xl="12"
+                        :xs="24"
+                        :xxl="8"
+                      >
+                        <Card title="" style="opacity: 0">
+                          <div>
+                            <span class="card-index">{{ currentDrugs.length + 1 }}、</span>
+                            <div>
+                              <Select
+                                v-model:value="newDrugInfo.id"
+                                :filter-option="false"
+                                class="new-select-drug-name w-1/5"
+                                style="min-width: 100px"
+                                placeholder="药名"
+                                show-search
+                                @change="selectNewDrugInfo"
+                                @search="searchOption"
+                                disabled
+                              >
+                                <SelectOption
+                                  v-for="(value, index) in drugList"
+                                  :key="index"
+                                  :value="value.drug_id"
+                                  disabled
+                                >
+                                  {{ value.drug.drug_name }}
+                                </SelectOption>
+                              </Select>
+                              ,
+                              <InputNumber
+                                v-model:value="newDrugInfo.number"
+                                class="new-number-input w-1/5"
+                                style="min-width: 100px"
+                                @blur="updateChineseNumber"
+                                @keydown="selectDrugByNewDrugInfo($event, true)"
+                                disabled
+                              >
+                                <template #addonAfter>
+{{
+                                  newDrugInfo.unit?.name || 'g'
+                                }}
+</template>
+                              </InputNumber>
+                              ,
+                              <span>
+                                <Select
+                                  v-model:value="newDrugInfo.way_id"
+                                  placeholder="用法"
+                                  @blur="updateChineseNumber"
+                                  @keydown="
+                                    selectDrugByNewDrugInfo($event, true)
+                                  "
+                                  disabled
+                                >
+                                  <SelectOption :value="0">煎服</SelectOption>
+                                  <SelectOption
+                                    v-for="(value, index) in drugUseWay"
+                                    :key="index"
+                                    :value="value.id"
+                                  >
+                                    {{ value.name }}
+                                  </SelectOption>
+                                </Select>
+                              </span>
+                              <p class="card-price">
+                                ￥<span>{{
+                                    (
+                                      (newDrugInfo.price || 0) *
+                                      (newDrugInfo.number || 0)
+                                    ).toFixed(2)
+                                  }}元</span>
+                              </p>
+                            </div>
+                          </div>
+                        </Card>
+                      </Col>
+                    </Row>
+                  </div>
+                  <!-- 西（中成）药列表（type=2） -->
+                  <div v-else-if="activeCategory === 2" class="selected-drugs">
+                    <div class="drug-table">
+                      <div class="table-header">
+                        <span v-if="activeCategory !== 1">商品图片</span>
+                        <span>商品名称</span>
+                        <span>数量</span>
+                        <span>单价</span>
+                        <span>操作</span>
+                      </div>
+                      <div class="table-body">
+                        <div
+                          v-for="(drug, index) in currentDrugs"
+                          :key="drug.id"
+                          class="table-row"
+                        >
+                          <div
+                            v-if="activeCategory !== 1"
+                            style="width: 120px; margin: 0 auto"
+                          >
+                            <Image :src="drug.image" />
+                          </div>
+                          <div>
+                            <p>
+                              <span>药品名称：{{ drug.drug_name }}</span>
+                            </p>
+                            <!-- 西药用法显示/编辑模式 -->
+                            <p v-if="activeCategory !== 1 && !drug.isEditing">
+                              <span>用法：{{
+                                  `${drug.use_type?.name}，${drug.use_frequency?.name}，${drug.use_num?.name}，每次${drug.number}${drug.unit?.name}`
+                                }}</span>
+                            </p>
+                            <div
+                              v-else-if="activeCategory !== 1 && drug.isEditing"
+                              class="edit-usage-form"
+                            >
+                              <span>用法：</span>
+                              <Select
+                                :value="drug.use_type?.id"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                size="small"
+                                style="width: 80px"
+                                @change="
+                                  (val) =>
+                                    updateDrugUsage(
+                                      index,
+                                      'use_type',
+                                      drugUseType.find(
+                                        (item) => item.id === val,
+                                      ),
+                                    )
+                                "
+                              >
+                                <SelectOption
+                                  v-for="item in drugUseType"
+                                  :key="item.id"
+                                  :value="item.id"
+                                >
+                                  {{ item.name }}
+                                </SelectOption>
+                              </Select>
+                              <Select
+                                :value="drug.use_frequency?.id"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                size="small"
+                                style="width: 100px; margin-left: 4px"
+                                @change="
+                                  (val) =>
+                                    updateDrugUsage(
+                                      index,
+                                      'use_frequency',
+                                      drugUseFrequency.find(
+                                        (item) => item.id === val,
+                                      ),
+                                    )
+                                "
+                              >
+                                <SelectOption
+                                  v-for="item in drugUseFrequency"
+                                  :key="item.id"
+                                  :value="item.id"
+                                >
+                                  {{ item.name }}
+                                </SelectOption>
+                              </Select>
+                              <Select
+                                :value="drug.use_num?.id"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                size="small"
+                                style="width: 80px; margin-left: 4px"
+                                @change="
+                                  (val) =>
+                                    updateDrugUsage(
+                                      index,
+                                      'use_num',
+                                      drugTime.find((item) => item.id === val),
+                                    )
+                                "
+                              >
+                                <SelectOption
+                                  v-for="item in drugTime"
+                                  :key="item.id"
+                                  :value="item.id"
+                                >
+                                  {{ item.name }}
+                                </SelectOption>
+                              </Select>
+                              <span style="margin-left: 4px">每次</span>
+                              <InputNumber
+                                v-model:value="drug.number"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                :min="1"
+                                size="small"
+                                style="width: 60px; margin-left: 4px"
+                              />
+                              <Select
+                                :value="drug.unit?.id"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                size="small"
+                                style="width: 60px; margin-left: 4px"
+                                @change="
+                                  (val) =>
+                                    updateDrugUsage(
+                                      index,
+                                      'unit',
+                                      drugUnit.find((item) => item.id === val),
+                                    )
+                                "
+                              >
+                                <SelectOption
+                                  v-for="item in drugUnit"
+                                  :key="item.id"
+                                  :value="item.id"
+                                >
+                                  {{ item.name }}
+                                </SelectOption>
+                              </Select>
+                            </div>
+                          </div>
+                          <div>
+                            <div
+                              v-if="activeCategory === 1"
+                              class="quantity-control"
+                            >
+                              <InputNumber
+                                v-model:value="drug.select_number"
+                                class="w-full"
+                                @blur="updateChineseNumber"
+                              >
+                                <template #addonAfter>
+{{
+                                  drug.unit?.name || 'g'
+                                }}
+</template>
+                              </InputNumber>
+                            </div>
+                            <div v-else class="quantity-control">
+                              <Button
+                                type="primary"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                @click="decrement(index)"
+                                >
+-
+</Button>
+                              <span style="margin: 0 20px">{{
+                                drug.select_number
+                              }}</span>
+                              <Button
+                                type="primary"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                @click="increment(index)"
+                                >
++
+</Button>
+                            </div>
+                          </div>
+                          <span>{{ drug.price }}</span>
+                          <div>
+                            <Button
+                              v-if="
+                                activeCategory !== 1 &&
+                                !drug.isEditing &&
+                                !isSpecialPrescriptionCartLocked
+                              "
+                              type="link"
+                              @click="toggleEditDrug(index)"
+                              >
+编辑
+</Button>
+                            <Button
+                              v-if="activeCategory !== 1 && drug.isEditing"
+                              type="link"
+                              @click="saveEditDrug(index)"
+                              >
+保存
+</Button>
+                            <Button
+                              v-if="!isSpecialPrescriptionCartLocked"
+                              type="link"
+                              @click="removeDrug(index)"
+                              >
+删除
+</Button>
+                            <Button
+                              v-if="drug.instruction !== ''"
+                              type="link"
+                              @click="setVisible(true, drug.instruction)"
+                            >
+                              查看说明书
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- 简单产品列表（type=3,5,6,7：保健食品、产品服务包、非药品、医疗器械） -->
+                  <div
+                    v-else-if="[3, 5, 6, 7].includes(activeCategory)"
+                    class="selected-drugs"
+                  >
+                    <!-- 搜索组件 -->
+                    <div class="mb-5">
+                      <DrugSearchSelect
+                        v-if="!isSpecialPrescriptionCartLocked"
+                        :type="activeCategory"
+                        :store-id="myStoreId"
+                        :placeholder="`输入${categories.find((c) => c.value === activeCategory)?.label || '商品'}名称搜索`"
+                        @select="handleSimpleProductSelect"
+                      />
+                    </div>
+                    <!-- 已选商品列表（表格形式，与西药一致） -->
+                    <div class="drug-table">
+                      <div class="table-header">
+                        <span>商品图片</span>
+                        <span>商品名称</span>
+                        <span>数量</span>
+                        <span>单价</span>
+                        <span>操作</span>
+                      </div>
+                      <div class="table-body">
+                        <div
+                          v-for="(drug, index) in currentDrugs"
+                          :key="drug.id"
+                          class="table-row"
+                        >
+                          <div style="width: 120px; margin: 0 auto">
+                            <Image :src="drug.image" />
+                          </div>
+                          <div>
+                            <p>
+                              <span>药品名称：{{ drug.drug_name }}</span>
+                            </p>
+                          </div>
+                          <div>
+                            <div class="quantity-control">
+                              <Button
+                                type="primary"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                @click="decrement(index)"
+                                >
+-
+</Button>
+                              <span style="margin: 0 20px">{{
+                                drug.select_number
+                              }}</span>
+                              <Button
+                                type="primary"
+                                :disabled="isSpecialPrescriptionCartLocked"
+                                @click="increment(index)"
+                                >
++
+</Button>
+                            </div>
+                          </div>
+                          <span>{{ drug.price }}</span>
+                          <div>
+                            <Button
+                              v-if="!isSpecialPrescriptionCartLocked"
+                              type="link"
+                              @click="removeDrug(index)"
+                              >
+删除
+</Button>
+                            <Button
+                              v-if="drug.instruction !== ''"
+                              type="link"
+                              @click="setVisible(true, drug.instruction)"
+                            >
+                              查看说明书
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 中药辅料：挂在药味下方、制剂配置上方 -->
+                  <div
+                    v-if="activeCategory === 1"
+                    class="mb-5 rounded border border-[hsl(var(--border))] p-3"
+                  >
+                    <div
+                      class="mb-2 flex items-center justify-between font-medium text-[hsl(var(--foreground))]"
+                    >
+                      <span>辅料（可选）</span>
+                      <span
+                        class="text-sm font-normal text-[hsl(var(--muted-foreground))]"
+                        >单价×数量×剂数，分账全归平台</span>
+                    </div>
+                    <DrugSearchSelect
+                      v-if="!isSpecialPrescriptionCartLocked"
+                      :type="8"
+                      :store-id="myStoreId"
+                      :register-id="getRegisterId()"
+                      placeholder="搜索辅料名称添加"
+                      class="mb-3"
+                      @select="handleExcipientSelect"
+                    />
+                    <div
+                      v-for="(item, index) in currentExcipients"
+                      :key="item.id"
+                      class="mb-2 flex flex-wrap items-center justify-between gap-3 text-sm"
+                    >
+                      <span class="min-w-0 flex-1 truncate">
+                        {{ item.drug_name }}
+                        <span
+                          v-if="item.specification"
+                          class="ml-1 text-[hsl(var(--muted-foreground))]"
+                          >（{{ item.specification }}）</span>
+                      </span>
+                      <div
+                        class="quantity-control flex flex-wrap items-center gap-2"
+                      >
+                        <Button
+                          type="primary"
+                          size="small"
+                          :disabled="isSpecialPrescriptionCartLocked"
+                          @click="decrementExcipient(index)"
+                          >
+-
+</Button>
+                        <InputNumber
+                          :value="item.number"
+                          :min="0.01"
+                          :step="1"
+                          :disabled="isSpecialPrescriptionCartLocked"
+                          size="small"
+                          class="w-[88px]"
+                          @update:value="
+                            (v) => setExcipientNumber(index, v as number | null)
+                          "
+                        />
+                        <Button
+                          type="primary"
+                          size="small"
+                          :disabled="isSpecialPrescriptionCartLocked"
+                          @click="incrementExcipient(index)"
+                          >
++
+</Button>
+                        <template v-if="item.quick_numbers?.length">
+                          <Tag
+                            v-for="qty in item.quick_numbers"
+                            :key="`${item.id}-${qty}`"
+                            class="m-0 cursor-pointer"
+                            :color="
+                              Number(item.number) === Number(qty)
+                                ? 'blue'
+                                : undefined
+                            "
+                            @click="applyExcipientQuickNumber(index, qty)"
+                            >
+{{ qty }}
+</Tag>
+                        </template>
+                      </div>
+                      <span class="w-20 text-right">¥{{ item.price }}</span>
+                      <Button
+                        v-if="!isSpecialPrescriptionCartLocked"
+                        type="link"
+                        size="small"
+                        @click="removeExcipient(index)"
+                        >
+删除
+</Button>
+                    </div>
+                    <div
+                      v-if="currentExcipients.length === 0"
+                      class="text-sm text-[hsl(var(--muted-foreground))]"
+                    >
+                      未添加辅料
+                    </div>
+                  </div>
+
+                  <!-- 诊断和医嘱 -->
+                  <div class="diagnosis-area">
+                    <ChineseMedicineConfig
+                      v-if="activeCategory === 1"
+                      :key="`cmc-${selectPatientId || 0}-${Number(myStoreId || 0)}`"
+                      :rule-type="ruleType"
+                      :package-method-id="packageMethodId"
+                      :process-rule-id="processRuleId"
+                      :child-process-rule-id="childProcessRuleId"
+                      :process-rule-note-id="processRuleNoteId"
+                      :dosage="dosage"
+                      :day-dosage="dayDosage"
+                      :process-rule-list="processRuleList"
+                      :child-process-rule-list="childProcessRuleList"
+                      :process-rule-note-list="processRuleNoteList"
+                      :disabled="isSpecialPrescriptionCartLocked"
+                      :error-keys="chineseErrorKeys"
+                      :store-id="Number(myStoreId || 0)"
+                      :auto-apply-default="processPresetAutoApply"
+                      class="mb-5 p-3"
+                      @change="handleChineseConfigChange"
+                    />
+                    <div class="mb-2">
+                      <div class="mr-field-head mb-1">
+                        <span class="mr-field-label font-medium">诊断</span>
+                        <div class="mr-field-search">
+                          <EntryKeywordBubble
+                            source="diagnosis"
+                            placeholder="诊断关键字"
+                            compact
+                            @select="
+                              (item) =>
+                                onPickDiagnosis(item.content || item.title)
+                            "
+                          />
+                        </div>
+                      </div>
+                      <Textarea
+                        v-model:value="diagnosis"
+                        :rows="2"
+                        placeholder="输入诊断结果..."
+                      />
+                      <CommonDxOrderChips
+                        source="diagnosis"
+                        :limit="8"
+                        :field-value="diagnosis"
+                        collapsible
+                        default-collapsed
+                        @select="onPickDiagnosis"
+                      />
+                    </div>
+                    <div class="mb-2">
+                      <div class="mr-field-head mb-1">
+                        <span class="mr-field-label font-medium">医嘱</span>
+                        <div class="mr-field-search">
+                          <EntryKeywordBubble
+                            source="doctor_order"
+                            placeholder="医嘱关键字"
+                            compact
+                            @select="
+                              (item) =>
+                                onPickDoctorOrder(item.content || item.title)
+                            "
+                          />
+                        </div>
+                      </div>
+                      <Textarea
+                        v-model:value="medicalAdvice"
+                        :rows="2"
+                        placeholder="输入医嘱..."
+                      />
+                      <CommonDxOrderChips
+                        source="doctor_order"
+                        :limit="8"
+                        :field-value="medicalAdvice"
+                        collapsible
+                        default-collapsed
+                        @select="onPickDoctorOrder"
+                      />
+                    </div>
+                    诊疗费用：
+                    <InputNumber
+                      v-model:value="treatmentPrice"
+                      placeholder="请输入诊疗价格"
+                    >
+                      <template #addonAfter> /元</template>
+                    </InputNumber>
+                  </div>
+
+                  <!-- 费用总计：液态玻璃浮层。缩小时改成横条，金额都还在 -->
+                  <div class="price-box" :class="{ 'is-mini': pricePanelMini }">
+                    <div class="price-glass-bar">
+                      <div class="price-glass-head">
+                        <span v-if="!pricePanelMini">费用</span>
+                        <span class="price-glass-tools">
+                          <button
+                            type="button"
+                            class="price-glass-shrink"
+                            :title="pricePanelMini ? '展开' : '缩小'"
+                            :aria-label="
+                              pricePanelMini ? '展开费用面板' : '缩小费用面板'
+                            "
+                            @click="setPricePanelMini(!pricePanelMini)"
+                          >
+                            <ExpandOutlined v-if="pricePanelMini" />
+                            <ShrinkOutlined v-else />
+                          </button>
+                          <button
+                            v-if="pricePanelMini"
+                            type="button"
+                            class="price-glass-shrink"
+                            :class="{ 'is-on': pricePanelShowActions }"
+                            :title="
+                              pricePanelShowActions
+                                ? '隐藏发送和另存为'
+                                : '显示发送和另存为'
+                            "
+                            :aria-pressed="pricePanelShowActions"
+                            @click="
+                              setPricePanelShowActions(!pricePanelShowActions)
+                            "
+                          >
+                            按钮
+                          </button>
+                        </span>
+                      </div>
+                      <div class="price-glass-metrics">
+                        <div class="price-glass-row is-money">
+                          <span>加工费</span>
+                          <b>¥{{ formatPriceDisplay(processingFee) }}</b>
+                        </div>
+                        <div class="price-glass-row is-money">
+                          <span>商品价格</span>
+                          <b>
+                            <Button
+                              v-if="
+                                priceAdjustEnabled &&
+                                currentDrugs.length &&
+                                !isSpecialPrescriptionCartLocked
+                              "
+                              type="link"
+                              class="!h-auto !p-0"
+                              @click="openOrderPriceAdjust"
+                            >
+                              ¥{{ formatPriceDisplay(totalProductCost) }}
+                            </Button>
+                            <template v-else>¥{{
+                                formatPriceDisplay(totalProductCost)
+                              }}</template>
+                          </b>
+                        </div>
+                        <div
+                          v-if="chineseGrossMarginPercent !== null"
+                          class="price-glass-row"
+                        >
+                          <span>毛利率</span>
+                          <b>{{ chineseGrossMarginPercent }}%</b>
+                        </div>
+                        <div class="price-glass-row is-total is-money">
+                          <span>总计</span>
+                          <b>¥{{ formatPriceDisplay(totalCost) }}</b>
+                        </div>
+                        <div
+                          v-if="priceAdjustEnabled && currentDrugs.length"
+                          class="price-glass-extra"
+                        >
+                          浮动 {{ priceDiscountLabel || '无' }}
+                          <Button
+                            v-if="priceDiscount !== 100"
+                            type="link"
+                            size="small"
+                            @click="clearCartPriceDiscount"
+                          >
+                            清除
+                          </Button>
+                        </div>
+                      </div>
+                      <div
+                        v-if="!pricePanelMini || pricePanelShowActions"
+                        class="price-glass-actions"
+                      >
+                        <Button
+                          type="primary"
+                          size="small"
+                          @click="submitCurrentPrescription"
+                        >
+                          发送处方
+                        </Button>
+                        <Button
+                          v-if="canUseCommonPrescription && currentDrugs.length"
+                          type="link"
+                          size="small"
+                          @click="openSaveCommonPrescriptionModal"
+                        >
+                          另存为常用方
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- VIP 开通才挂载；Tab 用 v-show 保活，避免处方态 AI 出方 getPayload 拿不到病历 -->
+              <div
+                v-if="canUseMedicalRecord"
+                v-show="rxMrTab === 'mr'"
+                class="medical-record-wrap"
+              >
+                <MedicalRecordPanel
+                  ref="medicalRecordPanelRef"
+                  v-model:diagnosis="diagnosis"
+                  v-model:medical-advice="medicalAdvice"
+                  :register-id="doctorReceptionRegisterId"
+                  :store-id="Number(myStoreId || 0)"
+                  :user-patient-id="Number(activePatient?.id || 0)"
+                  :patient-sex="Number(activePatient?.sex || 0)"
+                  :patient-age="Number(activePatient?.age || 0)"
+                  :patient-name="String(activePatient?.name || '')"
+                  :store-vip="receptionVip"
+                  :show-toolbar="false"
+                />
+              </div>
             </div>
-            <div v-if="chineseGrossMarginPercent !== null" class="price-glass-row">
-              <span>毛利率</span>
-              <b>{{ chineseGrossMarginPercent }}%</b>
-            </div>
-            <div class="price-glass-row is-total is-money">
-              <span>总计</span>
-              <b>¥{{ formatPriceDisplay(totalCost) }}</b>
-            </div>
-            <div v-if="priceAdjustEnabled && currentDrugs.length" class="price-glass-extra">
-              浮动 {{ priceDiscountLabel || '无' }}
-              <Button v-if="priceDiscount !== 100" type="link" size="small" @click="clearCartPriceDiscount">
-                清除
+            <!-- /rx-workspace-scroll -->
+          </div>
+          <!-- /rx-workspace -->
+        </Spin>
+      </Page>
+      <!-- 处方发送成功页：摘要与代付入口都在面板上，不自动打开处方记录抽屉 -->
+      <Page v-else-if="tabType === 3" class="prescription-panel">
+        <PatientBriefBar
+          :register="patientInfo"
+          :patient="activePatient"
+          :category="category"
+          :store-name="currentStoreName"
+          :is-online="false"
+        />
+        <!-- 成功页布局对齐 C 端付款成功页（shop/paied.vue）：
+           白色圆角卡居中大图标 + 胶囊小按钮，明细行复用 C 端收银台（record-pay.vue）的 label/value 形态 -->
+        <div class="rx-sent-wrap">
+          <!-- 卡 1：成功卡（大图标 + 标题 + 描边胶囊小按钮） -->
+          <div class="rx-sent-card rx-sent-hero">
+            <CheckCircleFilled class="rx-sent-icon" />
+            <h3 class="rx-sent-title">处方已发送</h3>
+            <p class="rx-sent-sub">已推送到患者微信 · 支付完成后门店按方发药</p>
+            <div class="rx-sent-pills">
+              <Button
+                shape="round"
+                size="small"
+                @click="openPatientRxHistoryDrawer"
+                >
+处方记录
+</Button>
+              <Button
+                v-if="canEndReception"
+                shape="round"
+                size="small"
+                danger
+                @click="endOfDiagnosis"
+              >
+                <StopOutlined />
+                结束接诊
               </Button>
             </div>
           </div>
-          <div v-if="!pricePanelMini || pricePanelShowActions" class="price-glass-actions">
-            <Button type="primary" size="small" @click="submitCurrentPrescription">
-              发送处方
+          <!-- 卡 2：订单明细（label 加粗深色 / 值灰色，合计行大号金额） -->
+          <div class="rx-sent-card rx-sent-detail">
+            <div class="rx-sent-row">
+              <span>订单号</span>
+              <b>{{ sentPrescriptionInfo?.order_no || '—' }}</b>
+            </div>
+            <div class="rx-sent-row">
+              <span>患者</span>
+              <b>{{ sentPrescriptionInfo?.patient_name || '—' }}</b>
+            </div>
+            <div v-if="sentPrescriptionInfo?.diagnosis" class="rx-sent-row">
+              <span>诊断</span>
+              <b>{{ sentPrescriptionInfo.diagnosis }}</b>
+            </div>
+            <div class="rx-sent-row">
+              <span>订单状态</span>
+              <Tag
+                :color="
+                  Number(sentPrescriptionInfo?.is_pay) === 1
+                    ? 'success'
+                    : 'orange'
+                "
+                class="rx-sent-tag"
+              >
+                {{
+                  Number(sentPrescriptionInfo?.is_pay) === 1
+                    ? '已支付（公账先用后付）'
+                    : '待患者支付'
+                }}
+              </Tag>
+            </div>
+            <div class="rx-sent-total">
+              <span>总金额</span>
+              <span class="rx-sent-total-val">合计:
+                <b>¥{{ sentPrescriptionInfo?.total_pay_price || '0.00' }}</b></span>
+            </div>
+          </div>
+          <!-- 底部操作：胶囊主按钮（代付收款）+ 描边胶囊次按钮（继续开方），对齐 C 端底部通栏确认钮 -->
+          <div class="rx-sent-ops">
+            <!-- 代付入口：患者不便操作手机时，医生代其发起收款（复用代付码弹窗） -->
+            <Button
+              v-if="
+                sentPrescriptionInfo?.order_id &&
+                Number(sentPrescriptionInfo?.is_pay) !== 1
+              "
+              type="primary"
+              shape="round"
+              size="large"
+              class="rx-sent-main"
+              @click="openProxyPayQrcode(Number(sentPrescriptionInfo.order_id))"
+            >
+              <QrcodeOutlined />
+              代付收款
             </Button>
             <Button
-              v-if="canUseCommonPrescription && currentDrugs.length"
-              type="link"
-              size="small"
-              @click="openSaveCommonPrescriptionModal"
+              v-if="
+                sentPrescriptionInfo?.order_id &&
+                publicAccountPayEnabled &&
+                publicAccountPayTrigger === 'doctor_confirm' &&
+                publicAccountBillMode === 'daily' &&
+                Number(sentPrescriptionInfo?.is_pay) !== 1
+              "
+              type="primary"
+              shape="round"
+              size="large"
+              class="rx-sent-next"
+              :loading="publicAccountPaySubmitting"
+              @click="confirmDailyPublicAccountPay"
             >
-              另存为常用方
+              <BankOutlined />
+              公账支付
             </Button>
-          </div>
-        </div>
-      </div>
-      </div>
-      </div>
-
-      <!-- VIP 开通才挂载；Tab 用 v-show 保活，避免处方态 AI 出方 getPayload 拿不到病历 -->
-      <div
-        v-if="canUseMedicalRecord"
-        v-show="rxMrTab === 'mr'"
-        class="medical-record-wrap"
-      >
-        <MedicalRecordPanel
-          ref="medicalRecordPanelRef"
-          v-model:diagnosis="diagnosis"
-          v-model:medical-advice="medicalAdvice"
-          :register-id="doctorReceptionRegisterId"
-          :store-id="Number(myStoreId || 0)"
-          :user-patient-id="Number(activePatient?.id || 0)"
-          :patient-sex="Number(activePatient?.sex || 0)"
-          :patient-age="Number(activePatient?.age || 0)"
-          :patient-name="String(activePatient?.name || '')"
-          :store-vip="receptionVip"
-          :show-toolbar="false"
-        />
-      </div>
-      </div>
-      <!-- /rx-workspace-scroll -->
-      </div>
-      <!-- /rx-workspace -->
-      </Spin>
-    </Page>
-    <!-- 处方发送成功页：摘要与代付入口都在面板上，不自动打开处方记录抽屉 -->
-    <Page v-else-if="tabType === 3" class="prescription-panel">
-      <PatientBriefBar
-        :register="patientInfo"
-        :patient="activePatient"
-        :category="category"
-        :store-name="currentStoreName"
-        :is-online="false"
-      />
-      <!-- 成功页布局对齐 C 端付款成功页（shop/paied.vue）：
-           白色圆角卡居中大图标 + 胶囊小按钮，明细行复用 C 端收银台（record-pay.vue）的 label/value 形态 -->
-      <div class="rx-sent-wrap">
-        <!-- 卡 1：成功卡（大图标 + 标题 + 描边胶囊小按钮） -->
-        <div class="rx-sent-card rx-sent-hero">
-          <CheckCircleFilled class="rx-sent-icon" />
-          <h3 class="rx-sent-title">处方已发送</h3>
-          <p class="rx-sent-sub">已推送到患者微信 · 支付完成后门店按方发药</p>
-          <div class="rx-sent-pills">
-            <Button shape="round" size="small" @click="openPatientRxHistoryDrawer">处方记录</Button>
+            <Button
+              v-if="
+                sentPrescriptionInfo?.order_id &&
+                publicAccountPayEnabled &&
+                publicAccountPayTrigger === 'doctor_confirm' &&
+                publicAccountBillMode === 'order' &&
+                Number(sentPrescriptionInfo?.is_pay) !== 1
+              "
+              shape="round"
+              size="large"
+              class="rx-sent-next"
+              @click="openApplyPublicAccountPay"
+            >
+              <BankOutlined />
+              申请公账支付
+            </Button>
+            <Button
+              shape="round"
+              size="large"
+              class="rx-sent-next"
+              @click="tabType = 2"
+              >
+继续开方
+</Button>
             <Button
               v-if="canEndReception"
-              shape="round"
-              size="small"
               danger
+              shape="round"
+              size="large"
+              class="rx-sent-next"
               @click="endOfDiagnosis"
             >
               <StopOutlined />
@@ -5333,110 +5889,20 @@ function onStoreSelectOpenChange(open: boolean) {
             </Button>
           </div>
         </div>
-        <!-- 卡 2：订单明细（label 加粗深色 / 值灰色，合计行大号金额） -->
-        <div class="rx-sent-card rx-sent-detail">
-          <div class="rx-sent-row">
-            <span>订单号</span>
-            <b>{{ sentPrescriptionInfo?.order_no || '—' }}</b>
-          </div>
-          <div class="rx-sent-row">
-            <span>患者</span>
-            <b>{{ sentPrescriptionInfo?.patient_name || '—' }}</b>
-          </div>
-          <div v-if="sentPrescriptionInfo?.diagnosis" class="rx-sent-row">
-            <span>诊断</span>
-            <b>{{ sentPrescriptionInfo.diagnosis }}</b>
-          </div>
-          <div class="rx-sent-row">
-            <span>订单状态</span>
-            <Tag
-              :color="Number(sentPrescriptionInfo?.is_pay) === 1 ? 'success' : 'orange'"
-              class="rx-sent-tag"
-            >
-              {{ Number(sentPrescriptionInfo?.is_pay) === 1 ? '已支付（公账先用后付）' : '待患者支付' }}
-            </Tag>
-          </div>
-          <div class="rx-sent-total">
-            <span>总金额</span>
-            <span class="rx-sent-total-val">合计: <b>¥{{ sentPrescriptionInfo?.total_pay_price || '0.00' }}</b></span>
-          </div>
-        </div>
-        <!-- 底部操作：胶囊主按钮（代付收款）+ 描边胶囊次按钮（继续开方），对齐 C 端底部通栏确认钮 -->
-        <div class="rx-sent-ops">
-          <!-- 代付入口：患者不便操作手机时，医生代其发起收款（复用代付码弹窗） -->
-          <Button
-            v-if="sentPrescriptionInfo?.order_id && Number(sentPrescriptionInfo?.is_pay) !== 1"
-            type="primary"
-            shape="round"
-            size="large"
-            class="rx-sent-main"
-            @click="openProxyPayQrcode(Number(sentPrescriptionInfo.order_id))"
-          >
-            <QrcodeOutlined />
-            代付收款
-          </Button>
-          <Button
-            v-if="
-              sentPrescriptionInfo?.order_id &&
-              publicAccountPayEnabled &&
-              publicAccountPayTrigger === 'doctor_confirm' &&
-              publicAccountBillMode === 'daily' &&
-              Number(sentPrescriptionInfo?.is_pay) !== 1
-            "
-            type="primary"
-            shape="round"
-            size="large"
-            class="rx-sent-next"
-            :loading="publicAccountPaySubmitting"
-            @click="confirmDailyPublicAccountPay"
-          >
-            <BankOutlined />
-            公账支付
-          </Button>
-          <Button
-            v-if="
-              sentPrescriptionInfo?.order_id &&
-              publicAccountPayEnabled &&
-              publicAccountPayTrigger === 'doctor_confirm' &&
-              publicAccountBillMode === 'order' &&
-              Number(sentPrescriptionInfo?.is_pay) !== 1
-            "
-            shape="round"
-            size="large"
-            class="rx-sent-next"
-            @click="openApplyPublicAccountPay"
-          >
-            <BankOutlined />
-            申请公账支付
-          </Button>
-          <Button shape="round" size="large" class="rx-sent-next" @click="tabType = 2">继续开方</Button>
-          <Button
-            v-if="canEndReception"
-            danger
-            shape="round"
-            size="large"
-            class="rx-sent-next"
-            @click="endOfDiagnosis"
-          >
-            <StopOutlined />
-            结束接诊
-          </Button>
-        </div>
+      </Page>
+      <div v-else-if="tabType === 0" class="prescription-panel">
+        <Empty />
       </div>
-    </Page>
-    <div v-else-if="tabType === 0" class="prescription-panel">
-      <Empty/>
-    </div>
     </div>
     <!-- /reception-main -->
     <PatientInfoDrawerComp />
     <PatientMrDrawerComp />
     <PatientRxHistoryDrawerComp />
-    <WesternDrugModal/>
-    <SimpleProductModalComponent/>
-    <PrescriptionDetailModal/>
+    <WesternDrugModal />
+    <SimpleProductModalComponent />
+    <PrescriptionDetailModal />
     <!-- 常用方选择弹窗 -->
-    <CommonPrescriptionModals/>
+    <CommonPrescriptionModals />
     <GoldenFormulaModals @import="handleImportGoldenFormula" />
     <AiPrescriptionDrawer
       ref="aiPrescriptionDrawerRef"
@@ -5452,14 +5918,20 @@ function onStoreSelectOpenChange(open: boolean) {
     <!-- 确认添加药品弹窗 -->
     <ConfirmModalComponent />
     <PriceAdjustDrawer />
-    <AntModal title="二次签名" v-model:open="doctorSecondSignModal" @ok="doctorSecondSignModalOk">
+    <AntModal
+      title="二次签名"
+      v-model:open="doctorSecondSignModal"
+      @ok="doctorSecondSignModalOk"
+    >
       <div class="doctor-second-sign-title">有毒：</div>
       <p v-for="item in checkData.message.poisonous || []">【{{ item }}】</p>
       <div class="doctor-second-sign-title">十八反：</div>
       <p v-for="item in checkData.message.opposition || []">【{{ item }}】</p>
       <div class="doctor-second-sign-title">十九畏：</div>
       <p v-for="item in checkData.message.conflict || []">【{{ item }}】</p>
-      <p class="mt-5" style="color: red;">如需继续开方需要二次签名，确认要二次签名吗？</p>
+      <p class="mt-5" style="color: red">
+        如需继续开方需要二次签名，确认要二次签名吗？
+      </p>
     </AntModal>
 
     <!-- 保存常用方确认模态框 -->
@@ -5493,64 +5965,69 @@ function onStoreSelectOpenChange(open: boolean) {
 
 <style scoped>
 /* 覆盖antd */
-:global(.ant-select-item-option-active)  {
-  background-color: rgba(55, 71, 162, 0.71) !important;
+:global(.ant-select-item-option-active) {
   color: white !important;
+  background-color: rgb(55 71 162 / 71%) !important;
 }
+
 .doctor-second-sign-title {
-  font-size: 16px;
-  margin: 10px 0;
-  font-weight: bold;
-  border-left: 5px solid rgb(55, 71, 162);
   padding-left: 10px;
-}
-.card-index {
-  font-size: 20px;
+  margin: 10px 0;
+  font-size: 16px;
   font-weight: bold;
+  border-left: 5px solid rgb(55 71 162);
+}
+
+.card-index {
   position: absolute;
+  top: 0;
+
   /* 略靠左，并预留两位数宽度，避免「10、」被药名输入框遮住 */
   left: 2px;
-  top: 0;
-  width: 32px;
-  text-align: right;
-  line-height: 1.2;
   z-index: 1;
+  width: 32px;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1.2;
+  text-align: right;
   pointer-events: none;
 }
 
 /* 中药卡片：第一行只放药名 + 克数（含单位），煎法下放到第二行 */
 .chinese-drug-card {
   position: relative;
-  padding-right: 8px;
   min-height: 52px;
+  padding-right: 8px;
 }
 
 .chinese-drug-row {
+  box-sizing: border-box;
   display: flex;
   flex-wrap: nowrap;
-  align-items: center;
   gap: 4px;
+  align-items: center;
   width: 100%;
   max-width: 100%;
-  /* 与 .card-index 两位数宽度对齐（left 2 + width 32 + 间隙） */
-  padding-left: 38px;
+
   /* 右侧留给删除按钮，避免克数单位被图标盖住 */
   padding-right: 36px;
-  box-sizing: border-box;
+
+  /* 与 .card-index 两位数宽度对齐（left 2 + width 32 + 间隙） */
+  padding-left: 38px;
   overflow: visible;
 }
 
 /* 中药第二行三块同行：煎法 | 价格 | 更新价格；仅价格区可内部换行 */
 .chinese-drug-meta {
+  box-sizing: border-box;
   display: flex;
   flex-wrap: nowrap;
-  align-items: flex-start;
   gap: 8px;
-  margin-top: 2px;
-  padding-left: 38px;
-  padding-right: 36px;
+  align-items: flex-start;
   min-height: 22px;
-  box-sizing: border-box;
+  padding-right: 36px;
+  padding-left: 38px;
+  margin-top: 2px;
 }
 
 .chinese-drug-meta .meta-way {
@@ -5559,39 +6036,38 @@ function onStoreSelectOpenChange(open: boolean) {
 
 .chinese-drug-meta-price {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-content: flex-start;
-  align-items: baseline;
-  gap: 0 8px;
   flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: 0 8px;
+  place-content: flex-start flex-end;
+  align-items: baseline;
   min-width: 0;
   text-align: right;
 }
 
 .chinese-drug-price-amount {
-  color: red;
   line-height: 1.3;
+  color: red;
   white-space: nowrap;
 }
 
 .chinese-drug-margin {
-  color: hsl(var(--muted-foreground));
   font-size: 12px;
   line-height: 1.3;
+  color: hsl(var(--muted-foreground));
   white-space: nowrap;
 }
 
 .chinese-drug-meta .meta-update {
   flex: 0 0 auto;
-  padding: 0;
   height: auto;
+  padding: 0;
   line-height: 1.3;
 }
 
 .chinese-drug-meta :deep(.ant-btn-link) {
-  padding-inline: 0;
   height: auto;
+  padding-inline: 0;
   line-height: 1.3;
 }
 
@@ -5602,27 +6078,27 @@ function onStoreSelectOpenChange(open: boolean) {
 
 /* 克数输入锁宽：antd 带 addon 时默认 width:100%，会把单位撑出卡片 */
 .chinese-drug-num {
+  flex: 0 0 108px !important;
   width: 108px !important;
   min-width: 96px !important;
   max-width: 120px !important;
-  flex: 0 0 108px !important;
 }
 
 .chinese-drug-row :deep(.ant-input-number-group-wrapper),
 .chinese-drug-row :deep(.ant-input-number-wrapper),
 .chinese-drug-row :deep(.chinese-drug-num) {
+  flex: 0 0 108px !important;
   width: 108px !important;
   min-width: 96px !important;
   max-width: 120px !important;
-  flex: 0 0 108px !important;
 }
 
 /* 中药卡片：药名气泡锁宽，与克数/用法保持同一行 */
 :deep(.chinese-drug-name-bubble) {
+  flex: 0 0 100px !important;
   width: 100px !important;
   min-width: 88px !important;
   max-width: 110px !important;
-  flex: 0 0 100px !important;
   vertical-align: middle;
 }
 
@@ -5635,8 +6111,8 @@ function onStoreSelectOpenChange(open: boolean) {
 
 .card-price {
   position: absolute;
-  bottom: 10px;
   right: 8px;
+  bottom: 10px;
   color: red;
 }
 
@@ -5648,111 +6124,126 @@ function onStoreSelectOpenChange(open: boolean) {
 
 .reception-layout {
   display: flex;
+  align-items: stretch;
+  width: 100%;
+
   /* 固定视口高度，保证右侧开方区内部可「顶栏固定 + 内容滚动」 */
   height: calc(100vh - 100px);
   min-height: 560px;
-  width: 100%;
-  align-items: stretch;
   overflow: hidden;
 }
+
 .patient-sidebar {
+  z-index: 20;
+  display: flex;
   flex-shrink: 0;
+  flex-direction: column;
   width: 300px;
   overflow: hidden;
+  background: hsl(var(--background));
   border-right: 1px solid #e4e7ed;
   transition: width 0.28s ease;
-  display: flex;
-  flex-direction: column;
-  background: hsl(var(--background));
-  z-index: 20;
 }
+
 .reception-layout.is-left-collapsed .patient-sidebar {
   width: 44px;
 }
+
 .patient-sidebar__collapsed {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 12px 0 16px;
   min-height: 0;
+  padding: 12px 0 16px;
   cursor: pointer;
   user-select: none;
-  background: hsl(var(--muted) / 0.55);
+  background: hsl(var(--muted) / 55%);
   border-right: 1px solid hsl(var(--border));
 }
+
 .patient-sidebar__collapsed-icon {
   font-size: 16px;
   color: hsl(var(--muted-foreground));
 }
+
 .patient-sidebar__toggle {
-  flex-shrink: 0;
-  padding: 8px;
   display: flex;
+  flex-shrink: 0;
   justify-content: flex-end;
+  padding: 8px;
 }
+
 .reception-layout.is-left-collapsed .patient-sidebar__toggle {
   justify-content: center;
   padding: 8px 4px;
 }
+
 .patient-sidebar__toggle-btn {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
 }
+
 .patient-sidebar__toggle-text {
   margin-left: 2px;
 }
+
 .patient-panel {
-  width: 300px;
   flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 300px;
+  padding: 0 6px 8px;
+  overflow: hidden auto;
   opacity: 1;
   transition: opacity 0.2s ease;
-  padding: 0 6px 8px;
 }
+
 .reception-layout.is-left-collapsed .patient-panel {
-  opacity: 0;
   pointer-events: none;
+  opacity: 0;
 }
+
 .dark .patient-sidebar {
   border-right: 1px solid #333;
 }
+
 .reception-main {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
   position: relative;
   display: flex;
+  flex: 1;
   flex-direction: column;
+  min-width: 0;
+  min-height: 0;
   overflow: hidden;
 }
+
 .rx-back-fab {
   position: absolute;
   top: 12px;
   right: 16px;
   z-index: 30;
   display: inline-flex;
-  align-items: center;
   gap: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  align-items: center;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
 }
+
 .prescription-panel--rx .prescription-header {
   display: flex;
+  gap: 12px;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
 }
 
 .container-box {
   min-height: 90vh;
 }
+
 .container-box-grid {
-  min-height: 90vh;
   display: grid;
   grid-template-columns: 300px 1fr;
+  min-height: 90vh;
 }
 
 .dark .patient-panel {
@@ -5761,36 +6252,40 @@ function onStoreSelectOpenChange(open: boolean) {
 
 .patient-card {
   position: relative;
+
   /* 粒子由 .card-particles 自己裁切，卡片不设 overflow:hidden，否则呼吸光晕会被裁掉 */
   padding: 8px 10px;
   margin: 0 4px 4px;
-  border-radius: 6px;
+  cursor: pointer;
+  background: transparent;
   border: 1px solid transparent;
   border-bottom: 1px solid hsl(var(--border));
-  background: transparent;
-  cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+  border-radius: 6px;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
 }
 
 .patient-card:hover {
-  background: hsl(var(--muted) / 0.35);
+  background: hsl(var(--muted) / 35%);
 }
 
 /* 选中态：主题色边框 + 呼吸微光 + 粒子，禁止左侧竖条 */
 .patient-card.active {
+  background: hsl(var(--primary) / 8%);
   border: 1px solid hsl(var(--primary) / 32%);
-  background: hsl(var(--primary) / 0.08);
   animation: card-breathe 2.4s ease-in-out infinite;
 }
 
 .card-particles {
-  pointer-events: none;
   position: absolute;
   inset: 0;
+  z-index: 0;
   overflow: hidden;
+  pointer-events: none;
   border-radius: inherit;
   opacity: 0;
-  z-index: 0;
 }
 
 .patient-card.active .card-particles {
@@ -5799,13 +6294,13 @@ function onStoreSelectOpenChange(open: boolean) {
 
 .card-particles i {
   position: absolute;
+  bottom: 6%;
+  left: calc(8% + var(--i) * 15%);
   width: 3px;
   height: 3px;
-  border-radius: 50%;
   background: hsl(var(--primary));
+  border-radius: 50%;
   box-shadow: 0 0 4px hsl(var(--primary) / 70%);
-  left: calc(8% + var(--i) * 15%);
-  bottom: 6%;
   opacity: 0;
   animation: particle-float 2.6s ease-in-out infinite;
   animation-delay: calc(var(--i) * 0.28s);
@@ -5821,136 +6316,139 @@ function onStoreSelectOpenChange(open: boolean) {
 
 .patient-title-row {
   display: flex;
+  gap: 8px;
   align-items: baseline;
   justify-content: space-between;
-  gap: 8px;
   min-width: 0;
 }
 
 .patient-name {
-  font-size: 14px;
-  font-weight: 600;
-  margin: 0;
-  line-height: 1.3;
   display: inline-flex;
-  align-items: center;
   flex-wrap: wrap;
   gap: 4px;
+  align-items: center;
   min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 .patient-special-tag {
-  margin-inline-end: 0 !important;
-  line-height: 16px;
-  font-size: 11px;
   padding-inline: 4px;
+  margin-inline-end: 0 !important;
+  font-size: 11px;
+  line-height: 16px;
 }
 
 .patient-card .phone {
-  font-size: 12px;
   margin: 0;
-  line-height: 1.3;
-  color: hsl(var(--muted-foreground));
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 12px;
+  line-height: 1.3;
+  color: hsl(var(--muted-foreground));
   white-space: nowrap;
 }
 
 .patient-salesperson {
-  font-size: 11px;
   margin: 0;
+  font-size: 11px;
   line-height: 1.3;
   color: hsl(var(--muted-foreground));
 }
 
 .patient-meta {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   gap: 8px;
+  align-items: center;
+  justify-content: space-between;
   margin-top: 2px;
 }
 
 .patient-time {
+  flex-shrink: 0;
   font-size: 11px;
   color: hsl(var(--muted-foreground));
-  flex-shrink: 0;
 }
 
 @keyframes card-breathe {
   0%,
   100% {
-    box-shadow: 0 0 5px hsl(var(--primary) / 16%);
-    background: hsl(var(--primary) / 0.06);
+    background: hsl(var(--primary) / 6%);
     border-color: hsl(var(--primary) / 26%);
+    box-shadow: 0 0 5px hsl(var(--primary) / 16%);
   }
+
   50% {
-    box-shadow: 0 0 14px hsl(var(--primary) / 34%);
-    background: hsl(var(--primary) / 0.14);
+    background: hsl(var(--primary) / 14%);
     border-color: hsl(var(--primary) / 48%);
+    box-shadow: 0 0 14px hsl(var(--primary) / 34%);
   }
 }
 
 @keyframes particle-float {
   0% {
-    transform: translateY(0) scale(0.5);
     opacity: 0;
+    transform: translateY(0) scale(0.5);
   }
+
   18% {
     opacity: 0.75;
   }
+
   100% {
-    transform: translateY(-34px) scale(1);
     opacity: 0;
+    transform: translateY(-34px) scale(1);
   }
 }
 
 .status {
   display: inline-block;
   padding: 0 6px;
-  border-radius: 3px;
   font-size: 11px;
   line-height: 18px;
+  border-radius: 3px;
 }
 
 .status.待支付 {
-  background: #f4f4f5;
   color: #909399;
+  background: #f4f4f5;
 }
 
 .status.待接诊 {
-  background: #fef0f0;
   color: #f56c6c;
+  background: #fef0f0;
 }
 
 .status.接诊中 {
-  background: #f0f9eb;
   color: #67c23a;
+  background: #f0f9eb;
 }
 
 .status.已结束 {
-  background: #f4f4f5;
   color: #909399;
+  background: #f4f4f5;
 }
 
 .status.已取消 {
-  background: #fef0f0;
   color: #f56c6c;
+  background: #fef0f0;
 }
 
 .status.待评价 {
-  background: #f4f4f5;
   color: #909399;
+  background: #f4f4f5;
 }
 
 .status.已评价 {
-  background: #f4f4f5;
   color: #909399;
+  background: #f4f4f5;
 }
 
 .status.已拒诊 {
-  background: #f4f4f5;
   color: #909399;
+  background: #f4f4f5;
 }
 
 .dark .status.待接诊,
@@ -5959,107 +6457,125 @@ function onStoreSelectOpenChange(open: boolean) {
 }
 
 .prescription-panel {
-  padding: 1rem;
   /* 轻量接诊面板（待接诊/空态）在锁高布局里自身滚动：
      健康信息、特殊处方导入卡、转方卡叠加后内容会超一屏，父级 overflow:hidden 会把超出部分裁掉 */
   min-height: 0;
+  padding: 1rem;
   overflow-y: auto;
 }
+
 /* 开方工作台：占满右侧主区，内部再拆「固定顶栏 / 可滚动内容」 */
 .prescription-panel--rx {
-  flex: 1;
-  min-height: 0;
-  height: 100%;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden;
+  height: 100%;
+  min-height: 0;
+
   /* 内边距交给内部 content，避免双层 padding 挤掉高度 */
   padding: 0 !important;
+  overflow: hidden;
 }
+
 /* 处方发送成功页：视觉对齐 C 端付款成功页（浅灰蓝底 + 白色圆角卡 + 胶囊按钮），
    颜色走主题变量保证暗色可用，主色用 --primary（与 C 端品牌蓝 #4175EE 同族） */
 .rx-sent-wrap {
-  max-width: 480px;
-  margin: 20px auto 0;
-  padding: 14px 14px 22px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  border-radius: 14px;
+  max-width: 480px;
+  padding: 14px 14px 22px;
+  margin: 20px auto 0;
+
   /* 对应 C 端页面底色 #F8FAFC：用 muted 低透明度自动适配暗色 */
-  background: hsl(var(--muted) / 0.45);
+  background: hsl(var(--muted) / 45%);
+  border-radius: 14px;
 }
+
 .rx-sent-card {
-  border-radius: 10px;
   background: hsl(var(--card, var(--background)));
-  border: 1px solid hsl(var(--border) / 0.55);
+  border: 1px solid hsl(var(--border) / 55%);
+  border-radius: 10px;
   box-shadow: 0 1px 6px rgb(15 23 42 / 4%);
 }
+
 /* 成功卡：C 端 paied.vue 头卡形态（大图标居中 + 加粗标题 + 描边胶囊小按钮） */
 .rx-sent-hero {
   padding: 28px 20px 20px;
   text-align: center;
 }
+
 .rx-sent-icon {
   font-size: 52px;
   color: hsl(var(--primary));
   animation: rx-sent-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+
 @keyframes rx-sent-pop {
   0% {
-    transform: scale(0.4);
     opacity: 0;
+    transform: scale(0.4);
   }
+
   100% {
-    transform: scale(1);
     opacity: 1;
+    transform: scale(1);
   }
 }
+
 .rx-sent-title {
   margin: 14px 0 4px;
   font-size: 17px;
   font-weight: 700;
   color: hsl(var(--foreground));
 }
+
 .rx-sent-sub {
   margin: 0;
   font-size: 12.5px;
   color: hsl(var(--muted-foreground));
 }
+
 .rx-sent-pills {
-  margin-top: 18px;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
   gap: 10px;
+  justify-content: center;
+  margin-top: 18px;
 }
+
 /* 明细卡：C 端 record-pay.vue 的 good_ 行形态（label 加粗深色 / 值常规灰色） */
 .rx-sent-detail {
   padding: 6px 18px 14px;
 }
+
 .rx-sent-row {
   display: flex;
+  gap: 16px;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
   min-height: 42px;
 }
+
 .rx-sent-row > span {
   flex-shrink: 0;
   font-size: 13px;
   font-weight: 600;
   color: hsl(var(--foreground));
 }
+
 .rx-sent-row > b {
-  font-weight: 400;
   font-size: 13px;
+  font-weight: 400;
   color: hsl(var(--muted-foreground));
   text-align: right;
   word-break: break-all;
 }
+
 .rx-sent-tag {
   margin-inline-end: 0;
 }
+
 /* 合计行：C 端「合计:」小字 + 大号金额 */
 .rx-sent-total {
   display: flex;
@@ -6067,23 +6583,27 @@ function onStoreSelectOpenChange(open: boolean) {
   justify-content: space-between;
   padding-top: 12px;
   margin-top: 4px;
-  border-top: 1px solid hsl(var(--border) / 0.55);
+  border-top: 1px solid hsl(var(--border) / 55%);
 }
+
 .rx-sent-total > span {
   font-size: 13px;
   font-weight: 600;
   color: hsl(var(--foreground));
 }
+
 .rx-sent-total-val {
   font-size: 12px;
   color: hsl(var(--muted-foreground));
 }
+
 .rx-sent-total-val b {
   margin-left: 4px;
   font-size: 19px;
   font-weight: 600;
   color: hsl(var(--foreground));
 }
+
 /* 底部操作：按钮多时自动换行，避免撑破成功页卡片 */
 .rx-sent-ops {
   display: flex;
@@ -6091,87 +6611,95 @@ function onStoreSelectOpenChange(open: boolean) {
   gap: 10px;
   margin-top: 2px;
 }
+
 .rx-sent-main,
 .rx-sent-next {
   flex: 1 1 calc(50% - 5px);
   min-width: 140px;
 }
+
 /* Page 根下的内容区：未开 autoContentHeight 时 class 是 flex-1（开了才是 h-full），
    两种都要命中，否则「固定顶栏 + 内容滚动」的高度链路断裂，长处方整页无法滚动 */
 .prescription-panel--rx :deep(> .h-full),
 .prescription-panel--rx :deep(> .flex-1) {
-  flex: 1;
-  min-height: 0;
-  height: 100% !important;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden !important;
+  height: 100% !important;
+  min-height: 0;
   padding: 12px 16px !important;
+  overflow: hidden !important;
 }
+
 .prescription-panel--rx :deep(.ant-spin-nested-loading),
 .prescription-panel--rx :deep(.ant-spin-container) {
+  display: flex;
   flex: 1;
+  flex-direction: column;
   height: 100%;
   min-height: 0;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
 }
+
 .rx-workspace {
   display: flex;
-  flex-direction: column;
   flex: 1;
-  min-height: 0;
+  flex-direction: column;
   height: 100%;
+  min-height: 0;
   overflow: hidden;
 }
+
 .rx-workspace-sticky {
-  flex-shrink: 0;
   z-index: 12;
-  background: hsl(var(--background));
+  flex-shrink: 0;
   padding-bottom: 4px;
-  border-bottom: 1px solid hsl(var(--border) / 0.6);
+  background: hsl(var(--background));
+  border-bottom: 1px solid hsl(var(--border) / 60%);
 }
+
 /* 二级处方类型 Tab：仅作切换导航，内容仍由下方业务区渲染 */
 .rx-secondary-tabs :deep(.ant-tabs-nav) {
   margin-bottom: 0;
 }
+
 .rx-secondary-tabs :deep(.ant-tabs-content-holder) {
   display: none;
 }
+
 .rx-secondary-tab-label {
   display: inline-flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
 }
+
 .rx-workspace-scroll {
   flex: 1;
   min-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
   padding-top: 8px;
   padding-bottom: 16px;
+  overflow: hidden auto;
 }
 
 .drug-categories {
   display: flex;
+  flex-wrap: nowrap;
   gap: 1rem;
+  padding-bottom: 4px;
   margin: 1rem 0;
   overflow-x: auto;
-  flex-wrap: nowrap;
-  padding-bottom: 4px;
 }
 
 .drug-categories button {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 6px;
+  align-items: center;
   padding: 8px 16px;
+  white-space: nowrap;
+  cursor: pointer;
   border: 1px solid #ddd;
   border-radius: 10px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  white-space: nowrap;
 }
 
 .dark .drug-categories button {
@@ -6185,12 +6713,12 @@ function onStoreSelectOpenChange(open: boolean) {
 }
 
 .tab-type-badge {
+  padding: 0 6px;
   font-size: 11px;
+  line-height: 1.4;
   color: #e6a23c;
   background: #fdf6ec;
-  padding: 0 6px;
   border-radius: 4px;
-  line-height: 1.4;
 }
 
 .rx-swipe-panel {
@@ -6208,9 +6736,11 @@ function onStoreSelectOpenChange(open: boolean) {
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.1);
   }
+
   100% {
     background: #455cda;
     transform: scale(1);
@@ -6222,14 +6752,14 @@ function onStoreSelectOpenChange(open: boolean) {
   justify-content: space-between;
   padding: 12px;
   margin: 8px 0;
-  border-radius: 8px;
   cursor: pointer;
+  border-radius: 8px;
   transition: all 0.2s;
 }
 
 .drug-item:hover {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
   transform: translateX(4px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .selected-drugs {
@@ -6263,11 +6793,11 @@ function onStoreSelectOpenChange(open: boolean) {
 .table-row {
   display: grid;
   grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr;
-  padding: 12px;
-  border-bottom: 1px solid #eee;
-  text-align: center;
-  height: auto;
   align-items: center;
+  height: auto;
+  padding: 12px;
+  text-align: center;
+  border-bottom: 1px solid #eee;
 }
 
 .dark .table-row {
@@ -6275,9 +6805,9 @@ function onStoreSelectOpenChange(open: boolean) {
 }
 
 .send-btn {
-  cursor: pointer;
-  margin-right: 10px;
   float: right;
+  margin-right: 10px;
+  cursor: pointer;
 }
 
 .mr-field-head {
@@ -6286,33 +6816,38 @@ function onStoreSelectOpenChange(open: boolean) {
   gap: 8px 12px;
   align-items: center;
 }
+
 .mr-field-label {
   flex-shrink: 0;
   line-height: 24px;
 }
+
 .mr-field-search {
-  min-width: 0;
   flex: 1 1 180px;
+  min-width: 0;
   max-width: 280px;
 }
+
 .rx-tab-extra-actions {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 0 2px;
   align-items: center;
 }
+
 .rx-tab-extra-actions :deep(.ant-btn) {
-  padding-inline: 6px;
   height: 28px;
+  padding-inline: 6px;
 }
+
 .rx-primary-tabs :deep(.ant-tabs-nav) {
   margin-bottom: 8px;
 }
 
 .diagnosis-area textarea {
   width: 100%;
-  min-height: 52px;
   height: auto;
+  min-height: 52px;
   padding: 6px 8px;
   margin: 4px 0;
   border: 1px solid #ddd;
@@ -6343,8 +6878,9 @@ function onStoreSelectOpenChange(open: boolean) {
     0 10px 36px hsl(var(--foreground) / 10%),
     inset 0 1px 0 hsl(var(--background) / 80%);
   backdrop-filter: blur(28px) saturate(1.8);
-  -webkit-backdrop-filter: blur(28px) saturate(1.8);
+  backdrop-filter: blur(28px) saturate(1.8);
 }
+
 .price-box::before {
   position: absolute;
   inset: 0;
@@ -6357,12 +6893,14 @@ function onStoreSelectOpenChange(open: boolean) {
   );
   border-radius: inherit;
 }
+
 .price-box.is-mini {
   width: max-content;
   max-width: min(960px, calc(100vw - 24px));
   padding: 8px 10px;
   border-radius: 20px;
 }
+
 .price-glass-bar {
   position: relative;
   z-index: 1;
@@ -6370,11 +6908,13 @@ function onStoreSelectOpenChange(open: boolean) {
   flex-direction: column;
   gap: 8px;
 }
+
 .price-box.is-mini .price-glass-bar {
   flex-flow: row wrap;
   gap: 6px 10px;
   align-items: center;
 }
+
 .price-glass-head {
   display: flex;
   gap: 6px;
@@ -6383,15 +6923,18 @@ function onStoreSelectOpenChange(open: boolean) {
   font-size: 13px;
   font-weight: 600;
 }
+
 .price-glass-tools {
   display: inline-flex;
   gap: 6px;
   align-items: center;
   margin-left: auto;
 }
+
 .price-box.is-mini .price-glass-head {
   justify-content: flex-start;
 }
+
 .price-glass-shrink {
   display: inline-flex;
   flex: 0 0 auto;
@@ -6407,20 +6950,24 @@ function onStoreSelectOpenChange(open: boolean) {
   border: 0;
   border-radius: 999px;
 }
+
 .price-glass-shrink:hover,
 .price-glass-shrink.is-on {
   color: hsl(var(--foreground));
   background: hsl(var(--foreground) / 12%);
 }
+
 .price-glass-metrics {
   display: flex;
   flex-direction: column;
 }
+
 .price-box.is-mini .price-glass-metrics {
   flex-flow: row wrap;
   gap: 2px 12px;
   align-items: center;
 }
+
 .price-glass-row {
   display: flex;
   gap: 8px;
@@ -6430,46 +6977,56 @@ function onStoreSelectOpenChange(open: boolean) {
   line-height: 1.7;
   color: hsl(var(--muted-foreground));
 }
+
 .price-box.is-mini .price-glass-row {
   gap: 4px;
   justify-content: flex-start;
   font-size: 12px;
   line-height: 1.4;
 }
+
 .price-glass-row b {
   font-weight: 600;
-  color: hsl(var(--foreground));
   font-variant-numeric: tabular-nums;
+  color: hsl(var(--foreground));
 }
+
 .price-glass-row.is-money b,
 .price-glass-row.is-money :deep(.ant-btn-link) {
-  color: hsl(var(--destructive));
   font-weight: 700;
+  color: hsl(var(--destructive));
 }
+
 .price-glass-row.is-total b {
   font-size: 18px;
   font-weight: 700;
 }
+
 .price-box.is-mini .price-glass-row.is-total b {
   font-size: 14px;
 }
+
 .price-glass-extra {
   font-size: 12px;
   color: hsl(var(--muted-foreground));
 }
+
 .price-glass-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   align-items: center;
 }
+
 .price-box.is-mini .price-glass-actions :deep(.ant-btn) {
   height: 28px;
 }
+
 .price-box :deep(.ant-btn) {
   position: relative;
   z-index: 1;
 }
+
 @media (prefers-reduced-motion: reduce) {
   .price-box {
     transition: none;
@@ -6481,8 +7038,8 @@ function onStoreSelectOpenChange(open: boolean) {
 }
 
 .time-line-item-created {
-  color: #909399;
   font-size: 0.8em;
+  color: #909399;
 }
 
 /* 简单产品列表样式 */
@@ -6513,28 +7070,28 @@ function onStoreSelectOpenChange(open: boolean) {
 }
 
 .product-image {
-  width: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  width: 100%;
   margin-bottom: 8px;
 }
 
 .product-image-placeholder {
-  width: 120px;
-  height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 120px;
+  height: 120px;
+  font-size: 12px;
+  color: #999;
   background: #f5f5f5;
   border-radius: 6px;
-  color: #999;
-  font-size: 12px;
 }
 
 .dark .product-image-placeholder {
-  background: #374151;
   color: #6b7280;
+  background: #374151;
 }
 
 .product-info {
@@ -6542,9 +7099,9 @@ function onStoreSelectOpenChange(open: boolean) {
 }
 
 .product-name {
+  margin-bottom: 8px;
   font-size: 16px;
   font-weight: 500;
-  margin-bottom: 8px;
   color: #333;
 }
 
@@ -6553,9 +7110,9 @@ function onStoreSelectOpenChange(open: boolean) {
 }
 
 .product-price {
+  margin-bottom: 12px;
   font-size: 14px;
   color: #666;
-  margin-bottom: 12px;
 }
 
 .dark .product-price {
@@ -6576,8 +7133,8 @@ function onStoreSelectOpenChange(open: boolean) {
 
 .product-actions {
   display: flex;
-  justify-content: flex-end;
   gap: 8px;
+  justify-content: flex-end;
   padding-top: 8px;
   border-top: 1px solid #e4e7ed;
 }
diff --git a/apps/web-antd/src/views/doctor/online-consultation-clinic/components/QuickReplyBubbles.vue b/apps/web-antd/src/views/doctor/online-consultation-clinic/components/QuickReplyBubbles.vue
index c7cb04c0..25c2d771 100644
--- a/apps/web-antd/src/views/doctor/online-consultation-clinic/components/QuickReplyBubbles.vue
+++ b/apps/web-antd/src/views/doctor/online-consultation-clinic/components/QuickReplyBubbles.vue
@@ -1,12 +1,18 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
+
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
 import { Button, Popconfirm } from 'ant-design-vue';
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-import { 
-  getQuickReplyList, 
-  createQuickReply, 
-  updateQuickReply, 
-  deleteQuickReply 
+
+import {
+  createQuickReply,
+  deleteQuickReply,
+  getQuickReplyList,
+  updateQuickReply,
 } from '../api/index';
 
 const props = defineProps({
@@ -110,13 +116,18 @@ onMounted(() => {
   loadQuickReplies();
 });
 
-watch(() => props.doctorId, () => {
-  loadQuickReplies();
-});
+watch(
+  () => props.doctorId,
+  () => {
+    loadQuickReplies();
+  },
+);
 </script>
 
 <template>
-  <div class="quick-reply-bubbles bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+  <div
+    class="quick-reply-bubbles bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+  >
     <div class="bubbles-container">
       <div
         v-for="item in quickReplies"
@@ -139,11 +150,7 @@ watch(() => props.doctorId, () => {
             title="确定删除这条快速回复吗？"
             @confirm="handleDeleteReply(item.id)"
           >
-            <Button
-              type="text"
-              size="small"
-              danger
-            >
+            <Button type="text" size="small" danger>
               <template #icon><DeleteOutlined /></template>
             </Button>
           </Popconfirm>
@@ -159,7 +166,10 @@ watch(() => props.doctorId, () => {
         <span>添加常用语</span>
       </div>
 
-      <div v-else class="add-modal bg-white dark:bg-gray-700 border-blue-500 dark:border-blue-400">
+      <div
+        v-else
+        class="add-modal bg-white dark:bg-gray-700 border-blue-500 dark:border-blue-400"
+      >
         <input
           v-model="newContent"
           type="text"
@@ -185,23 +195,23 @@ watch(() => props.doctorId, () => {
 
 <style scoped>
 .quick-reply-bubbles {
-  padding: 8px 12px;
+  padding: var(--chat-quick-pad-y, 6px) var(--chat-quick-pad-x, 10px);
 }
 
 .bubbles-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--chat-quick-gap, 6px);
 }
 
 .reply-bubble {
   position: relative;
   display: inline-flex;
   align-items: center;
-  padding: 6px 12px;
+  padding: var(--chat-quick-bubble-py, 4px) var(--chat-quick-bubble-px, 10px);
+  cursor: pointer;
   border: 1px solid;
   border-radius: 16px;
-  cursor: pointer;
   transition: all 0.3s;
 }
 
@@ -210,31 +220,31 @@ watch(() => props.doctorId, () => {
 }
 
 .bubble-text {
-  font-size: 13px;
+  font-size: var(--chat-quick-font, 12px);
 }
 
 .bubble-actions {
   display: none;
-  margin-left: 8px;
   gap: 4px;
+  margin-left: 8px;
 }
 
 .add-bubble {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
-  padding: 6px 12px;
+  align-items: center;
+  padding: var(--chat-quick-bubble-py, 4px) var(--chat-quick-bubble-px, 10px);
+  font-size: var(--chat-quick-font, 12px);
+  cursor: pointer;
   border: 1px dashed;
   border-radius: 16px;
-  cursor: pointer;
-  font-size: 13px;
   transition: all 0.3s;
 }
 
 .add-modal {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   padding: 4px;
   border: 1px solid;
   border-radius: 16px;
@@ -243,9 +253,9 @@ watch(() => props.doctorId, () => {
 .add-input {
   flex: 1;
   padding: 4px 8px;
-  border: none;
-  outline: none;
   font-size: 13px;
+  outline: none;
+  border: none;
 }
 
 .add-actions {
diff --git a/apps/web-antd/src/views/doctor/online-consultation/components/OrderListFloatButton.vue b/apps/web-antd/src/views/doctor/online-consultation/components/OrderListFloatButton.vue
index 2f62eee5..8e8325d7 100644
--- a/apps/web-antd/src/views/doctor/online-consultation/components/OrderListFloatButton.vue
+++ b/apps/web-antd/src/views/doctor/online-consultation/components/OrderListFloatButton.vue
@@ -1,13 +1,24 @@
 <script setup lang="ts">
-import { Button } from 'ant-design-vue';
-import { ShoppingCartOutlined } from '@ant-design/icons-vue';
-import PatientOrderListModal from './PatientOrderListModal.vue';
+import { computed } from 'vue';
+
 import { useVbenDrawer } from '@vben/common-ui';
 
+import { ShoppingCartOutlined } from '@ant-design/icons-vue';
+import { Button } from 'ant-design-vue';
+
+import { useLayoutDensityStore } from '#/views/business/chat/stores/layoutDensity';
+
+import PatientOrderListModal from './PatientOrderListModal.vue';
+
 const props = defineProps<{
-  registerId?: number | null;
+  registerId?: null | number;
 }>();
 
+/** 悬浮钮在 ChatArea 外，直接读密度 store 同步大/中/小 */
+const layoutDensityStore = useLayoutDensityStore();
+const floatSize = computed(() => layoutDensityStore.floatBtnSize);
+const floatIconSize = computed(() => Math.round(floatSize.value * 0.4));
+
 const [OrderListDrawer, orderListDrawerApi] = useVbenDrawer({
   connectedComponent: PatientOrderListModal,
 });
@@ -28,13 +39,19 @@ const handleClick = () => {
     <Button
       type="primary"
       shape="circle"
-      size="large"
       @click="handleClick"
       class="float-btn"
-      style="width: 56px; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center;"
+      :style="{
+        width: `${floatSize}px`,
+        height: `${floatSize}px`,
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }"
     >
       <template #icon>
-        <ShoppingCartOutlined :style="{ fontSize: '20px' }" />
+        <ShoppingCartOutlined :style="{ fontSize: `${floatIconSize}px` }" />
       </template>
     </Button>
     <OrderListDrawer />
@@ -44,21 +61,19 @@ const handleClick = () => {
 <style scoped>
 .order-list-float-button {
   position: fixed;
-  right: 24px;
   top: 50%;
-  transform: translateY(-50%);
+  right: 24px;
   z-index: 1000;
+  transform: translateY(-50%);
 }
 
 .float-btn {
-  width: 56px;
-  height: 56px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   transition: all 0.3s;
 }
 
 .float-btn:hover {
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 6px 16px rgb(0 0 0 / 20%);
   transform: translateY(-2px);
 }
 </style>
diff --git a/apps/web-antd/src/views/doctor/online-consultation/components/QuickReplyBubbles.vue b/apps/web-antd/src/views/doctor/online-consultation/components/QuickReplyBubbles.vue
index 299b9196..25c2d771 100644
--- a/apps/web-antd/src/views/doctor/online-consultation/components/QuickReplyBubbles.vue
+++ b/apps/web-antd/src/views/doctor/online-consultation/components/QuickReplyBubbles.vue
@@ -1,12 +1,18 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
+
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
 import { Button, Popconfirm } from 'ant-design-vue';
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-import { 
-  getQuickReplyList, 
-  createQuickReply, 
-  updateQuickReply, 
-  deleteQuickReply 
+
+import {
+  createQuickReply,
+  deleteQuickReply,
+  getQuickReplyList,
+  updateQuickReply,
 } from '../api/index';
 
 const props = defineProps({
@@ -110,13 +116,18 @@ onMounted(() => {
   loadQuickReplies();
 });
 
-watch(() => props.doctorId, () => {
-  loadQuickReplies();
-});
+watch(
+  () => props.doctorId,
+  () => {
+    loadQuickReplies();
+  },
+);
 </script>
 
 <template>
-  <div class="quick-reply-bubbles bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+  <div
+    class="quick-reply-bubbles bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+  >
     <div class="bubbles-container">
       <div
         v-for="item in quickReplies"
@@ -139,11 +150,7 @@ watch(() => props.doctorId, () => {
             title="确定删除这条快速回复吗？"
             @confirm="handleDeleteReply(item.id)"
           >
-            <Button
-              type="text"
-              size="small"
-              danger
-            >
+            <Button type="text" size="small" danger>
               <template #icon><DeleteOutlined /></template>
             </Button>
           </Popconfirm>
@@ -159,7 +166,10 @@ watch(() => props.doctorId, () => {
         <span>添加常用语</span>
       </div>
 
-      <div v-else class="add-modal bg-white dark:bg-gray-700 border-blue-500 dark:border-blue-400">
+      <div
+        v-else
+        class="add-modal bg-white dark:bg-gray-700 border-blue-500 dark:border-blue-400"
+      >
         <input
           v-model="newContent"
           type="text"
@@ -185,23 +195,23 @@ watch(() => props.doctorId, () => {
 
 <style scoped>
 .quick-reply-bubbles {
-  padding: 8px 12px;
+  padding: var(--chat-quick-pad-y, 6px) var(--chat-quick-pad-x, 10px);
 }
 
 .bubbles-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--chat-quick-gap, 6px);
 }
 
 .reply-bubble {
   position: relative;
   display: inline-flex;
   align-items: center;
-  padding: 6px 12px;
+  padding: var(--chat-quick-bubble-py, 4px) var(--chat-quick-bubble-px, 10px);
+  cursor: pointer;
   border: 1px solid;
   border-radius: 16px;
-  cursor: pointer;
   transition: all 0.3s;
 }
 
@@ -210,31 +220,31 @@ watch(() => props.doctorId, () => {
 }
 
 .bubble-text {
-  font-size: 13px;
+  font-size: var(--chat-quick-font, 12px);
 }
 
 .bubble-actions {
   display: none;
-  margin-left: 8px;
   gap: 4px;
+  margin-left: 8px;
 }
 
 .add-bubble {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
-  padding: 6px 12px;
+  align-items: center;
+  padding: var(--chat-quick-bubble-py, 4px) var(--chat-quick-bubble-px, 10px);
+  font-size: var(--chat-quick-font, 12px);
+  cursor: pointer;
   border: 1px dashed;
   border-radius: 16px;
-  cursor: pointer;
-  font-size: 13px;
   transition: all 0.3s;
 }
 
 .add-modal {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   padding: 4px;
   border: 1px solid;
   border-radius: 16px;
@@ -243,9 +253,9 @@ watch(() => props.doctorId, () => {
 .add-input {
   flex: 1;
   padding: 4px 8px;
-  border: none;
-  outline: none;
   font-size: 13px;
+  outline: none;
+  border: none;
 }
 
 .add-actions {
@@ -253,4 +263,3 @@ watch(() => props.doctorId, () => {
   gap: 4px;
 }
 </style>
-
diff --git a/apps/web-antd/src/views/finance/invoice-center/components/InvoiceCenterCardList.vue b/apps/web-antd/src/views/finance/invoice-center/components/InvoiceCenterCardList.vue
new file mode 100644
index 00000000..290d01e9
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice-center/components/InvoiceCenterCardList.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+/**
+ * 开票中心卡片视图
+ *
+ * 展示字段与列表列一一对应（ID/订单号/诊所/抬头类型/抬头名称/金额/分账进度/接收方式/邮箱/状态/申请时间），
+ * 只改排版：金额放大强调，状态用同色 Tag + 卡片同色系微光。
+ * 拉数、分页、空态全部交给通用 GlassCardList；Tab 状态通过 extraParams 传入，切 Tab 自动回第 1 页重拉。
+ * 行操作由父级 buildRowActions 构造，与列表 #action 槽是同一份定义，显隐条件天然一致。
+ */
+import type { ActionItem } from '#/components/table-action';
+
+import { ref } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { GlassCard, GlassCardList } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
+
+import { getInvoiceCenterListApi } from '../api';
+import { invoiceStatusTagColor, invoiceStatusTone } from '../config/constants';
+
+defineOptions({ name: 'InvoiceCenterCardList' });
+
+const props = defineProps<{
+  /** 父级构造行操作（与列表 #action 槽同一份定义） */
+  buildRowActions: (row: Record<string, any>) => ActionItem[];
+  /** Tab 状态等固定参数（如 { status: '0' }） */
+  extraParams?: Record<string, any>;
+  /** 顶部统一搜索条件 */
+  formValues?: Record<string, any>;
+}>();
+
+const listRef = ref<null | {
+  refreshKeepPage: () => Promise<void>;
+  reload: () => Promise<void>;
+}>(null);
+
+/**
+ * 是否至少有一个可见操作
+ * 为什么要判断：没有可见操作时不渲染 footer，避免卡片底部留一条空分割线
+ */
+function hasVisibleAction(row: Record<string, any>) {
+  return props.buildRowActions(row).some((action) => action.ifShow !== false);
+}
+
+/** 回第 1 页重拉（筛选变化、切 Tab 后由 GlassCardList 自动触发，这里给父级手动调用） */
+async function reload() {
+  await listRef.value?.reload();
+}
+
+/** 原地刷新当前页（受理、拒绝、上传发票等操作成功后，避免跳回第 1 页） */
+async function refreshKeepPage() {
+  await listRef.value?.refreshKeepPage();
+}
+
+defineExpose({ reload, refreshKeepPage });
+</script>
+
+<template>
+  <GlassCardList
+    ref="listRef"
+    :fetcher="getInvoiceCenterListApi"
+    :form-values="props.formValues"
+    :extra-params="props.extraParams"
+    :min-card-width="340"
+    empty-text="暂无开票申请"
+  >
+    <template #card="{ row }">
+      <GlassCard
+        hoverable
+        icon="lucide:receipt-text"
+        :tone="invoiceStatusTone(Number(row.status))"
+      >
+        <template #title>
+          <span :title="row.store_name">{{ row.store_name || '-' }}</span>
+        </template>
+        <template #subtitle>
+          <span class="invoice-card__sub">#{{ row.id }} · {{ row.order_no || '-' }}</span>
+        </template>
+        <template #extra>
+          <Tag :color="invoiceStatusTagColor(Number(row.status))" class="!mr-0">
+            {{ row.status_text || '-' }}
+          </Tag>
+        </template>
+        <!-- 金额强调 + 抬头类型 -->
+        <div class="invoice-card__amount-row">
+          <span class="invoice-card__amount"><i>¥</i>{{ row.amount ?? '0' }}</span>
+          <Tag v-if="row.title_type_text" class="!mr-0">
+{{
+            row.title_type_text
+          }}
+</Tag>
+        </div>
+        <div class="invoice-card__title-name" :title="row.title_name">
+          {{ row.title_name || '-' }}
+        </div>
+        <dl class="invoice-card__kv">
+          <div class="invoice-card__kv-item invoice-card__kv-item--full">
+            <dt>分账进度</dt>
+            <dd>
+              <span>{{ row.party_progress || '-' }}</span>
+              <Tag v-if="row.my_party" class="!mr-0 ml-1" color="blue">
+                本方：{{ row.my_party.status_text || '-' }}
+              </Tag>
+            </dd>
+          </div>
+          <div class="invoice-card__kv-item">
+            <dt>接收方式</dt>
+            <dd>{{ row.receive_type_text || '-' }}</dd>
+          </div>
+          <div class="invoice-card__kv-item">
+            <dt>申请时间</dt>
+            <dd>{{ row.created_at || '-' }}</dd>
+          </div>
+          <div class="invoice-card__kv-item invoice-card__kv-item--full">
+            <dt>邮箱</dt>
+            <dd :title="row.email">{{ row.email || '-' }}</dd>
+          </div>
+        </dl>
+        <template v-if="hasVisibleAction(row)" #footer>
+          <CardActions :actions="props.buildRowActions(row)" :max-visible="2" />
+        </template>
+      </GlassCard>
+    </template>
+  </GlassCardList>
+</template>
+
+<style scoped>
+.invoice-card__sub {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.invoice-card__amount-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 金额是开票卡片的核心信息，放大加粗并用主色强调 */
+.invoice-card__amount {
+  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: hsl(var(--primary));
+}
+
+.invoice-card__amount i {
+  margin-right: 1px;
+  font-size: 14px;
+  font-style: normal;
+}
+
+.invoice-card__title-name {
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.invoice-card__kv {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+  margin: 12px 0 0;
+}
+
+.invoice-card__kv-item {
+  min-width: 0;
+}
+
+.invoice-card__kv-item--full {
+  grid-column: 1 / -1;
+}
+
+.invoice-card__kv-item dt {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.invoice-card__kv-item dd {
+  margin: 2px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/invoice-center/config/constants.ts b/apps/web-antd/src/views/finance/invoice-center/config/constants.ts
new file mode 100644
index 00000000..d96db4f9
--- /dev/null
+++ b/apps/web-antd/src/views/finance/invoice-center/config/constants.ts
@@ -0,0 +1,34 @@
+/**
+ * 开票中心常量：列表视图与卡片视图共用，避免两处各写一套状态配色
+ */
+
+/** 开票申请主状态：0待受理 1开票中 2已完成 9已拒绝 */
+export const INVOICE_STATUS = {
+  PENDING: 0,
+  PROCESSING: 1,
+  COMPLETED: 2,
+  REJECTED: 9,
+} as const;
+
+/**
+ * 主状态 → antd Tag 颜色
+ * 为什么单独抽出：列表 #status 槽与卡片右上角状态 Tag 必须同色，改一处两边同步
+ */
+export function invoiceStatusTagColor(status: number): string {
+  if (status === INVOICE_STATUS.PENDING) return 'processing';
+  if (status === INVOICE_STATUS.PROCESSING) return 'warning';
+  if (status === INVOICE_STATUS.COMPLETED) return 'success';
+  if (status === INVOICE_STATUS.REJECTED) return 'error';
+  return 'default';
+}
+
+/**
+ * 主状态 → GlassCard 主题色变量名（不带 --）
+ * 卡片边框微光与状态 Tag 同色系，扫一眼就能分辨待办与已完结
+ */
+export function invoiceStatusTone(status: number): string {
+  if (status === INVOICE_STATUS.PROCESSING) return 'warning';
+  if (status === INVOICE_STATUS.COMPLETED) return 'success';
+  if (status === INVOICE_STATUS.REJECTED) return 'destructive';
+  return 'primary';
+}
diff --git a/apps/web-antd/src/views/finance/invoice-center/config/table.ts b/apps/web-antd/src/views/finance/invoice-center/config/table.ts
index 5c7ba057..aff5d8b0 100644
--- a/apps/web-antd/src/views/finance/invoice-center/config/table.ts
+++ b/apps/web-antd/src/views/finance/invoice-center/config/table.ts
@@ -9,9 +9,14 @@ interface RowType {
 }
 
 /**
- * 开票中心表格配置；statusFilter 由页面注入当前 Tab 状态
+ * 开票中心表格配置
+ * @param getStatus 当前 Tab 状态（页面注入）
+ * @param getSearchValues 页面顶部统一搜索表单的现值（列表/卡片双视图共用，grid 不再内嵌表单）
  */
-export function createGridOptions(getStatus: () => string | number): VxeGridProps<RowType> {
+export function createGridOptions(
+  getStatus: () => number | string,
+  getSearchValues: () => Promise<Record<string, any>>,
+): VxeGridProps<RowType> {
   return {
     checkboxConfig: {
       highlight: true,
@@ -24,10 +29,20 @@ export function createGridOptions(getStatus: () => string | number): VxeGridProp
       { field: 'title_type_text', title: '抬头类型', width: 90 },
       { field: 'title_name', title: '抬头名称', minWidth: 120 },
       { field: 'amount', title: '金额', width: 100 },
-      { field: 'party_progress', title: '分账进度', width: 100, slots: { default: 'party_progress' } },
+      {
+        field: 'party_progress',
+        title: '分账进度',
+        width: 100,
+        slots: { default: 'party_progress' },
+      },
       { field: 'receive_type_text', title: '接收方式', width: 100 },
       { field: 'email', title: '邮箱', minWidth: 160 },
-      { field: 'status_text', title: '状态', width: 90, slots: { default: 'status' } },
+      {
+        field: 'status_text',
+        title: '状态',
+        width: 90,
+        slots: { default: 'status' },
+      },
       { field: 'created_at', title: '申请时间', minWidth: 160 },
       {
         title: '操作',
@@ -43,8 +58,9 @@ export function createGridOptions(getStatus: () => string | number): VxeGridProp
     rowConfig: { useKey: true },
     proxyConfig: {
       ajax: {
-        query: async ({ page }, formValues) => {
+        query: async ({ page }) => {
           const status = getStatus();
+          const formValues = await getSearchValues();
           return await getInvoiceCenterListApi({
             page: page.currentPage,
             pageSize: page.pageSize,
@@ -57,8 +73,9 @@ export function createGridOptions(getStatus: () => string | number): VxeGridProp
     height: 'auto',
     border: false,
     toolbarConfig: {
-      // @ts-ignore
-      search: true,
+      // 搜索已抽到页面顶部（双视图共用），关闭 grid 自带的表单开关
+      // @ts-expect-error
+      search: false,
       refresh: true,
       print: false,
       export: false,
diff --git a/apps/web-antd/src/views/finance/invoice-center/index.vue b/apps/web-antd/src/views/finance/invoice-center/index.vue
index c9986360..fe656388 100644
--- a/apps/web-antd/src/views/finance/invoice-center/index.vue
+++ b/apps/web-antd/src/views/finance/invoice-center/index.vue
@@ -1,15 +1,28 @@
 <script lang="ts" setup>
 /**
  * 财务开票中心：各方分别受理/开票（平台仅操作本方份额）
+ * 顶部统一搜索 + Tabs（双视图共用）+ 列表/卡片切换
  */
-import { computed, onMounted, ref } from 'vue';
+import type { ActionItem } from '#/components/table-action';
+
+import { computed, onMounted, ref, watch } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Badge, Button, Modal, Space, Tabs, Tag, message } from 'ant-design-vue';
+import {
+  Badge,
+  Button,
+  message,
+  Modal,
+  Space,
+  Tabs,
+  Tag,
+} from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import FilePreviewModal from '#/components/file-preview/FilePreviewModal.vue';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import { useDualViewSearch } from '#/composables/use-dual-view-search';
 
 import {
   acceptInvoiceApi,
@@ -17,7 +30,9 @@ import {
   resendInvoiceEmailApi,
 } from './api';
 import CompleteModal from './components/CompleteModal.vue';
+import InvoiceCenterCardList from './components/InvoiceCenterCardList.vue';
 import RejectModal from './components/RejectModal.vue';
+import { invoiceStatusTagColor } from './config/constants';
 import { formOptions } from './config/search';
 import { createGridOptions } from './config/table';
 
@@ -39,6 +54,11 @@ const statusFilter = computed(() =>
   activeTab.value === 'all' ? '' : activeTab.value,
 );
 
+/** Tab 传给卡片列表的固定参数；切 Tab 时 GlassCardList watch extraParams 回第 1 页 */
+const cardExtraParams = computed(() => ({
+  status: statusFilter.value,
+}));
+
 const statusStats = ref<Record<string, number>>({
   '0': 0,
   '1': 0,
@@ -46,18 +66,51 @@ const statusStats = ref<Record<string, number>>({
   '9': 0,
 });
 
-const [Grid, gridApi] = useVbenVxeGrid({
+/** 列表/卡片双视图偏好 */
+const viewMode = useViewMode('invoice-center-view-mode');
+const cardListRef = ref<InstanceType<typeof InvoiceCenterCardList> | null>(
+  null,
+);
+
+const { SearchForm, searchValues, readLiveSearchValues } = useDualViewSearch({
   formOptions,
-  gridOptions: createGridOptions(() => statusFilter.value),
+  viewMode,
+  onListSearch: () => {
+     
+    gridApi.reload();
+  },
 });
 
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: createGridOptions(
+    () => statusFilter.value,
+    () => readLiveSearchValues(),
+  ),
+});
+
+/** 操作成功后刷新当前视图 + 角标统计 */
 function reloadAll() {
-  gridApi.reload();
+  if (viewMode.value === 'list') {
+    gridApi.reload();
+  } else {
+    cardListRef.value?.reload?.();
+  }
+  loadStatusStats();
+}
+
+/** 原地刷新（受理等操作后不跳回第 1 页） */
+function refreshCurrentView() {
+  if (viewMode.value === 'list') {
+    gridApi.query();
+  } else {
+    cardListRef.value?.refreshKeepPage?.();
+  }
   loadStatusStats();
 }
 
 const gridApiWithStats = {
   reload: reloadAll,
+  query: refreshCurrentView,
 };
 
 const [RejectModalComp, rejectModalApi] = useVbenModal({
@@ -85,13 +138,24 @@ async function loadStatusStats() {
   }
 }
 
-function handleTabChange(key: string | number) {
+function handleTabChange(key: number | string) {
   const next = String(key);
   activeTab.value = next;
   localStorage.setItem(TAB_STORAGE_KEY, next);
-  reloadAll();
+  // 卡片靠 extraParams watch；列表需手动 reload 回第 1 页
+  if (viewMode.value === 'list') {
+    gridApi.reload();
+  }
+  loadStatusStats();
 }
 
+/** 切回列表时 grid 被 v-if 卸载过，需重查 */
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    gridApi.query();
+  }
+});
+
 /** 本方 party 状态：0待受理 1待开票 2已开票 */
 function myPartyStatus(row: any) {
   return Number(row?.my_party?.status ?? -1);
@@ -104,7 +168,7 @@ async function handleAccept(row: any) {
     async onOk() {
       await acceptInvoiceApi({ id: row.id, party_id: row?.my_party?.id });
       message.success('本方已受理');
-      reloadAll();
+      refreshCurrentView();
     },
   });
 }
@@ -138,19 +202,11 @@ async function handleResend(row: any) {
     async onOk() {
       await resendInvoiceEmailApi({ id: row.id });
       message.success('邮件已重发');
-      reloadAll();
+      refreshCurrentView();
     },
   });
 }
 
-function statusColor(status: number) {
-  if (status === 0) return 'processing';
-  if (status === 1) return 'warning';
-  if (status === 2) return 'success';
-  if (status === 9) return 'error';
-  return 'default';
-}
-
 function openPreview(files: string[]) {
   if (!files?.length) {
     message.info('暂无文件');
@@ -160,6 +216,51 @@ function openPreview(files: string[]) {
   previewOpen.value = true;
 }
 
+/**
+ * 行操作定义（列表 #action 与卡片 CardActions 共用同一份，显隐条件天然一致）
+ */
+function buildRowActions(row: Record<string, any>): ActionItem[] {
+  return [
+    {
+      label: '受理本方',
+      type: 'link',
+      ifShow: myPartyStatus(row) === 0 && row.status !== 9,
+      onClick: () => handleAccept(row),
+    },
+    {
+      label: '拒绝',
+      type: 'link',
+      danger: true,
+      ifShow: row.status === 0 && myPartyStatus(row) === 0,
+      onClick: () => openReject(row),
+    },
+    {
+      label: '上传本方发票',
+      type: 'link',
+      ifShow: myPartyStatus(row) === 1,
+      onClick: () => openComplete(row),
+    },
+    {
+      label: '预览本方',
+      type: 'link',
+      ifShow: !!row.my_party?.invoice_files?.length,
+      onClick: () => openPreview(row.my_party.invoice_files),
+    },
+    {
+      label: '查看全部',
+      type: 'link',
+      ifShow: row.status === 2 && !!row.invoice_files?.length,
+      onClick: () => openPreview(row.invoice_files),
+    },
+    {
+      label: '重发邮件',
+      type: 'link',
+      ifShow: row.status === 2 && !!row.email,
+      onClick: () => handleResend(row),
+    },
+  ];
+}
+
 onMounted(() => {
   loadStatusStats();
 });
@@ -169,102 +270,112 @@ onMounted(() => {
   <Page auto-content-height title="开票中心">
     <RejectModalComp />
     <CompleteModalComp />
-    <FilePreviewModal v-model:open="previewOpen" :files="previewFiles" title="发票预览" />
-    <Tabs :active-key="activeTab" class="mb-2" @change="handleTabChange">
-      <Tabs.TabPane key="0">
-        <template #tab>
-          <Badge :count="statusStats['0']" :offset="[10, 0]" :number-style="{ fontSize: '12px' }">
-            <span>待受理</span>
-          </Badge>
+    <FilePreviewModal
+      v-model:open="previewOpen"
+      :files="previewFiles"
+      title="发票预览"
+    />
+    <div class="flex h-full min-h-0 flex-col overflow-hidden">
+      <!-- Tabs 对列表/卡片都生效，角标统计与状态筛选共用 -->
+      <Tabs
+        :active-key="activeTab"
+        class="mb-2 shrink-0"
+        @change="handleTabChange"
+      >
+        <Tabs.TabPane key="0">
+          <template #tab>
+            <Badge
+              :count="statusStats['0']"
+              :offset="[10, 0]"
+              :number-style="{ fontSize: '12px' }"
+            >
+              <span>待受理</span>
+            </Badge>
+          </template>
+        </Tabs.TabPane>
+        <Tabs.TabPane key="1">
+          <template #tab>
+            <Badge
+              :count="statusStats['1']"
+              :offset="[10, 0]"
+              :number-style="{ fontSize: '12px' }"
+            >
+              <span>开票中</span>
+            </Badge>
+          </template>
+        </Tabs.TabPane>
+        <Tabs.TabPane key="2">
+          <template #tab>
+            <Badge
+              :count="statusStats['2']"
+              :offset="[10, 0]"
+              :number-style="{ fontSize: '12px' }"
+            >
+              <span>已完成</span>
+            </Badge>
+          </template>
+        </Tabs.TabPane>
+        <Tabs.TabPane key="9">
+          <template #tab>
+            <Badge
+              :count="statusStats['9']"
+              :offset="[10, 0]"
+              :number-style="{ fontSize: '12px' }"
+            >
+              <span>已拒绝</span>
+            </Badge>
+          </template>
+        </Tabs.TabPane>
+        <Tabs.TabPane key="all" tab="全部" />
+      </Tabs>
+      <div
+        class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+      >
+        <SearchForm />
+      </div>
+      <div class="mb-3 shrink-0">
+        <ViewModeSwitch v-model="viewMode" />
+      </div>
+      <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
+        <template #toolbar-actions></template>
+        <template #status="{ row }">
+          <Tag :color="invoiceStatusTagColor(Number(row.status))">
+{{
+            row.status_text
+          }}
+</Tag>
         </template>
-      </Tabs.TabPane>
-      <Tabs.TabPane key="1">
-        <template #tab>
-          <Badge :count="statusStats['1']" :offset="[10, 0]" :number-style="{ fontSize: '12px' }">
-            <span>开票中</span>
-          </Badge>
+        <template #party_progress="{ row }">
+          <span>{{ row.party_progress || '-' }}</span>
+          <Tag v-if="row.my_party" class="ml-1" color="blue">
+            本方：{{ row.my_party.status_text || '-' }}
+          </Tag>
         </template>
-      </Tabs.TabPane>
-      <Tabs.TabPane key="2">
-        <template #tab>
-          <Badge :count="statusStats['2']" :offset="[10, 0]" :number-style="{ fontSize: '12px' }">
-            <span>已完成</span>
-          </Badge>
+        <template #action="{ row }">
+          <Space>
+            <Button
+              v-for="action in buildRowActions(row).filter(
+                (a) => a.ifShow !== false,
+              )"
+              :key="action.label"
+              type="link"
+              size="small"
+              :danger="action.danger"
+              @click="action.onClick?.()"
+            >
+              {{ action.label }}
+            </Button>
+          </Space>
         </template>
-      </Tabs.TabPane>
-      <Tabs.TabPane key="9">
-        <template #tab>
-          <Badge :count="statusStats['9']" :offset="[10, 0]" :number-style="{ fontSize: '12px' }">
-            <span>已拒绝</span>
-          </Badge>
-        </template>
-      </Tabs.TabPane>
-      <Tabs.TabPane key="all" tab="全部" />
-    </Tabs>
-    <Grid>
-      <template #toolbar-actions />
-      <template #status="{ row }">
-        <Tag :color="statusColor(row.status)">{{ row.status_text }}</Tag>
-      </template>
-      <template #party_progress="{ row }">
-        <span>{{ row.party_progress || '-' }}</span>
-        <Tag v-if="row.my_party" class="ml-1" color="blue">
-          本方：{{ row.my_party.status_text || '-' }}
-        </Tag>
-      </template>
-      <template #action="{ row }">
-        <Space>
-          <Button
-            v-if="myPartyStatus(row) === 0 && row.status !== 9"
-            type="link"
-            size="small"
-            @click="handleAccept(row)"
-          >
-            受理本方
-          </Button>
-          <Button
-            v-if="row.status === 0 && myPartyStatus(row) === 0"
-            type="link"
-            size="small"
-            danger
-            @click="openReject(row)"
-          >
-            拒绝
-          </Button>
-          <Button
-            v-if="myPartyStatus(row) === 1"
-            type="link"
-            size="small"
-            @click="openComplete(row)"
-          >
-            上传本方发票
-          </Button>
-          <Button
-            v-if="row.my_party?.invoice_files?.length"
-            type="link"
-            size="small"
-            @click="openPreview(row.my_party.invoice_files)"
-          >
-            预览本方
-          </Button>
-          <Button
-            v-if="row.status === 2 && row.invoice_files?.length"
-            type="link"
-            size="small"
-            @click="openPreview(row.invoice_files)"
-          >
-            查看全部
-          </Button>
-          <Button
-            v-if="row.status === 2 && row.email"
-            type="link"
-            size="small"
-            @click="handleResend(row)"
-          >
-            重发邮件
-          </Button>
-        </Space>
-      </template>
-    </Grid>
+      </Grid>
+      <InvoiceCenterCardList
+        v-else
+        ref="cardListRef"
+        class="h-0 min-h-0 flex-1 overflow-auto"
+        :form-values="searchValues"
+        :extra-params="cardExtraParams"
+        :build-row-actions="buildRowActions"
+      />
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/finance/my-invoice/components/MyInvoiceCardList.vue b/apps/web-antd/src/views/finance/my-invoice/components/MyInvoiceCardList.vue
new file mode 100644
index 00000000..24a02f9e
--- /dev/null
+++ b/apps/web-antd/src/views/finance/my-invoice/components/MyInvoiceCardList.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+/**
+ * 我的开票卡片视图
+ * 字段与列表列对齐；拉数/分页交给 GlassCardList；行操作由父级 buildRowActions 注入
+ */
+import type { ActionItem } from '#/components/table-action';
+
+import { ref } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { GlassCard, GlassCardList } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
+
+import { getMyInvoiceListApi } from '../api';
+import {
+  myInvoiceStatusTagColor,
+  myInvoiceStatusTone,
+} from '../config/constants';
+
+defineOptions({ name: 'MyInvoiceCardList' });
+
+const props = defineProps<{
+  buildRowActions: (row: Record<string, any>) => ActionItem[];
+  formValues?: Record<string, any>;
+}>();
+
+const listRef = ref<null | {
+  refreshKeepPage: () => Promise<void>;
+  reload: () => Promise<void>;
+}>(null);
+
+function hasVisibleAction(row: Record<string, any>) {
+  return props.buildRowActions(row).some((action) => action.ifShow !== false);
+}
+
+async function reload() {
+  await listRef.value?.reload();
+}
+
+async function refreshKeepPage() {
+  await listRef.value?.refreshKeepPage();
+}
+
+defineExpose({ reload, refreshKeepPage });
+</script>
+
+<template>
+  <GlassCardList
+    ref="listRef"
+    :fetcher="getMyInvoiceListApi"
+    :form-values="props.formValues"
+    :min-card-width="320"
+    empty-text="暂无开票待办"
+  >
+    <template #card="{ row }">
+      <GlassCard
+        hoverable
+        icon="lucide:file-text"
+        :tone="myInvoiceStatusTone(Number(row.status))"
+      >
+        <template #title>
+          <span :title="row.party_name">{{ row.party_name || '-' }}</span>
+        </template>
+        <template #subtitle>
+          <span class="my-invoice-card__sub">#{{ row.id }} · {{ row.order_no || '-' }}</span>
+        </template>
+        <template #extra>
+          <Tag
+            :color="myInvoiceStatusTagColor(Number(row.status))"
+            class="!mr-0"
+          >
+            {{ row.status_text || '-' }}
+          </Tag>
+        </template>
+        <div class="my-invoice-card__amount-row">
+          <span class="my-invoice-card__amount"><i>¥</i>{{ row.amount ?? '0' }}</span>
+        </div>
+        <dl class="my-invoice-card__kv">
+          <div class="my-invoice-card__kv-item my-invoice-card__kv-item--full">
+            <dt>抬头</dt>
+            <dd :title="row.title_name">{{ row.title_name || '-' }}</dd>
+          </div>
+          <div class="my-invoice-card__kv-item my-invoice-card__kv-item--full">
+            <dt>创建时间</dt>
+            <dd>{{ row.created_at || '-' }}</dd>
+          </div>
+        </dl>
+        <template v-if="hasVisibleAction(row)" #footer>
+          <CardActions :actions="props.buildRowActions(row)" :max-visible="2" />
+        </template>
+      </GlassCard>
+    </template>
+  </GlassCardList>
+</template>
+
+<style scoped>
+.my-invoice-card__sub {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.my-invoice-card__amount-row {
+  display: flex;
+  align-items: center;
+}
+
+.my-invoice-card__amount {
+  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: hsl(var(--primary));
+}
+
+.my-invoice-card__amount i {
+  margin-right: 1px;
+  font-size: 14px;
+  font-style: normal;
+}
+
+.my-invoice-card__kv {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  margin: 12px 0 0;
+}
+
+.my-invoice-card__kv-item dt {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.my-invoice-card__kv-item dd {
+  margin: 2px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/my-invoice/config/constants.ts b/apps/web-antd/src/views/finance/my-invoice/config/constants.ts
new file mode 100644
index 00000000..53d79cfe
--- /dev/null
+++ b/apps/web-antd/src/views/finance/my-invoice/config/constants.ts
@@ -0,0 +1,18 @@
+/**
+ * 我的开票常量：列表与卡片共用状态配色
+ */
+
+/** 本方 party 状态：0待受理 1待开票 2已开票 */
+export function myInvoiceStatusTagColor(status: number): string {
+  if (status === 0) return 'processing';
+  if (status === 1) return 'warning';
+  if (status === 2) return 'success';
+  return 'default';
+}
+
+/** 本方状态 → GlassCard tone */
+export function myInvoiceStatusTone(status: number): string {
+  if (status === 1) return 'warning';
+  if (status === 2) return 'success';
+  return 'primary';
+}
diff --git a/apps/web-antd/src/views/finance/my-invoice/config/table.ts b/apps/web-antd/src/views/finance/my-invoice/config/table.ts
index 31e60773..334bf543 100644
--- a/apps/web-antd/src/views/finance/my-invoice/config/table.ts
+++ b/apps/web-antd/src/views/finance/my-invoice/config/table.ts
@@ -8,50 +8,63 @@ interface RowType {
   status: number;
 }
 
-/** 我的开票表格 */
-export const gridOptions: VxeGridProps<RowType> = {
-  checkboxConfig: { highlight: true, labelField: '' },
-  columns: [
-    { field: 'id', title: 'ID', width: 70 },
-    { field: 'order_no', title: '订单号', minWidth: 160 },
-    { field: 'title_name', title: '抬头', minWidth: 120 },
-    { field: 'party_name', title: '开票方', minWidth: 120 },
-    { field: 'amount', title: '本方金额', width: 110 },
-    { field: 'status_text', title: '状态', width: 90, slots: { default: 'status' } },
-    { field: 'created_at', title: '创建时间', minWidth: 160 },
-    {
-      title: '操作',
-      align: 'right',
-      slots: { default: 'action' },
-      width: 200,
-      fixed: 'right',
-    },
-  ],
-  keepSource: true,
-  pagerConfig: {},
-  columnConfig: { useKey: true },
-  rowConfig: { useKey: true },
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        return await getMyInvoiceListApi({
-          page: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
+/**
+ * 我的开票表格
+ * @param getSearchValues 页面顶部统一搜索表单现值（列表/卡片双视图共用）
+ */
+export function createGridOptions(
+  getSearchValues: () => Promise<Record<string, any>>,
+): VxeGridProps<RowType> {
+  return {
+    checkboxConfig: { highlight: true, labelField: '' },
+    columns: [
+      { field: 'id', title: 'ID', width: 70 },
+      { field: 'order_no', title: '订单号', minWidth: 160 },
+      { field: 'title_name', title: '抬头', minWidth: 120 },
+      { field: 'party_name', title: '开票方', minWidth: 120 },
+      { field: 'amount', title: '本方金额', width: 110 },
+      {
+        field: 'status_text',
+        title: '状态',
+        width: 90,
+        slots: { default: 'status' },
+      },
+      { field: 'created_at', title: '创建时间', minWidth: 160 },
+      {
+        title: '操作',
+        align: 'right',
+        slots: { default: 'action' },
+        width: 200,
+        fixed: 'right',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {},
+    columnConfig: { useKey: true },
+    rowConfig: { useKey: true },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const formValues = await getSearchValues();
+          return await getMyInvoiceListApi({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
       },
     },
-  },
-  height: 'auto',
-  border: false,
-  toolbarConfig: {
-    // @ts-ignore
-    search: true,
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    slots: { buttons: 'toolbar-actions' },
-  },
-  showOverflow: false,
-};
+    height: 'auto',
+    border: false,
+    toolbarConfig: {
+      // @ts-expect-error
+      search: false,
+      refresh: true,
+      print: false,
+      export: false,
+      zoom: true,
+      slots: { buttons: 'toolbar-actions' },
+    },
+    showOverflow: false,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/my-invoice/index.vue b/apps/web-antd/src/views/finance/my-invoice/index.vue
index d9587b03..58c23147 100644
--- a/apps/web-antd/src/views/finance/my-invoice/index.vue
+++ b/apps/web-antd/src/views/finance/my-invoice/index.vue
@@ -1,26 +1,44 @@
 <script lang="ts" setup>
 /**
  * 门店/供应商/配送仓「我的开票」：仅本方受理与开票
+ * 顶部统一搜索 + 列表/卡片双视图
  */
-import { ref } from 'vue';
+import type { ActionItem } from '#/components/table-action';
+
+import { ref, watch } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Button, Modal, Space, Tag, message } from 'ant-design-vue';
+import { Button, message, Modal, Space, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import FilePreviewModal from '#/components/file-preview/FilePreviewModal.vue';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import { useDualViewSearch } from '#/composables/use-dual-view-search';
 
 import { acceptMyInvoiceApi } from './api';
 import CompleteModal from './components/CompleteModal.vue';
+import MyInvoiceCardList from './components/MyInvoiceCardList.vue';
+import { myInvoiceStatusTagColor } from './config/constants';
 import { formOptions } from './config/search';
-import { gridOptions } from './config/table';
+import { createGridOptions } from './config/table';
 
 defineOptions({ name: 'MyInvoiceTodo' });
 
-const [Grid, gridApi] = useVbenVxeGrid({
+const viewMode = useViewMode('my-invoice-view-mode');
+const cardListRef = ref<InstanceType<typeof MyInvoiceCardList> | null>(null);
+
+const { SearchForm, searchValues, readLiveSearchValues } = useDualViewSearch({
   formOptions,
-  gridOptions,
+  viewMode,
+  onListSearch: () => {
+     
+    gridApi.reload();
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: createGridOptions(() => readLiveSearchValues()),
 });
 
 const [CompleteModalComp, completeModalApi] = useVbenModal({
@@ -30,27 +48,48 @@ const [CompleteModalComp, completeModalApi] = useVbenModal({
 const previewOpen = ref(false);
 const previewFiles = ref<string[]>([]);
 
-function partyStatusColor(status: number) {
-  if (status === 0) return 'processing';
-  if (status === 1) return 'warning';
-  if (status === 2) return 'success';
-  return 'default';
+function refreshCurrentView() {
+  if (viewMode.value === 'list') {
+    gridApi.query();
+  } else {
+    cardListRef.value?.refreshKeepPage?.();
+  }
 }
 
+const gridApiProxy = {
+  reload: () => {
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    } else {
+      cardListRef.value?.reload?.();
+    }
+  },
+  query: refreshCurrentView,
+};
+
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    gridApi.query();
+  }
+});
+
 function handleAccept(row: any) {
   Modal.confirm({
     title: '确认受理本方开票？',
     content: `开票方 ${row.party_name || ''}，金额 ￥${row.amount || '0'}`,
     async onOk() {
-      await acceptMyInvoiceApi({ party_id: row.id, invoice_id: row.invoice_id });
+      await acceptMyInvoiceApi({
+        party_id: row.id,
+        invoice_id: row.invoice_id,
+      });
       message.success('本方已受理');
-      gridApi.reload();
+      refreshCurrentView();
     },
   });
 }
 
 function openComplete(row: any) {
-  completeModalApi.setData({ ...row, gridApi });
+  completeModalApi.setData({ ...row, gridApi: gridApiProxy });
   completeModalApi.open();
 }
 
@@ -62,47 +101,78 @@ function openPreview(files: string[]) {
   previewFiles.value = files;
   previewOpen.value = true;
 }
+
+function buildRowActions(row: Record<string, any>): ActionItem[] {
+  return [
+    {
+      label: '受理',
+      type: 'link',
+      ifShow: row.status === 0,
+      onClick: () => handleAccept(row),
+    },
+    {
+      label: '上传发票',
+      type: 'link',
+      ifShow: row.status === 1,
+      onClick: () => openComplete(row),
+    },
+    {
+      label: '预览',
+      type: 'link',
+      ifShow: row.status === 2 && !!row.invoice_files?.length,
+      onClick: () => openPreview(row.invoice_files),
+    },
+  ];
+}
 </script>
 
 <template>
   <Page auto-content-height title="我的开票">
     <CompleteModalComp />
-    <FilePreviewModal v-model:open="previewOpen" :files="previewFiles" title="发票预览" />
-    <Grid>
-      <template #toolbar-actions />
-      <template #status="{ row }">
-        <Tag :color="partyStatusColor(row.status)">
-          {{ row.status_text }}
-        </Tag>
-      </template>
-      <template #action="{ row }">
-        <Space>
-          <Button
-            v-if="row.status === 0"
-            type="link"
-            size="small"
-            @click="handleAccept(row)"
-          >
-            受理
-          </Button>
-          <Button
-            v-if="row.status === 1"
-            type="link"
-            size="small"
-            @click="openComplete(row)"
-          >
-            上传发票
-          </Button>
-          <Button
-            v-if="row.status === 2 && row.invoice_files?.length"
-            type="link"
-            size="small"
-            @click="openPreview(row.invoice_files)"
-          >
-            预览
-          </Button>
-        </Space>
-      </template>
-    </Grid>
+    <FilePreviewModal
+      v-model:open="previewOpen"
+      :files="previewFiles"
+      title="发票预览"
+    />
+    <div class="flex h-full min-h-0 flex-col overflow-hidden">
+      <div
+        class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+      >
+        <SearchForm />
+      </div>
+      <div class="mb-3 shrink-0">
+        <ViewModeSwitch v-model="viewMode" />
+      </div>
+      <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
+        <template #toolbar-actions></template>
+        <template #status="{ row }">
+          <Tag :color="myInvoiceStatusTagColor(Number(row.status))">
+            {{ row.status_text }}
+          </Tag>
+        </template>
+        <template #action="{ row }">
+          <Space>
+            <Button
+              v-for="action in buildRowActions(row).filter(
+                (a) => a.ifShow !== false,
+              )"
+              :key="action.label"
+              type="link"
+              size="small"
+              @click="action.onClick?.()"
+            >
+              {{ action.label }}
+            </Button>
+          </Space>
+        </template>
+      </Grid>
+      <MyInvoiceCardList
+        v-else
+        ref="cardListRef"
+        class="h-0 min-h-0 flex-1 overflow-auto"
+        :form-values="searchValues"
+        :build-row-actions="buildRowActions"
+      />
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/finance/public-account-confirm/config/daily-table.ts b/apps/web-antd/src/views/finance/public-account-confirm/config/daily-table.ts
index a83e3388..3cc8c0cd 100644
--- a/apps/web-antd/src/views/finance/public-account-confirm/config/daily-table.ts
+++ b/apps/web-antd/src/views/finance/public-account-confirm/config/daily-table.ts
@@ -1,87 +1,113 @@
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import {
+  formatDailyBillDate,
+  formatDailyMergeId,
+  formatDailyRowId,
+  formatDailyRowType,
+} from '#/views/finance/public-account-pay/config/constants';
+
+import { getPublicAccountDailyBillList } from '../api';
+
 interface RowType {
   id: number;
   bill_date: number;
   status: number;
 }
 
-export const dailyGridOptions: VxeGridProps<RowType> = {
-  columns: [
-    { field: 'id', title: 'ID', width: 90, formatter: ({ row }) =>
-        Number(row.is_period || 0) === 1
-          ? `合#${row.merge_id || '—'}`
-          : String(row.id || '—'),
-    },
-    {
-      field: 'row_type_txt',
-      title: '类型',
-      width: 90,
-      formatter: ({ row }) =>
-        Number(row.is_period || 0) === 1 ? '周期账单' : '日账单',
-    },
-    {
-      field: 'merge_id',
-      title: '合并ID',
-      width: 110,
-      formatter: ({ row }) => {
-        const mid = Number(row.merge_id || 0);
-        if (mid < 1) {
-          return '—';
-        }
-        if (Number(row.is_period || 0) === 1) {
-          return String(mid);
-        }
-        return row.merge_parent_txt || `周期#${mid}`;
+/**
+ * 到账确认 · 日汇总表格
+ * @param getSearchValues 页面顶部统一搜索表单的现值
+ */
+export function createDailyGridOptions(
+  getSearchValues: () => Promise<Record<string, any>>,
+): VxeGridProps<RowType> {
+  return {
+    columns: [
+      {
+        field: 'id',
+        title: 'ID',
+        width: 90,
+        formatter: ({ row }) => formatDailyRowId(row),
+      },
+      {
+        field: 'row_type_txt',
+        title: '类型',
+        width: 90,
+        formatter: ({ row }) => formatDailyRowType(row),
+      },
+      {
+        field: 'merge_id',
+        title: '合并ID',
+        width: 110,
+        formatter: ({ row }) => formatDailyMergeId(row),
+      },
+      { field: 'store_name', title: '诊所', minWidth: 160 },
+      {
+        field: 'bill_date_range_txt',
+        title: '账单日',
+        width: 180,
+        formatter: ({ row }) => formatDailyBillDate(row, false),
+      },
+      { field: 'order_count', title: '订单数', width: 90 },
+      { field: 'order_amount', title: '订单合计', width: 110 },
+      { field: 'platform_amount', title: '应付款', width: 110 },
+      {
+        field: 'status',
+        title: '状态',
+        width: 160,
+        slots: { default: 'status' },
+      },
+      {
+        field: 'vouchers',
+        title: '付款凭证',
+        width: 150,
+        slots: { default: 'vouchers' },
+      },
+      {
+        field: 'arrival_vouchers',
+        title: '到账凭证',
+        width: 150,
+        slots: { default: 'arrival_vouchers' },
+      },
+      { field: 'upload_admin_name', title: '上传人', width: 100 },
+      { field: 'confirm_admin_name', title: '确认人', width: 100 },
+      { field: 'created_at', title: '生成时间', minWidth: 160 },
+      {
+        title: '操作',
+        align: 'right',
+        slots: { default: 'action' },
+        width: 220,
+        fixed: 'right',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {},
+    columnConfig: { useKey: true },
+    rowConfig: { useKey: true, keyField: 'row_uid' },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const formValues = await getSearchValues();
+          return await getPublicAccountDailyBillList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
       },
     },
-    { field: 'store_name', title: '诊所', minWidth: 160 },
-    {
-      field: 'bill_date_range_txt',
-      title: '账单日',
-      width: 180,
-      formatter: ({ row }) =>
-        row.bill_date_range_txt || row.bill_date_txt || row.bill_date || '—',
+    height: 'auto',
+    border: false,
+    toolbarConfig: {
+      // @ts-expect-error
+      search: false,
+      refresh: true,
+      print: false,
+      export: false,
+      zoom: true,
+      slots: { buttons: 'toolbar-actions' },
     },
-    { field: 'order_count', title: '订单数', width: 90 },
-    { field: 'order_amount', title: '订单合计', width: 110 },
-    { field: 'platform_amount', title: '应付款', width: 110 },
-    { field: 'status', title: '状态', width: 160, slots: { default: 'status' } },
-    { field: 'vouchers', title: '付款凭证', width: 150, slots: { default: 'vouchers' } },
-    { field: 'arrival_vouchers', title: '到账凭证', width: 150, slots: { default: 'arrival_vouchers' } },
-    { field: 'upload_admin_name', title: '上传人', width: 100 },
-    { field: 'confirm_admin_name', title: '确认人', width: 100 },
-    { field: 'created_at', title: '生成时间', minWidth: 160 },
-    {
-      title: '操作',
-      align: 'right',
-      slots: { default: 'action' },
-      width: 220,
-      fixed: 'right',
-    },
-  ],
-  keepSource: true,
-  pagerConfig: {},
-  columnConfig: {
-    useKey: true,
-  },
-  rowConfig: {
-    useKey: true,
-    keyField: 'row_uid',
-  },
-  proxyConfig: {
-    ajax: {
-      query: async () => ({ items: [], total: 0 }),
-    },
-  },
-  height: 'auto',
-  border: false,
-  toolbarConfig: {
-    search: true,
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-  },
-  showOverflow: false,
-};
+    showOverflow: false,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/public-account-confirm/config/table.ts b/apps/web-antd/src/views/finance/public-account-confirm/config/table.ts
index 76ec12da..e611b942 100644
--- a/apps/web-antd/src/views/finance/public-account-confirm/config/table.ts
+++ b/apps/web-antd/src/views/finance/public-account-confirm/config/table.ts
@@ -1,55 +1,80 @@
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { getPublicAccountPayList } from '../api';
+
 interface RowType {
   id: number;
   order_no: string;
   status: number;
 }
 
-export const gridOptions: VxeGridProps<RowType> = {
-  columns: [
-    { field: 'id', title: 'ID', width: 80 },
-    { field: 'store_name', title: '诊所', minWidth: 140 },
-    { field: 'order_no', title: '订单号', minWidth: 180 },
-    { field: 'order_amount', title: '订单金额', width: 110 },
-    { field: 'platform_amount', title: '平台份额', width: 110 },
-    { field: 'store_amount', title: '门店份额', width: 110 },
-    { field: 'paid_amount', title: '入账金额', width: 110 },
-    { field: 'split_mode_txt', title: '分账方式', width: 110 },
-    { field: 'status', title: '状态', width: 100, slots: { default: 'status' } },
-    { field: 'vouchers', title: '凭证', width: 150, slots: { default: 'vouchers' } },
-    { field: 'apply_admin_name', title: '申请人', width: 100 },
-    { field: 'confirm_admin_name', title: '确认人', width: 100 },
-    { field: 'created_at', title: '申请时间', minWidth: 160 },
-    {
-      title: '操作',
-      align: 'right',
-      slots: { default: 'action' },
-      width: 160,
-      fixed: 'right',
+/**
+ * 到账确认 · 订单明细表格
+ * @param getSearchValues 页面顶部统一搜索表单的现值
+ */
+export function createGridOptions(
+  getSearchValues: () => Promise<Record<string, any>>,
+): VxeGridProps<RowType> {
+  return {
+    columns: [
+      { field: 'id', title: 'ID', width: 80 },
+      { field: 'store_name', title: '诊所', minWidth: 140 },
+      { field: 'order_no', title: '订单号', minWidth: 180 },
+      { field: 'order_amount', title: '订单金额', width: 110 },
+      { field: 'platform_amount', title: '平台份额', width: 110 },
+      { field: 'store_amount', title: '门店份额', width: 110 },
+      { field: 'paid_amount', title: '入账金额', width: 110 },
+      { field: 'split_mode_txt', title: '分账方式', width: 110 },
+      {
+        field: 'status',
+        title: '状态',
+        width: 100,
+        slots: { default: 'status' },
+      },
+      {
+        field: 'vouchers',
+        title: '凭证',
+        width: 150,
+        slots: { default: 'vouchers' },
+      },
+      { field: 'apply_admin_name', title: '申请人', width: 100 },
+      { field: 'confirm_admin_name', title: '确认人', width: 100 },
+      { field: 'created_at', title: '申请时间', minWidth: 160 },
+      {
+        title: '操作',
+        align: 'right',
+        slots: { default: 'action' },
+        width: 160,
+        fixed: 'right',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {},
+    columnConfig: { useKey: true },
+    rowConfig: { useKey: true },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const formValues = await getSearchValues();
+          return await getPublicAccountPayList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
     },
-  ],
-  keepSource: true,
-  pagerConfig: {},
-  columnConfig: {
-    useKey: true,
-  },
-  rowConfig: {
-    useKey: true,
-  },
-  proxyConfig: {
-    ajax: {
-      query: async () => ({ items: [], total: 0 }),
+    height: 'auto',
+    border: false,
+    toolbarConfig: {
+      // @ts-expect-error
+      search: false,
+      refresh: true,
+      print: false,
+      export: false,
+      zoom: true,
+      slots: { buttons: 'toolbar-actions' },
     },
-  },
-  height: 'auto',
-  border: false,
-  toolbarConfig: {
-    search: true,
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-  },
-  showOverflow: false,
-};
+    showOverflow: false,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/public-account-confirm/index.vue b/apps/web-antd/src/views/finance/public-account-confirm/index.vue
index a93fb0bb..b318117a 100644
--- a/apps/web-antd/src/views/finance/public-account-confirm/index.vue
+++ b/apps/web-antd/src/views/finance/public-account-confirm/index.vue
@@ -2,20 +2,27 @@
 /**
  * 财务中心 · 公账到账确认（超管/系统管理员）
  * 按天：确认已传凭证的日汇总；按订单：确认待到账单
+ * 顶部统一搜索 + 列表/卡片双视图；hint 用 GlassCard tone=warning
  */
-import { nextTick, onMounted, ref, watch } from 'vue';
+import type { ActionItem } from '#/components/table-action';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Tag, message } from 'ant-design-vue';
+import { message, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { GlassCard } from '#/components/glass-card';
 import { TableAction } from '#/components/table-action';
-
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import { useDualViewSearch } from '#/composables/use-dual-view-search';
 import ConfirmModal from '#/views/finance/public-account-pay/components/confirm-modal.vue';
 import DailyConfirmModal from '#/views/finance/public-account-pay/components/daily-confirm-modal.vue';
 import MergeOrdersModal from '#/views/finance/public-account-pay/components/merge-orders-modal.vue';
+import PublicAccountDailyCardList from '#/views/finance/public-account-pay/components/PublicAccountDailyCardList.vue';
+import PublicAccountOrderCardList from '#/views/finance/public-account-pay/components/PublicAccountOrderCardList.vue';
 import VoucherThumbs from '#/views/finance/public-account-pay/components/voucher-thumbs.vue';
 import {
   publicAccountDailyStatusMeta,
@@ -24,30 +31,66 @@ import {
 
 import {
   getPublicAccountDailyBillInfo,
-  getPublicAccountDailyBillList,
   getPublicAccountPayConfig,
   getPublicAccountPayInfo,
-  getPublicAccountPayList,
 } from './api';
 import { dailyFormOptions } from './config/daily-search';
-import { dailyGridOptions } from './config/daily-table';
+import { createDailyGridOptions } from './config/daily-table';
 import { formOptions } from './config/search';
-import { gridOptions } from './config/table';
+import { createGridOptions } from './config/table';
 
 defineOptions({ name: 'FinancePublicAccountConfirm' });
 
 const route = useRoute();
-const billMode = ref<'order' | 'daily'>('order');
-const unlockMode = ref<'voucher' | 'confirm'>('confirm');
+const billMode = ref<'daily' | 'order'>('order');
+const unlockMode = ref<'confirm' | 'voucher'>('confirm');
 const canConfirm = ref(false);
 
-const [Grid, gridApi] = useVbenVxeGrid({
+/** 列表/卡片双视图偏好 */
+const viewMode = useViewMode('public-account-confirm-view-mode');
+const orderCardRef = ref<InstanceType<
+  typeof PublicAccountOrderCardList
+> | null>(null);
+const dailyCardRef = ref<InstanceType<
+  typeof PublicAccountDailyCardList
+> | null>(null);
+
+/** 凭证解锁时只展示提示，不拉列表 */
+const showVoucherHint = computed(
+  () => billMode.value === 'daily' && unlockMode.value === 'voucher',
+);
+
+const {
+  SearchForm: OrderSearchForm,
+  searchValues: orderSearchValues,
+  readLiveSearchValues: readOrderSearchValues,
+} = useDualViewSearch({
   formOptions,
-  gridOptions,
+  viewMode,
+  onListSearch: () => {
+     
+    gridApi.reload();
+  },
+});
+
+const {
+  SearchForm: DailySearchForm,
+  searchValues: dailySearchValues,
+  readLiveSearchValues: readDailySearchValues,
+} = useDualViewSearch({
+  formOptions: dailyFormOptions,
+  viewMode,
+  onListSearch: () => {
+     
+    dailyGridApi.reload();
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: createGridOptions(() => readOrderSearchValues()),
 });
 const [DailyGrid, dailyGridApi] = useVbenVxeGrid({
-  formOptions: dailyFormOptions,
-  gridOptions: dailyGridOptions,
+  gridOptions: createDailyGridOptions(() => readDailySearchValues()),
 });
 
 const [ConfirmPayModal, confirmPayModalApi] = useVbenModal({
@@ -60,13 +103,38 @@ const [MergeOrdersPayModal, mergeOrdersModalApi] = useVbenModal({
   connectedComponent: MergeOrdersModal,
 });
 
+function makeGridProxy(kind: 'daily' | 'order') {
+  return {
+    reload: () => {
+      if (viewMode.value === 'list') {
+        if (kind === 'daily') dailyGridApi.reload();
+        else gridApi.reload();
+      } else if (kind === 'daily') {
+        dailyCardRef.value?.reload?.();
+      } else {
+        orderCardRef.value?.reload?.();
+      }
+    },
+    query: () => {
+      if (viewMode.value === 'list') {
+        if (kind === 'daily') dailyGridApi.query();
+        else gridApi.query();
+      } else if (kind === 'daily') {
+        dailyCardRef.value?.refreshKeepPage?.();
+      } else {
+        orderCardRef.value?.refreshKeepPage?.();
+      }
+    },
+  };
+}
+
 /** 按订单确认到账 */
 function openConfirm(row: Record<string, any>) {
   confirmPayModalApi.setData({
     id: row.id,
     order_id: row.order_id,
     order_no: row.order_no,
-    gridApi,
+    gridApi: makeGridProxy('order'),
   });
   confirmPayModalApi.open();
 }
@@ -84,7 +152,7 @@ function openDailyConfirm(row: Record<string, any>) {
     platform_amount: row.platform_amount,
     bill_date_range_txt: row.bill_date_range_txt || row.bill_date_txt,
     store_name: row.store_name,
-    gridApi: dailyGridApi,
+    gridApi: makeGridProxy('daily'),
   });
   dailyConfirmModalApi.open();
 }
@@ -125,37 +193,6 @@ function tryOpenFromQuery() {
     .catch(() => {});
 }
 
-const initTableAjax = () => {
-  gridApi.setGridOptions({
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getPublicAccountPayList({
-            page: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-  });
-  dailyGridApi.setGridOptions({
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getPublicAccountDailyBillList({
-            page: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-  });
-};
-
-initTableAjax();
-
 /** 表格按父级高度重算，避免 auto-content-height 下缩成一行 */
 function resizeGrid() {
   nextTick(() => {
@@ -166,11 +203,50 @@ function resizeGrid() {
   });
 }
 
+function buildOrderRowActions(row: Record<string, any>): ActionItem[] {
+  return [
+    {
+      label: '确认到账',
+      type: 'link',
+      ifShow: canConfirm.value && row.status === 0,
+      onClick: () => openConfirm(row),
+    },
+  ];
+}
+
+function buildDailyRowActions(row: Record<string, any>): ActionItem[] {
+  return [
+    {
+      label: '确认到账',
+      type: 'link',
+      ifShow: canConfirm.value && row.status === 3,
+      onClick: () => openDailyConfirm(row),
+    },
+    {
+      label: '查看合并',
+      type: 'link',
+      ifShow: Number(row.merge_id || 0) > 0,
+      onClick: () => openMergeDetail(Number(row.merge_id)),
+    },
+  ];
+}
+
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card' && !showVoucherHint.value) {
+    if (billMode.value === 'daily') {
+      dailyGridApi.query();
+    } else {
+      gridApi.query();
+    }
+  }
+});
+
 onMounted(async () => {
   const cfg = await getPublicAccountPayConfig().catch(() => null);
   billMode.value = cfg?.bill_mode === 'daily' ? 'daily' : 'order';
   unlockMode.value = cfg?.unlock_mode === 'voucher' ? 'voucher' : 'confirm';
-  canConfirm.value = Number(cfg?.can_confirm) === 1 || cfg?.can_confirm === true;
+  canConfirm.value =
+    Number(cfg?.can_confirm) === 1 || cfg?.can_confirm === true;
   resizeGrid();
   tryOpenFromQuery();
 });
@@ -187,69 +263,79 @@ watch(
       <ConfirmPayModal />
       <DailyConfirmPayModal />
       <MergeOrdersPayModal />
-      <div
-        v-if="billMode === 'daily' && unlockMode === 'voucher'"
-        class="hint-card"
+      <!-- 凭证即解锁：无需确认，用 warning 微光提示 -->
+      <GlassCard
+        v-if="showVoucherHint"
+        tone="warning"
+        icon="lucide:info"
+        title="无需确认到账"
+        padding="md"
       >
         当前解锁条件为「上传凭证即解锁」，无需在本页确认到账。
-      </div>
-      <DailyGrid v-else-if="billMode === 'daily'">
-        <template #status="{ row }">
-          <Tag :color="publicAccountDailyStatusMeta(row.status).color">
-            {{
-              row.status_txt || publicAccountDailyStatusMeta(row.status).label
-            }}
-          </Tag>
-        </template>
-        <template #vouchers="{ row }">
-          <VoucherThumbs :items="row.vouchers" />
-        </template>
-        <template #arrival_vouchers="{ row }">
-          <VoucherThumbs :items="row.arrival_vouchers" />
-        </template>
-        <template #action="{ row }">
-          <TableAction
-            :actions="[
-              {
-                label: '确认到账',
-                type: 'link',
-                ifShow: canConfirm && row.status === 3,
-                onClick: openDailyConfirm.bind(null, row),
-              },
-              {
-                label: '查看合并',
-                type: 'link',
-                ifShow: Number(row.merge_id || 0) > 0,
-                onClick: openMergeDetail.bind(null, Number(row.merge_id)),
-              },
-            ]"
+      </GlassCard>
+      <template v-else>
+        <div
+          class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+        >
+          <DailySearchForm v-if="billMode === 'daily'" />
+          <OrderSearchForm v-else />
+        </div>
+        <div class="mb-3 shrink-0">
+          <ViewModeSwitch v-model="viewMode" />
+        </div>
+        <template v-if="billMode === 'daily'">
+          <DailyGrid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
+            <template #status="{ row }">
+              <Tag :color="publicAccountDailyStatusMeta(row.status).color">
+                {{
+                  row.status_txt ||
+                  publicAccountDailyStatusMeta(row.status).label
+                }}
+              </Tag>
+            </template>
+            <template #vouchers="{ row }">
+              <VoucherThumbs :items="row.vouchers" />
+            </template>
+            <template #arrival_vouchers="{ row }">
+              <VoucherThumbs :items="row.arrival_vouchers" />
+            </template>
+            <template #action="{ row }">
+              <TableAction :actions="buildDailyRowActions(row)" />
+            </template>
+          </DailyGrid>
+          <PublicAccountDailyCardList
+            v-else
+            ref="dailyCardRef"
+            class="h-0 min-h-0 flex-1 overflow-auto"
+            :form-values="dailySearchValues"
+            :build-row-actions="buildDailyRowActions"
           />
         </template>
-      </DailyGrid>
-      <Grid v-else>
-        <template #status="{ row }">
-          <Tag :color="publicAccountPayStatusMeta(row.status).color">
-            {{
-              row.status_txt || publicAccountPayStatusMeta(row.status).label
-            }}
-          </Tag>
-        </template>
-        <template #vouchers="{ row }">
-          <VoucherThumbs :items="row.vouchers" />
-        </template>
-        <template #action="{ row }">
-          <TableAction
-            :actions="[
-              {
-                label: '确认到账',
-                type: 'link',
-                ifShow: canConfirm && row.status === 0,
-                onClick: openConfirm.bind(null, row),
-              },
-            ]"
+        <template v-else>
+          <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
+            <template #status="{ row }">
+              <Tag :color="publicAccountPayStatusMeta(row.status).color">
+                {{
+                  row.status_txt || publicAccountPayStatusMeta(row.status).label
+                }}
+              </Tag>
+            </template>
+            <template #vouchers="{ row }">
+              <VoucherThumbs :items="row.vouchers" />
+            </template>
+            <template #action="{ row }">
+              <TableAction :actions="buildOrderRowActions(row)" />
+            </template>
+          </Grid>
+          <PublicAccountOrderCardList
+            v-else
+            ref="orderCardRef"
+            class="h-0 min-h-0 flex-1 overflow-auto"
+            :form-values="orderSearchValues"
+            :build-row-actions="buildOrderRowActions"
           />
         </template>
-      </Grid>
+      </template>
     </div>
   </Page>
 </template>
@@ -261,19 +347,13 @@ watch(
   height: 100%;
   min-height: 0;
 }
+
 .pac-page > :deep(.h-full) {
   flex: 1;
   min-height: 0;
 }
+
 .pac-page :deep(.vxe-grid) {
   height: 100% !important;
 }
-.hint-card {
-  padding: 16px 18px;
-  color: hsl(var(--muted-foreground));
-  background: hsl(var(--card, var(--background)));
-  border: 1px solid hsl(var(--warning) / 30%);
-  border-radius: 10px;
-  box-shadow: 0 0 6px hsl(var(--warning) / 18%);
-}
 </style>
diff --git a/apps/web-antd/src/views/finance/public-account-pay/api/index.ts b/apps/web-antd/src/views/finance/public-account-pay/api/index.ts
index 58930c28..81b935ed 100644
--- a/apps/web-antd/src/views/finance/public-account-pay/api/index.ts
+++ b/apps/web-antd/src/views/finance/public-account-pay/api/index.ts
@@ -14,7 +14,9 @@ export async function getPublicAccountPayInfo(id: number) {
 
 /** 预览平台/门店分账金额 */
 export async function previewPublicAccountPay(orderId: number) {
-  return requestClient.get<any>(`${prefix}preview`, { params: { order_id: orderId } });
+  return requestClient.get<any>(`${prefix}preview`, {
+    params: { order_id: orderId },
+  });
 }
 
 /** 医生申请公账支付（付款凭证可选） */
@@ -28,7 +30,9 @@ export async function confirmPublicAccountPay(data: Record<string, any>) {
 }
 
 /** 待支付订单上直接确认公账到账 */
-export async function confirmPublicAccountPayByOrder(data: Record<string, any>) {
+export async function confirmPublicAccountPayByOrder(
+  data: Record<string, any>,
+) {
   return requestClient.post<any>(`${prefix}confirm-by-order`, data);
 }
 
@@ -43,7 +47,9 @@ export async function getPublicAccountPayConfig() {
 }
 
 /** 手动生成日汇总（管理员生成会站内信通知诊所） */
-export async function generatePublicAccountDailyBill(data: Record<string, any>) {
+export async function generatePublicAccountDailyBill(
+  data: Record<string, any>,
+) {
   return requestClient.post<any>(`${prefix}daily-generate`, data);
 }
 
@@ -66,8 +72,8 @@ export async function getPublicAccountDailyMergeDetail(mergeId: number) {
 
 /** 锁店页只读：日账单 + 商品订单 */
 export async function getPublicAccountDailyLockOrders(data: {
-  merge_id?: number;
   daily_id?: number;
+  merge_id?: number;
   overdue_daily_ids?: number[] | string;
 }) {
   return requestClient.get<any>(`${prefix}daily-lock-orders`, {
@@ -100,7 +106,14 @@ export async function cancelPublicAccountDailyBill(data: Record<string, any>) {
   return requestClient.post<any>(`${prefix}daily-cancel`, data);
 }
 
+/** 超管/系统管理员手动延期（必填理由） */
+export async function extendPublicAccountDailyBill(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}daily-extend`, data);
+}
+
 /** 日账单变动记录 */
-export async function getPublicAccountDailyChangeLog(data: Record<string, any>) {
+export async function getPublicAccountDailyChangeLog(
+  data: Record<string, any>,
+) {
   return requestClient.get<any>(`${prefix}daily-change-log`, { params: data });
 }
diff --git a/apps/web-antd/src/views/finance/public-account-pay/components/PublicAccountDailyCardList.vue b/apps/web-antd/src/views/finance/public-account-pay/components/PublicAccountDailyCardList.vue
new file mode 100644
index 00000000..392dfbd6
--- /dev/null
+++ b/apps/web-antd/src/views/finance/public-account-pay/components/PublicAccountDailyCardList.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+/**
+ * 公账日汇总卡片视图（账单页 / 到账确认页共用）
+ * 展示口径与列表 formatter 共用 constants，保证双视图一致
+ */
+import type { ActionItem } from '#/components/table-action';
+
+import { ref } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { GlassCard, GlassCardList } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
+
+import { getPublicAccountDailyBillList } from '../api';
+import {
+  formatDailyBillDate,
+  formatDailyMergeId,
+  formatDailyRowId,
+  formatDailyRowType,
+  publicAccountDailyStatusMeta,
+  publicAccountDailyStatusTone,
+} from '../config/constants';
+import VoucherThumbs from './voucher-thumbs.vue';
+
+defineOptions({ name: 'PublicAccountDailyCardList' });
+
+const props = defineProps<{
+  buildRowActions: (row: Record<string, any>) => ActionItem[];
+  fetcher?: (params: Record<string, any>) => Promise<any>;
+  formValues?: Record<string, any>;
+  /** 账单页需要展示截止时间，确认页可不带 */
+  withPeriodEnd?: boolean;
+}>();
+
+const listRef = ref<null | {
+  refreshKeepPage: () => Promise<void>;
+  reload: () => Promise<void>;
+}>(null);
+
+function hasVisibleAction(row: Record<string, any>) {
+  return props.buildRowActions(row).some((action) => action.ifShow !== false);
+}
+
+async function reload() {
+  await listRef.value?.reload();
+}
+
+async function refreshKeepPage() {
+  await listRef.value?.refreshKeepPage();
+}
+
+defineExpose({ reload, refreshKeepPage });
+</script>
+
+<template>
+  <GlassCardList
+    ref="listRef"
+    :fetcher="props.fetcher || getPublicAccountDailyBillList"
+    :form-values="props.formValues"
+    :min-card-width="360"
+    row-key="row_uid"
+    empty-text="暂无日汇总账单"
+  >
+    <template #card="{ row }">
+      <GlassCard
+        hoverable
+        icon="lucide:calendar-days"
+        :tone="publicAccountDailyStatusTone(Number(row.status))"
+      >
+        <template #title>
+          <span :title="row.store_name">{{ row.store_name || '-' }}</span>
+        </template>
+        <template #subtitle>
+          {{ formatDailyRowId(row) }} · {{ formatDailyRowType(row) }}
+        </template>
+        <template #extra>
+          <Tag
+            :color="publicAccountDailyStatusMeta(row.status).color"
+            class="!mr-0"
+          >
+            {{
+              row.status_txt || publicAccountDailyStatusMeta(row.status).label
+            }}
+          </Tag>
+        </template>
+        <div class="pap-daily-card__amount">
+          <i>¥</i>{{ row.platform_amount ?? '0' }}
+        </div>
+        <div class="pap-daily-card__date">
+          {{ formatDailyBillDate(row, props.withPeriodEnd !== false) }}
+        </div>
+        <dl class="pap-daily-card__kv">
+          <div class="pap-daily-card__kv-item">
+            <dt>订单数</dt>
+            <dd>{{ row.order_count ?? 0 }}</dd>
+          </div>
+          <div class="pap-daily-card__kv-item">
+            <dt>订单合计</dt>
+            <dd>¥{{ row.order_amount ?? '0' }}</dd>
+          </div>
+          <div class="pap-daily-card__kv-item">
+            <dt>合并ID</dt>
+            <dd>{{ formatDailyMergeId(row) }}</dd>
+          </div>
+          <div class="pap-daily-card__kv-item">
+            <dt>生成时间</dt>
+            <dd>{{ row.created_at || '-' }}</dd>
+          </div>
+          <div class="pap-daily-card__kv-item pap-daily-card__kv-item--full">
+            <dt>付款凭证</dt>
+            <dd><VoucherThumbs :items="row.vouchers" /></dd>
+          </div>
+          <div class="pap-daily-card__kv-item pap-daily-card__kv-item--full">
+            <dt>到账凭证</dt>
+            <dd><VoucherThumbs :items="row.arrival_vouchers" /></dd>
+          </div>
+        </dl>
+        <template v-if="hasVisibleAction(row)" #footer>
+          <CardActions :actions="props.buildRowActions(row)" :max-visible="3" />
+        </template>
+      </GlassCard>
+    </template>
+  </GlassCardList>
+</template>
+
+<style scoped>
+.pap-daily-card__amount {
+  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: hsl(var(--primary));
+}
+
+.pap-daily-card__amount i {
+  margin-right: 1px;
+  font-size: 14px;
+  font-style: normal;
+}
+
+.pap-daily-card__date {
+  margin-top: 4px;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+}
+
+.pap-daily-card__kv {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+  margin: 12px 0 0;
+}
+
+.pap-daily-card__kv-item--full {
+  grid-column: 1 / -1;
+}
+
+.pap-daily-card__kv-item dt {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.pap-daily-card__kv-item dd {
+  margin: 2px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/public-account-pay/components/PublicAccountOrderCardList.vue b/apps/web-antd/src/views/finance/public-account-pay/components/PublicAccountOrderCardList.vue
new file mode 100644
index 00000000..4ece982a
--- /dev/null
+++ b/apps/web-antd/src/views/finance/public-account-pay/components/PublicAccountOrderCardList.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+/**
+ * 公账订单明细卡片视图（账单页 / 到账确认页共用）
+ * 字段与列表列对齐；行操作由父级 buildRowActions 注入
+ */
+import type { ActionItem } from '#/components/table-action';
+
+import { ref } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { GlassCard, GlassCardList } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
+
+import { getPublicAccountPayList } from '../api';
+import {
+  publicAccountPayStatusMeta,
+  publicAccountPayStatusTone,
+} from '../config/constants';
+import VoucherThumbs from './voucher-thumbs.vue';
+
+defineOptions({ name: 'PublicAccountOrderCardList' });
+
+const props = defineProps<{
+  buildRowActions: (row: Record<string, any>) => ActionItem[];
+  /** 列表接口（确认页可换成本端 API） */
+  fetcher?: (params: Record<string, any>) => Promise<any>;
+  formValues?: Record<string, any>;
+}>();
+
+const listRef = ref<null | {
+  refreshKeepPage: () => Promise<void>;
+  reload: () => Promise<void>;
+}>(null);
+
+function hasVisibleAction(row: Record<string, any>) {
+  return props.buildRowActions(row).some((action) => action.ifShow !== false);
+}
+
+async function reload() {
+  await listRef.value?.reload();
+}
+
+async function refreshKeepPage() {
+  await listRef.value?.refreshKeepPage();
+}
+
+defineExpose({ reload, refreshKeepPage });
+</script>
+
+<template>
+  <GlassCardList
+    ref="listRef"
+    :fetcher="props.fetcher || getPublicAccountPayList"
+    :form-values="props.formValues"
+    :min-card-width="340"
+    empty-text="暂无公账订单账单"
+  >
+    <template #card="{ row }">
+      <GlassCard
+        hoverable
+        icon="lucide:landmark"
+        :tone="publicAccountPayStatusTone(Number(row.status))"
+      >
+        <template #title>
+          <span :title="row.store_name">{{ row.store_name || '-' }}</span>
+        </template>
+        <template #subtitle>
+          #{{ row.id }} · {{ row.order_no || '-' }}
+        </template>
+        <template #extra>
+          <Tag
+            :color="publicAccountPayStatusMeta(row.status).color"
+            class="!mr-0"
+          >
+            {{ row.status_txt || publicAccountPayStatusMeta(row.status).label }}
+          </Tag>
+        </template>
+        <div class="pap-order-card__amount">
+          <i>¥</i>{{ row.paid_amount ?? row.platform_amount ?? '0' }}
+        </div>
+        <dl class="pap-order-card__kv">
+          <div class="pap-order-card__kv-item">
+            <dt>订单金额</dt>
+            <dd>¥{{ row.order_amount ?? '0' }}</dd>
+          </div>
+          <div class="pap-order-card__kv-item">
+            <dt>平台份额</dt>
+            <dd>¥{{ row.platform_amount ?? '0' }}</dd>
+          </div>
+          <div class="pap-order-card__kv-item">
+            <dt>分账方式</dt>
+            <dd>{{ row.split_mode_txt || '-' }}</dd>
+          </div>
+          <div class="pap-order-card__kv-item">
+            <dt>申请时间</dt>
+            <dd>{{ row.created_at || '-' }}</dd>
+          </div>
+          <div class="pap-order-card__kv-item pap-order-card__kv-item--full">
+            <dt>凭证</dt>
+            <dd><VoucherThumbs :items="row.vouchers" /></dd>
+          </div>
+        </dl>
+        <template v-if="hasVisibleAction(row)" #footer>
+          <CardActions :actions="props.buildRowActions(row)" :max-visible="2" />
+        </template>
+      </GlassCard>
+    </template>
+  </GlassCardList>
+</template>
+
+<style scoped>
+.pap-order-card__amount {
+  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: hsl(var(--primary));
+}
+
+.pap-order-card__amount i {
+  margin-right: 1px;
+  font-size: 14px;
+  font-style: normal;
+}
+
+.pap-order-card__kv {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+  margin: 12px 0 0;
+}
+
+.pap-order-card__kv-item--full {
+  grid-column: 1 / -1;
+}
+
+.pap-order-card__kv-item dt {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.pap-order-card__kv-item dd {
+  margin: 2px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/public-account-pay/components/apply-modal.vue b/apps/web-antd/src/views/finance/public-account-pay/components/apply-modal.vue
index 987a9f95..e11d0bbc 100644
--- a/apps/web-antd/src/views/finance/public-account-pay/components/apply-modal.vue
+++ b/apps/web-antd/src/views/finance/public-account-pay/components/apply-modal.vue
@@ -9,6 +9,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { Input, message } from 'ant-design-vue';
 
 import UploadDraggerPaste from '#/components/form/components/upload-dragger-paste.vue';
+import { GlassCard } from '#/components/glass-card';
 
 import { applyPublicAccountPay } from '../api';
 
@@ -17,7 +18,7 @@ const TextArea = Input.TextArea;
 const orderId = ref(0);
 const orderNo = ref('');
 const amount = ref('');
-const billMode = ref<'order' | 'daily'>('order');
+const billMode = ref<'daily' | 'order'>('order');
 const voucherUrls = ref<string[]>([]);
 const applyRemark = ref('');
 
@@ -72,7 +73,13 @@ const [Modal, modalApi] = useVbenModal({
 <template>
   <Modal title="申请公账支付" class="w-[560px]">
     <div class="space-y-4 py-2">
-      <div class="apply-card">
+      <!-- 订单摘要：GlassCard 边框微光，不用左侧色条 -->
+      <GlassCard
+        title="订单信息"
+        icon="lucide:receipt"
+        padding="sm"
+        :specular="false"
+      >
         <div class="apply-row">
           <span>订单号</span>
           <b>{{ orderNo || '—' }}</b>
@@ -81,7 +88,7 @@ const [Modal, modalApi] = useVbenModal({
           <span>订单金额</span>
           <b>¥{{ amount || '0.00' }}</b>
         </div>
-      </div>
+      </GlassCard>
       <p class="text-sm text-muted-foreground">
         提交后等待管理员确认到账；确认前患者无法再微信/易票联支付。付款凭证可选。
       </p>
@@ -109,13 +116,6 @@ const [Modal, modalApi] = useVbenModal({
 </template>
 
 <style scoped>
-.apply-card {
-  padding: 12px 14px;
-  background: hsl(var(--muted) / 0.25);
-  border: 1px solid hsl(var(--primary) / 30%);
-  border-radius: 10px;
-  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
-}
 .apply-row {
   display: flex;
   justify-content: space-between;
@@ -123,9 +123,11 @@ const [Modal, modalApi] = useVbenModal({
   font-size: 13px;
   color: hsl(var(--muted-foreground));
 }
+
 .apply-row:last-child {
   margin-bottom: 0;
 }
+
 .apply-row b {
   color: hsl(var(--foreground));
 }
diff --git a/apps/web-antd/src/views/finance/public-account-pay/components/confirm-modal.vue b/apps/web-antd/src/views/finance/public-account-pay/components/confirm-modal.vue
index 04b814c3..a96ebf90 100644
--- a/apps/web-antd/src/views/finance/public-account-pay/components/confirm-modal.vue
+++ b/apps/web-antd/src/views/finance/public-account-pay/components/confirm-modal.vue
@@ -7,9 +7,10 @@ import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Image, Radio, RadioGroup, message } from 'ant-design-vue';
+import { Image, message, Radio, RadioGroup } from 'ant-design-vue';
 
 import UploadDraggerPaste from '#/components/form/components/upload-dragger-paste.vue';
+import { GlassCard } from '#/components/glass-card';
 
 import {
   confirmPublicAccountPay,
@@ -50,7 +51,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.close();
   },
   async onConfirm() {
-    if (!voucherUrls.value.length) {
+    if (voucherUrls.value.length === 0) {
       message.warning('请上传到账凭证');
       return;
     }
@@ -127,8 +128,16 @@ const [Modal, modalApi] = useVbenModal({
 <template>
   <Modal title="确认公账到账" class="w-[640px]">
     <div class="space-y-4 py-2">
-      <div class="amount-card">
-        <div v-if="loadingPreview" class="mb-2 text-xs text-muted-foreground">正在预览分账金额…</div>
+      <!-- 分账金额摘要：GlassCard 统一质感 -->
+      <GlassCard
+        title="分账金额"
+        icon="lucide:banknote"
+        padding="sm"
+        :specular="false"
+      >
+        <div v-if="loadingPreview" class="mb-2 text-xs text-muted-foreground">
+          正在预览分账金额…
+        </div>
         <div class="amount-row">
           <span>订单号</span>
           <b>{{ orderNo || '—' }}</b>
@@ -149,7 +158,7 @@ const [Modal, modalApi] = useVbenModal({
           <span>本次入账</span>
           <b>¥{{ paidAmount }}</b>
         </div>
-      </div>
+      </GlassCard>
       <div>
         <div class="mb-2 font-medium text-foreground">分账方式</div>
         <RadioGroup v-model:value="splitMode">
@@ -192,20 +201,13 @@ const [Modal, modalApi] = useVbenModal({
           rows="2"
           maxlength="200"
           placeholder="可选"
-        />
+        ></textarea>
       </div>
     </div>
   </Modal>
 </template>
 
 <style scoped>
-.amount-card {
-  padding: 12px 14px;
-  background: hsl(var(--muted) / 0.25);
-  border: 1px solid hsl(var(--primary) / 30%);
-  border-radius: 10px;
-  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
-}
 .amount-row {
   display: flex;
   justify-content: space-between;
@@ -213,18 +215,22 @@ const [Modal, modalApi] = useVbenModal({
   font-size: 13px;
   color: hsl(var(--muted-foreground));
 }
+
 .amount-row b {
   color: hsl(var(--foreground));
 }
+
 .amount-row--total {
   margin-top: 8px;
   margin-bottom: 0;
   font-size: 14px;
   color: hsl(var(--foreground));
 }
+
 .amount-row--total b {
   color: hsl(var(--primary));
 }
+
 .confirm-remark {
   width: 100%;
   padding: 8px 10px;
diff --git a/apps/web-antd/src/views/finance/public-account-pay/components/daily-change-log-drawer.vue b/apps/web-antd/src/views/finance/public-account-pay/components/daily-change-log-drawer.vue
index 44ff07df..dd920d6b 100644
--- a/apps/web-antd/src/views/finance/public-account-pay/components/daily-change-log-drawer.vue
+++ b/apps/web-antd/src/views/finance/public-account-pay/components/daily-change-log-drawer.vue
@@ -11,9 +11,9 @@ import { getPublicAccountDailyChangeLog } from '../api';
 defineOptions({ name: 'DailyChangeLogDrawer' });
 
 const props = defineProps<{
-  open: boolean;
   dailyBillId?: number;
   mergeId?: number;
+  open: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -40,8 +40,8 @@ async function loadLogs() {
       page_size: 50,
     });
     items.value = Array.isArray(res?.items) ? res.items : [];
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
     items.value = [];
   } finally {
     loading.value = false;
@@ -52,13 +52,37 @@ function close() {
   emit('update:open', false);
 }
 
-/** 从快照拼金额摘要 */
+/** 格式化快照里的到期时间戳 */
+function formatPeriodEnd(ts: unknown): string {
+  const n = Number(ts || 0);
+  if (n < 1) {
+    return '—';
+  }
+  const d = new Date(n * 1000);
+  if (Number.isNaN(d.getTime())) {
+    return String(ts);
+  }
+  const pad = (x: number) => String(x).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/** 从快照拼金额/延期摘要；优先展示金额变化，其次到期变化，最后 remark */
 function amountLine(row: Record<string, any>) {
   const before = row.before_snapshot?.platform_amount;
   const after = row.after_snapshot?.platform_amount;
   if (before !== undefined && after !== undefined && before !== after) {
     return `应付款 ${before} → ${after}`;
   }
+  const beforeEnd = row.before_snapshot?.period_end_at;
+  const afterEnd = row.after_snapshot?.period_end_at;
+  if (
+    beforeEnd !== undefined &&
+    afterEnd !== undefined &&
+    Number(beforeEnd) !== Number(afterEnd)
+  ) {
+    const tip = `到期 ${formatPeriodEnd(beforeEnd)} → ${formatPeriodEnd(afterEnd)}`;
+    return row.remark ? `${tip}；${row.remark}` : tip;
+  }
   return row.remark || '';
 }
 
diff --git a/apps/web-antd/src/views/finance/public-account-pay/components/daily-extend-modal.vue b/apps/web-antd/src/views/finance/public-account-pay/components/daily-extend-modal.vue
new file mode 100644
index 00000000..54f23e64
--- /dev/null
+++ b/apps/web-antd/src/views/finance/public-account-pay/components/daily-extend-modal.vue
@@ -0,0 +1,279 @@
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+/**
+ * 公账日账单手动延期弹窗
+ * 超管/系统管理员二选一：按天数延后，或直接选新到期日；必填理由写入变动日志
+ */
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { extendPublicAccountDailyBill } from '../api';
+import {
+  resolveDailyBillDateTxt,
+  resolveDailyMergeId,
+  resolveDailyStoreName,
+  resolveDailyUploadId,
+} from '../utils/daily-upload';
+
+const gridApi = ref<any>();
+const billMeta = ref({
+  id: 0,
+  merge_id: 0,
+  store_name: '',
+  bill_date_txt: '',
+  period_end_at: 0,
+  period_end_at_txt: '',
+  lock_hm: '09:00',
+});
+/** days=按天数；date=选到期日 */
+const extendMode = ref<'date' | 'days'>('days');
+const previewDays = ref(1);
+const previewDate = ref('');
+
+/** 预览新到期文案（两种模式共用） */
+const previewEndTxt = computed(() => {
+  const base = Number(billMeta.value.period_end_at || 0);
+  const hm = billMeta.value.lock_hm || '09:00';
+  if (extendMode.value === 'date') {
+    const d = String(previewDate.value || '').trim();
+    if (!d) {
+      return '请选择新的到期日';
+    }
+    return `${d} ${hm}`;
+  }
+  const days = Math.floor(Number(previewDays.value || 0));
+  if (base < 1) {
+    return '原到期时间未知，提交后以服务端计算为准';
+  }
+  if (days < 1) {
+    return billMeta.value.period_end_at_txt || '—';
+  }
+  return dayjs.unix(base).add(days, 'day').format('YYYY-MM-DD HH:mm');
+});
+
+/** 选日期时禁用「不晚于当前到期日」的日期 */
+function disablePastOrSame(current: Dayjs) {
+  const base = Number(billMeta.value.period_end_at || 0);
+  if (!current) {
+    return false;
+  }
+  if (base > 0) {
+    return (
+      current.endOf('day').unix() <= dayjs.unix(base).startOf('day').unix()
+    );
+  }
+  return current.endOf('day').isBefore(dayjs().startOf('day'));
+}
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  commonConfig: {
+    labelWidth: 90,
+  },
+  handleValuesChange(values: Record<string, any>) {
+    const mode = (values?.extend_mode || 'days') as 'date' | 'days';
+    extendMode.value = mode;
+    previewDays.value = Math.floor(Number(values?.extend_days || 0));
+    previewDate.value = String(values?.period_end_date || '');
+  },
+  schema: [
+    {
+      component: 'RadioGroup',
+      fieldName: 'extend_mode',
+      label: '延期方式',
+      rules: 'selectRequired',
+      defaultValue: 'days',
+      componentProps: {
+        options: [
+          { label: '按天数延期', value: 'days' },
+          { label: '选择到期日', value: 'date' },
+        ],
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'extend_days',
+      label: '延期天数',
+      defaultValue: 1,
+      componentProps: {
+        class: 'w-full',
+        min: 1,
+        max: 90,
+        precision: 0,
+        placeholder: '1～90',
+      },
+      help: '相对当前到期时刻延后，最多 90 天',
+      dependencies: {
+        show: (values: Record<string, any>) => values.extend_mode === 'days',
+        triggerFields: ['extend_mode'],
+        rules: (values: Record<string, any>) =>
+          values.extend_mode === 'days' ? 'required' : null,
+      },
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'period_end_date',
+      label: '新到期日',
+      componentProps: {
+        class: 'w-full',
+        allowClear: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD',
+        disabledDate: disablePastOrSame,
+      },
+      help: '到期时刻沿用系统锁店时点（如 09:00）',
+      dependencies: {
+        show: (values: Record<string, any>) => values.extend_mode === 'date',
+        triggerFields: ['extend_mode'],
+        rules: (values: Record<string, any>) =>
+          values.extend_mode === 'date' ? 'required' : null,
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'reason',
+      label: '延期理由',
+      rules: 'required',
+      componentProps: {
+        rows: 3,
+        maxlength: 500,
+        showCount: true,
+        placeholder: '必填，将写入变动记录便于审计',
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    const e = await formApi.validate();
+    if (!e.valid) return;
+    const values = await formApi.getValues();
+    const mode = (values.extend_mode || 'days') as 'date' | 'days';
+    const reason = String(values.reason || '').trim();
+    if (!reason) {
+      message.warning('请填写延期理由');
+      return;
+    }
+    const payload: Record<string, any> = {
+      extend_mode: mode,
+      reason,
+    };
+    if (mode === 'days') {
+      const days = Math.floor(Number(values.extend_days || 0));
+      if (days < 1 || days > 90) {
+        message.warning('延期天数须为 1～90');
+        return;
+      }
+      payload.extend_days = days;
+    } else {
+      const date = String(values.period_end_date || '').trim();
+      if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+        message.warning('请选择新的到期日');
+        return;
+      }
+      payload.period_end_date = date;
+    }
+    if (billMeta.value.merge_id > 0) {
+      payload.merge_id = billMeta.value.merge_id;
+    }
+    if (billMeta.value.id > 0) {
+      payload.id = billMeta.value.id;
+    }
+    modalApi.lock();
+    modalApi.setState({ confirmLoading: true });
+    try {
+      const res = await extendPublicAccountDailyBill(payload);
+      message.success(
+        res?.period_end_at_txt
+          ? `已延期，新到期：${res.period_end_at_txt}`
+          : '已延期',
+      );
+      if (gridApi.value?.reload) {
+        gridApi.value.reload();
+      } else {
+        gridApi.value?.query?.();
+      }
+      modalApi.close();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      modalApi.unlock();
+      modalApi.setState({ confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<Record<string, any>>() || {};
+    gridApi.value = data.gridApi;
+    const id = resolveDailyUploadId(data);
+    const mergeId = resolveDailyMergeId(data);
+    const periodEndAt = Number(data.period_end_at || 0);
+    // 优先用系统 lock_time；否则从到期文案里抠 HH:mm
+    let lockHm = String(data.lock_time || '').trim();
+    const endTxt = String(data.period_end_at_txt || '');
+    if (!/^\d{2}:\d{2}$/.test(lockHm)) {
+      const hmMatch = endTxt.match(/(\d{2}:\d{2})\s*$/);
+      lockHm = hmMatch ? hmMatch[1] : '09:00';
+    }
+    billMeta.value = {
+      id,
+      merge_id: mergeId,
+      store_name: resolveDailyStoreName(data),
+      bill_date_txt: resolveDailyBillDateTxt(data),
+      period_end_at: periodEndAt,
+      period_end_at_txt: String(
+        endTxt ||
+          (periodEndAt > 0
+            ? dayjs.unix(periodEndAt).format('YYYY-MM-DD HH:mm')
+            : ''),
+      ),
+      lock_hm: lockHm,
+    };
+    extendMode.value = 'days';
+    previewDays.value = 1;
+    previewDate.value = '';
+    // 选日期默认：当前到期日的次日
+    const defaultDate =
+      periodEndAt > 0
+        ? dayjs.unix(periodEndAt).add(1, 'day').format('YYYY-MM-DD')
+        : dayjs().add(1, 'day').format('YYYY-MM-DD');
+    await formApi.resetForm?.();
+    await formApi.setValues({
+      extend_mode: 'days',
+      extend_days: 1,
+      period_end_date: defaultDate,
+      reason: '',
+    });
+  },
+});
+</script>
+
+<template>
+  <Modal title="手动延期" class="w-[520px]">
+    <div class="extend-meta mb-3 text-sm text-[hsl(var(--muted-foreground))]">
+      <div v-if="billMeta.store_name">诊所：{{ billMeta.store_name }}</div>
+      <div v-if="billMeta.bill_date_txt">
+        账单区间：{{ billMeta.bill_date_txt }}
+      </div>
+      <div>当前到期：{{ billMeta.period_end_at_txt || '—' }}</div>
+      <div class="mt-1 text-[hsl(var(--foreground))]">
+        延期后到期：{{ previewEndTxt }}
+      </div>
+    </div>
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/finance/public-account-pay/config/constants.ts b/apps/web-antd/src/views/finance/public-account-pay/config/constants.ts
index 8c63abb4..dbb93c35 100644
--- a/apps/web-antd/src/views/finance/public-account-pay/config/constants.ts
+++ b/apps/web-antd/src/views/finance/public-account-pay/config/constants.ts
@@ -18,6 +18,13 @@ export function publicAccountPayStatusMeta(status: number) {
   return { label: '待到账', color: 'orange' };
 }
 
+/** 订单账单状态 → GlassCard tone（与 Tag 同色系） */
+export function publicAccountPayStatusTone(status: number) {
+  if (status === 1) return 'success';
+  if (status === 2) return 'destructive';
+  return 'warning';
+}
+
 export const PUBLIC_ACCOUNT_DAILY_STATUS_OPTIONS = [
   { label: '未付', value: 0 },
   { label: '已确认到账', value: 1 },
@@ -33,3 +40,60 @@ export function publicAccountDailyStatusMeta(status: number) {
   if (status === 4) return { label: '已并入账单', color: 'purple' };
   return { label: '未付', color: 'orange' };
 }
+
+/** 日汇总状态 → GlassCard tone */
+export function publicAccountDailyStatusTone(status: number) {
+  if (status === 1) return 'success';
+  if (status === 2) return 'destructive';
+  if (status === 3) return 'primary';
+  if (status === 4) return 'primary';
+  return 'warning';
+}
+
+/*
+ * ---- 日汇总行展示格式化（列表列 formatter 与卡片视图共用，保证双视图口径一致） ----
+ * 周期账单行的 id 常为 0，业务主键在 merge_id，所以 ID/合并ID 需要按 is_period 区分展示
+ */
+
+/** 是否周期账单行（多日合并） */
+export function isDailyPeriodRow(row: Record<string, any>) {
+  return Number(row?.is_period || 0) === 1;
+}
+
+/** ID 列：周期行显示「合#合并ID」，日账单显示自身 id */
+export function formatDailyRowId(row: Record<string, any>) {
+  return isDailyPeriodRow(row)
+    ? `合#${row.merge_id || '—'}`
+    : String(row.id || '—');
+}
+
+/** 类型列：周期账单 / 日账单 */
+export function formatDailyRowType(row: Record<string, any>) {
+  return isDailyPeriodRow(row) ? '周期账单' : '日账单';
+}
+
+/** 合并ID 列：未合并「—」；周期行显示自身合并ID；被并入的日账单显示所属周期 */
+export function formatDailyMergeId(row: Record<string, any>) {
+  const mid = Number(row?.merge_id || 0);
+  if (mid < 1) {
+    return '—';
+  }
+  if (isDailyPeriodRow(row)) {
+    return String(mid);
+  }
+  return row.merge_parent_txt || `周期#${mid}`;
+}
+
+/**
+ * 账单日列
+ * @param withPeriodEnd 是否追加「（截止 xxx）」：账单页需要提示到期时间，确认页只看日期范围
+ */
+export function formatDailyBillDate(
+  row: Record<string, any>,
+  withPeriodEnd = false,
+) {
+  const range =
+    row?.bill_date_range_txt || row?.bill_date_txt || row?.bill_date || '—';
+  const endTxt = withPeriodEnd ? row?.period_end_at_txt : '';
+  return endTxt ? `${range}（截止 ${endTxt}）` : range;
+}
diff --git a/apps/web-antd/src/views/finance/public-account-pay/config/daily-table.ts b/apps/web-antd/src/views/finance/public-account-pay/config/daily-table.ts
index 715cee8d..0018320d 100644
--- a/apps/web-antd/src/views/finance/public-account-pay/config/daily-table.ts
+++ b/apps/web-antd/src/views/finance/public-account-pay/config/daily-table.ts
@@ -1,95 +1,113 @@
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { getPublicAccountDailyBillList } from '../api';
+import {
+  formatDailyBillDate,
+  formatDailyMergeId,
+  formatDailyRowId,
+  formatDailyRowType,
+} from './constants';
+
 interface RowType {
   id: number;
   bill_date: number;
   status: number;
 }
 
-export const dailyGridOptions: VxeGridProps<RowType> = {
-  columns: [
-    { type: 'expand', width: 50, slots: { content: 'expand' } },
-    { field: 'id', title: 'ID', width: 90, formatter: ({ row }) =>
-        Number(row.is_period || 0) === 1
-          ? `合#${row.merge_id || '—'}`
-          : String(row.id || '—'),
-    },
-    {
-      field: 'row_type_txt',
-      title: '类型',
-      width: 90,
-      formatter: ({ row }) =>
-        Number(row.is_period || 0) === 1 ? '周期账单' : '日账单',
-    },
-    {
-      field: 'merge_id',
-      title: '合并ID',
-      width: 100,
-      formatter: ({ row }) => {
-        const mid = Number(row.merge_id || 0);
-        if (mid < 1) {
-          return '—';
-        }
-        if (Number(row.is_period || 0) === 1) {
-          return String(mid);
-        }
-        return row.merge_parent_txt || `周期#${mid}`;
+/**
+ * 公账日汇总表格
+ * @param getSearchValues 页面顶部统一搜索表单的现值
+ */
+export function createDailyGridOptions(
+  getSearchValues: () => Promise<Record<string, any>>,
+): VxeGridProps<RowType> {
+  return {
+    columns: [
+      { type: 'expand', width: 50, slots: { content: 'expand' } },
+      {
+        field: 'id',
+        title: 'ID',
+        width: 90,
+        formatter: ({ row }) => formatDailyRowId(row),
+      },
+      {
+        field: 'row_type_txt',
+        title: '类型',
+        width: 90,
+        formatter: ({ row }) => formatDailyRowType(row),
+      },
+      {
+        field: 'merge_id',
+        title: '合并ID',
+        width: 100,
+        formatter: ({ row }) => formatDailyMergeId(row),
+      },
+      { field: 'store_name', title: '诊所', minWidth: 140 },
+      {
+        field: 'bill_date_range_txt',
+        title: '账单日',
+        width: 220,
+        formatter: ({ row }) => formatDailyBillDate(row, true),
+      },
+      { field: 'order_count', title: '订单数', width: 90 },
+      { field: 'order_amount', title: '订单合计', width: 110 },
+      { field: 'platform_amount', title: '应付款', width: 110 },
+      {
+        field: 'status',
+        title: '状态',
+        width: 160,
+        slots: { default: 'status' },
+      },
+      {
+        field: 'vouchers',
+        title: '付款凭证',
+        width: 150,
+        slots: { default: 'vouchers' },
+      },
+      {
+        field: 'arrival_vouchers',
+        title: '到账凭证',
+        width: 150,
+        slots: { default: 'arrival_vouchers' },
+      },
+      { field: 'upload_admin_name', title: '上传人', width: 100 },
+      { field: 'confirm_admin_name', title: '确认人', width: 100 },
+      { field: 'created_at', title: '生成时间', minWidth: 160 },
+      {
+        title: '操作',
+        align: 'right',
+        slots: { default: 'action' },
+        width: 360,
+        fixed: 'right',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {},
+    columnConfig: { useKey: true },
+    rowConfig: { useKey: true, keyField: 'row_uid' },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const formValues = await getSearchValues();
+          return await getPublicAccountDailyBillList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
       },
     },
-    { field: 'store_name', title: '诊所', minWidth: 140 },
-    {
-      field: 'bill_date_range_txt',
-      title: '账单日',
-      width: 220,
-      formatter: ({ row }) => {
-        const range =
-          row.bill_date_range_txt || row.bill_date_txt || row.bill_date || '—';
-        const endTxt = row.period_end_at_txt;
-        return endTxt ? `${range}（截止 ${endTxt}）` : range;
-      },
+    height: 'auto',
+    border: false,
+    toolbarConfig: {
+      // @ts-expect-error
+      search: false,
+      refresh: true,
+      print: false,
+      export: false,
+      zoom: true,
+      slots: { buttons: 'toolbar-actions' },
     },
-    { field: 'order_count', title: '订单数', width: 90 },
-    { field: 'order_amount', title: '订单合计', width: 110 },
-    { field: 'platform_amount', title: '应付款', width: 110 },
-    { field: 'status', title: '状态', width: 160, slots: { default: 'status' } },
-    { field: 'vouchers', title: '付款凭证', width: 150, slots: { default: 'vouchers' } },
-    { field: 'arrival_vouchers', title: '到账凭证', width: 150, slots: { default: 'arrival_vouchers' } },
-    { field: 'upload_admin_name', title: '上传人', width: 100 },
-    { field: 'confirm_admin_name', title: '确认人', width: 100 },
-    { field: 'created_at', title: '生成时间', minWidth: 160 },
-    {
-      title: '操作',
-      align: 'right',
-      slots: { default: 'action' },
-      width: 280,
-      fixed: 'right',
-    },
-  ],
-  keepSource: true,
-  pagerConfig: {},
-  columnConfig: {
-    useKey: true,
-  },
-  rowConfig: {
-    useKey: true,
-    keyField: 'row_uid',
-  },
-  proxyConfig: {
-    ajax: {
-      query: async () => ({ items: [], total: 0 }),
-    },
-  },
-  height: 'auto',
-  border: false,
-  toolbarConfig: {
-    search: true,
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    slots: {
-      buttons: 'toolbar-actions',
-    },
-  },
-  showOverflow: false,
-};
+    showOverflow: false,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/public-account-pay/config/table.ts b/apps/web-antd/src/views/finance/public-account-pay/config/table.ts
index d5eeb4bc..b50735e8 100644
--- a/apps/web-antd/src/views/finance/public-account-pay/config/table.ts
+++ b/apps/web-antd/src/views/finance/public-account-pay/config/table.ts
@@ -1,58 +1,80 @@
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { getPublicAccountPayList } from '../api';
+
 interface RowType {
   id: number;
   order_no: string;
   status: number;
 }
 
-export const gridOptions: VxeGridProps<RowType> = {
-  columns: [
-    { field: 'id', title: 'ID', width: 80 },
-    { field: 'store_name', title: '诊所', minWidth: 140 },
-    { field: 'order_no', title: '订单号', minWidth: 180 },
-    { field: 'order_amount', title: '订单金额', width: 110 },
-    { field: 'platform_amount', title: '平台份额', width: 110 },
-    { field: 'store_amount', title: '门店份额', width: 110 },
-    { field: 'paid_amount', title: '入账金额', width: 110 },
-    { field: 'split_mode_txt', title: '分账方式', width: 110 },
-    { field: 'status', title: '状态', width: 100, slots: { default: 'status' } },
-    { field: 'vouchers', title: '凭证', width: 150, slots: { default: 'vouchers' } },
-    { field: 'apply_admin_name', title: '申请人', width: 100 },
-    { field: 'confirm_admin_name', title: '确认人', width: 100 },
-    { field: 'created_at', title: '申请时间', minWidth: 160 },
-    {
-      title: '操作',
-      align: 'right',
-      slots: { default: 'action' },
-      width: 200,
-      fixed: 'right',
+/**
+ * 公账订单明细表格
+ * @param getSearchValues 页面顶部统一搜索表单的现值
+ */
+export function createGridOptions(
+  getSearchValues: () => Promise<Record<string, any>>,
+): VxeGridProps<RowType> {
+  return {
+    columns: [
+      { field: 'id', title: 'ID', width: 80 },
+      { field: 'store_name', title: '诊所', minWidth: 140 },
+      { field: 'order_no', title: '订单号', minWidth: 180 },
+      { field: 'order_amount', title: '订单金额', width: 110 },
+      { field: 'platform_amount', title: '平台份额', width: 110 },
+      { field: 'store_amount', title: '门店份额', width: 110 },
+      { field: 'paid_amount', title: '入账金额', width: 110 },
+      { field: 'split_mode_txt', title: '分账方式', width: 110 },
+      {
+        field: 'status',
+        title: '状态',
+        width: 100,
+        slots: { default: 'status' },
+      },
+      {
+        field: 'vouchers',
+        title: '凭证',
+        width: 150,
+        slots: { default: 'vouchers' },
+      },
+      { field: 'apply_admin_name', title: '申请人', width: 100 },
+      { field: 'confirm_admin_name', title: '确认人', width: 100 },
+      { field: 'created_at', title: '申请时间', minWidth: 160 },
+      {
+        title: '操作',
+        align: 'right',
+        slots: { default: 'action' },
+        width: 200,
+        fixed: 'right',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {},
+    columnConfig: { useKey: true },
+    rowConfig: { useKey: true },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const formValues = await getSearchValues();
+          return await getPublicAccountPayList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
     },
-  ],
-  keepSource: true,
-  pagerConfig: {},
-  columnConfig: {
-    useKey: true,
-  },
-  rowConfig: {
-    useKey: true,
-  },
-  proxyConfig: {
-    ajax: {
-      query: async () => ({ items: [], total: 0 }),
+    height: 'auto',
+    border: false,
+    toolbarConfig: {
+      // @ts-expect-error
+      search: false,
+      refresh: true,
+      print: false,
+      export: false,
+      zoom: true,
+      slots: { buttons: 'toolbar-actions' },
     },
-  },
-  height: 'auto',
-  border: false,
-  toolbarConfig: {
-    search: true,
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    slots: {
-      buttons: 'toolbar-actions',
-    },
-  },
-  showOverflow: false,
-};
+    showOverflow: false,
+  };
+}
diff --git a/apps/web-antd/src/views/finance/public-account-pay/index.vue b/apps/web-antd/src/views/finance/public-account-pay/index.vue
index 33d59a85..fe3fec67 100644
--- a/apps/web-antd/src/views/finance/public-account-pay/index.vue
+++ b/apps/web-antd/src/views/finance/public-account-pay/index.vue
@@ -2,7 +2,10 @@
 /**
  * 财务中心 · 公账支付账单
  * 按订单：查看/取消；按天：上传凭证、生成日账单。到账确认在「公账到账确认」页
+ * 支持列表/卡片双视图：日汇总与订单明细各自一套搜索表单抽到顶部共用
  */
+import type { ActionItem } from '#/components/table-action';
+
 import { nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -11,30 +14,34 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { Image, message, Tabs, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { GlassCard } from '#/components/glass-card';
 import { TableAction } from '#/components/table-action';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import { useDualViewSearch } from '#/composables/use-dual-view-search';
 
 import {
   cancelPublicAccountDailyBill,
   cancelPublicAccountPay,
   getPublicAccountDailyBillInfo,
-  getPublicAccountDailyBillList,
   getPublicAccountPayConfig,
   getPublicAccountPayInfo,
-  getPublicAccountPayList,
 } from './api';
 import DailyChangeLogDrawer from './components/daily-change-log-drawer.vue';
+import DailyExtendModal from './components/daily-extend-modal.vue';
 import DailyUploadModal from './components/daily-upload-modal.vue';
 import GenerateDailyModal from './components/generate-daily-modal.vue';
 import MergeOrdersModal from './components/merge-orders-modal.vue';
+import PublicAccountDailyCardList from './components/PublicAccountDailyCardList.vue';
+import PublicAccountOrderCardList from './components/PublicAccountOrderCardList.vue';
 import VoucherThumbs from './components/voucher-thumbs.vue';
 import {
   publicAccountDailyStatusMeta,
   publicAccountPayStatusMeta,
 } from './config/constants';
 import { dailyFormOptions } from './config/daily-search';
-import { dailyGridOptions } from './config/daily-table';
+import { createDailyGridOptions } from './config/daily-table';
 import { formOptions } from './config/search';
-import { gridOptions } from './config/table';
+import { createGridOptions } from './config/table';
 import {
   buildDailyUploadFormData,
   resolveDailyUploadId,
@@ -47,6 +54,7 @@ const TAB_STORAGE_KEY = 'finance_public_account_pay_tab';
 const activeTab = ref(localStorage.getItem(TAB_STORAGE_KEY) || 'daily');
 const billMode = ref<'daily' | 'order'>('order');
 const lockDays = ref(1);
+const lockTime = ref('09:00');
 const canConfirm = ref(false);
 const canUpload = ref(false);
 const canGenerate = ref(false);
@@ -56,13 +64,39 @@ const changeLogOpen = ref(false);
 const changeLogDailyId = ref(0);
 const changeLogMergeId = ref(0);
 
-const [Grid, gridApi] = useVbenVxeGrid({
+const viewMode = useViewMode('public-account-pay-view-mode');
+const orderCardRef = ref<InstanceType<
+  typeof PublicAccountOrderCardList
+> | null>(null);
+const dailyCardRef = ref<InstanceType<
+  typeof PublicAccountDailyCardList
+> | null>(null);
+
+const {
+  SearchForm: OrderSearchForm,
+  searchValues: orderSearchValues,
+  readLiveSearchValues: readOrderSearch,
+} = useDualViewSearch({
   formOptions,
-  gridOptions,
+  viewMode,
+  onListSearch: () => gridApi.reload(),
+});
+
+const {
+  SearchForm: DailySearchForm,
+  searchValues: dailySearchValues,
+  readLiveSearchValues: readDailySearch,
+} = useDualViewSearch({
+  formOptions: dailyFormOptions,
+  viewMode,
+  onListSearch: () => dailyGridApi.reload(),
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: createGridOptions(() => readOrderSearch()),
 });
 const [DailyGrid, dailyGridApi] = useVbenVxeGrid({
-  formOptions: dailyFormOptions,
-  gridOptions: dailyGridOptions,
+  gridOptions: createDailyGridOptions(() => readDailySearch()),
 });
 
 const [DailyUploadPayModal, dailyUploadModalApi] = useVbenModal({
@@ -74,8 +108,32 @@ const [GenerateDailyPayModal, generateDailyModalApi] = useVbenModal({
 const [MergeOrdersPayModal, mergeOrdersModalApi] = useVbenModal({
   connectedComponent: MergeOrdersModal,
 });
+const [DailyExtendPayModal, dailyExtendModalApi] = useVbenModal({
+  connectedComponent: DailyExtendModal,
+});
 
-/** 记住当前 Tab，并让刚显示的表格按父级高度重算，避免切 Tab 后仍缩成一行 */
+/** 当前 Tab 下列表/卡片刷新桥（弹窗成功回调用） */
+function refreshOrderView(fromPageOne = false) {
+  if (viewMode.value === 'list') {
+    fromPageOne ? gridApi.reload() : gridApi.query();
+  } else {
+    fromPageOne
+      ? orderCardRef.value?.reload?.()
+      : orderCardRef.value?.refreshKeepPage?.();
+  }
+}
+
+function refreshDailyView(fromPageOne = false) {
+  if (viewMode.value === 'list') {
+    fromPageOne ? dailyGridApi.reload() : dailyGridApi.query();
+  } else {
+    fromPageOne
+      ? dailyCardRef.value?.reload?.()
+      : dailyCardRef.value?.refreshKeepPage?.();
+  }
+}
+
+/** 记住当前 Tab，并让刚显示的表格按父级高度重算 */
 function persistTab(key: string) {
   activeTab.value = key;
   localStorage.setItem(TAB_STORAGE_KEY, key);
@@ -87,7 +145,6 @@ function persistTab(key: string) {
   });
 }
 
-/** 门店生成本店；管理员选店后生成并站内信通知诊所 */
 function openGenerateDaily() {
   generateDailyModalApi.setData({
     isPlatformAdmin: canConfirm.value,
@@ -95,8 +152,8 @@ function openGenerateDaily() {
     gridApi: {
       reload: () => {
         persistTab('daily');
-        dailyGridApi.reload();
-        gridApi.reload();
+        refreshDailyView(true);
+        refreshOrderView(true);
       },
     },
   });
@@ -110,11 +167,36 @@ function openDailyUpload(row: Record<string, any>) {
     return;
   }
   dailyUploadModalApi.setData(
-    buildDailyUploadFormData(row, { gridApi: dailyGridApi }),
+    buildDailyUploadFormData(row, {
+      gridApi: {
+        reload: () => refreshDailyView(true),
+        query: () => refreshDailyView(false),
+      },
+    }),
   );
   dailyUploadModalApi.open();
 }
 
+function openDailyExtend(row: Record<string, any>) {
+  const uploadId = resolveDailyUploadId(row);
+  const mergeId = Number(row.merge_id || 0);
+  if (uploadId < 1 && mergeId < 1) {
+    message.warning('无法识别日汇总，请刷新后重试');
+    return;
+  }
+  dailyExtendModalApi.setData({
+    ...row,
+    id: uploadId,
+    merge_id: mergeId,
+    lock_time: lockTime.value,
+    gridApi: {
+      reload: () => refreshDailyView(true),
+      query: () => refreshDailyView(false),
+    },
+  });
+  dailyExtendModalApi.open();
+}
+
 async function openDetail(id: number) {
   detail.value = await getPublicAccountPayInfo(id);
 }
@@ -123,16 +205,12 @@ async function openDailyDetail(id: number) {
   dailyDetail.value = await getPublicAccountDailyBillInfo(id);
 }
 
-/** 查看合并：弹窗展示日账单 + 商品订单 */
 function openMergeDetail(mergeId: number) {
-  if (mergeId < 1) {
-    return;
-  }
+  if (mergeId < 1) return;
   mergeOrdersModalApi.setData({ merge_id: mergeId });
   mergeOrdersModalApi.open();
 }
 
-/** 打开日账单变动记录 */
 function openChangeLog(row: Record<string, any>) {
   const isPeriod = Number(row.is_period || 0) === 1;
   changeLogDailyId.value = isPeriod ? 0 : Number(row.id || 0);
@@ -146,13 +224,13 @@ function openChangeLog(row: Record<string, any>) {
 async function handleCancel(row: Record<string, any>) {
   await cancelPublicAccountPay({ id: row.id });
   message.success('已取消');
-  gridApi.reload();
+  refreshOrderView(true);
 }
 
 async function handleDailyCancel(row: Record<string, any>) {
   await cancelPublicAccountDailyBill({ id: row.id });
   message.success('已取消');
-  dailyGridApi.reload();
+  refreshDailyView(true);
 }
 
 function tryOpenFromQuery() {
@@ -183,41 +261,101 @@ function tryOpenFromQuery() {
     .catch(() => {});
 }
 
-const initTableAjax = () => {
-  gridApi.setGridOptions({
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getPublicAccountPayList({
-            page: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
+/** 日汇总行操作（列表与卡片共用） */
+function buildDailyRowActions(row: Record<string, any>): ActionItem[] {
+  return [
+    {
+      label: '上传凭证',
+      type: 'link',
+      ifShow:
+        canUpload.value &&
+        row.status !== 1 &&
+        row.status !== 2 &&
+        (Number(row.is_period || 0) === 1 ||
+          (Number(row.is_period || 0) !== 1 && Number(row.status) !== 4)),
+      onClick: () => openDailyUpload(row),
+    },
+    {
+      label: '手动延期',
+      type: 'link',
+      ifShow:
+        !!canConfirm.value &&
+        Number(row.status) !== 1 &&
+        Number(row.status) !== 2,
+      onClick: () => openDailyExtend(row),
+    },
+    {
+      label: '变动记录',
+      type: 'link',
+      ifShow: Number(row.id || 0) > 0 || Number(row.merge_id || 0) > 0,
+      onClick: () => openChangeLog(row),
+    },
+    {
+      label: '查看合并',
+      type: 'link',
+      ifShow: Number(row.merge_id || 0) > 0,
+      onClick: () => openMergeDetail(Number(row.merge_id)),
+    },
+    {
+      label: '详情',
+      type: 'link',
+      ifShow: Number(row.is_period || 0) !== 1,
+      onClick: () => openDailyDetail(row.id),
+    },
+    {
+      label: '取消',
+      type: 'link',
+      danger: true,
+      ifShow:
+        canConfirm.value &&
+        Number(row.is_period || 0) !== 1 &&
+        row.status !== 1 &&
+        row.status !== 2 &&
+        row.status !== 4,
+      popConfirm: {
+        title: '确认取消该日汇总？子单将退回待出账',
+        confirm: () => handleDailyCancel(row),
       },
     },
-  });
-  dailyGridApi.setGridOptions({
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getPublicAccountDailyBillList({
-            page: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-  });
-};
+  ];
+}
 
-initTableAjax();
+/** 订单明细行操作：日模式下仅详情；纯订单模式可取消待到账 */
+function buildOrderRowActions(row: Record<string, any>): ActionItem[] {
+  return [
+    {
+      label: '详情',
+      type: 'link',
+      onClick: () => openDetail(row.id),
+    },
+    {
+      label: '取消',
+      type: 'link',
+      danger: true,
+      ifShow: billMode.value === 'order' && row.status === 0,
+      popConfirm: {
+        title: '确认取消该待到账单？',
+        confirm: () => handleCancel(row),
+      },
+    },
+  ];
+}
+
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    if (billMode.value === 'daily' && activeTab.value === 'daily') {
+      dailyGridApi.query();
+    } else {
+      gridApi.query();
+    }
+  }
+});
 
 onMounted(async () => {
   const cfg = await getPublicAccountPayConfig().catch(() => null);
   billMode.value = cfg?.bill_mode === 'daily' ? 'daily' : 'order';
   lockDays.value = Math.max(1, Number(cfg?.lock_days ?? 1));
+  lockTime.value = String(cfg?.lock_time || '09:00').trim() || '09:00';
   canConfirm.value =
     Number(cfg?.can_confirm) === 1 || cfg?.can_confirm === true;
   canUpload.value = Number(cfg?.can_upload) === 1 || cfg?.can_upload === true;
@@ -241,221 +379,187 @@ watch(
       <DailyUploadPayModal />
       <GenerateDailyPayModal />
       <MergeOrdersPayModal />
+      <DailyExtendPayModal />
       <DailyChangeLogDrawer
         v-model:open="changeLogOpen"
         :daily-bill-id="changeLogDailyId"
         :merge-id="changeLogMergeId"
       />
-      <Tabs
-        v-if="billMode === 'daily'"
-        class="pap-tabs"
-        :active-key="activeTab"
-        @change="persistTab"
+
+      <template v-if="billMode === 'daily'">
+        <Tabs class="pap-tabs" :active-key="activeTab" @change="persistTab">
+          <Tabs.TabPane key="daily" tab="日汇总">
+            <DailySearchForm class="mb-3" />
+            <div class="mb-3 flex items-center justify-between gap-2">
+              <TableAction
+                :actions="[
+                  {
+                    label: lockDays > 1 ? '生成周期账单' : '生成日账单',
+                    type: 'primary',
+                    ifShow: canGenerate,
+                    onClick: openGenerateDaily,
+                  },
+                ]"
+              />
+              <ViewModeSwitch v-model="viewMode" />
+            </div>
+            <DailyGrid v-if="viewMode === 'list'">
+              <template #toolbar-actions></template>
+              <template #status="{ row }">
+                <Tag :color="publicAccountDailyStatusMeta(row.status).color">
+                  {{
+                    row.status_txt ||
+                    publicAccountDailyStatusMeta(row.status).label
+                  }}
+                </Tag>
+              </template>
+              <template #vouchers="{ row }">
+                <VoucherThumbs :items="row.vouchers" />
+              </template>
+              <template #arrival_vouchers="{ row }">
+                <VoucherThumbs :items="row.arrival_vouchers" />
+              </template>
+              <template #expand="{ row }">
+                <div class="expand-box">
+                  <template v-if="Number(row.is_period || 0) === 1">
+                    <div
+                      v-for="item in row.items || []"
+                      :key="`m-${item.id}`"
+                      class="expand-row"
+                    >
+                      日账单 #{{ item.id }} ·
+                      {{ item.bill_date_txt || item.bill_date }} · ¥{{
+                        item.platform_amount
+                      }}
+                      · {{ item.status_txt }}
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div
+                      v-for="item in row.items || []"
+                      :key="item.id"
+                      class="expand-row"
+                      :class="{
+                        'text-muted-foreground line-through opacity-70':
+                          item.status === 2,
+                      }"
+                    >
+                      {{ item.order_no }} · ¥{{ item.platform_amount }} ·
+                      {{ item.status_txt }}
+                    </div>
+                    <a
+                      v-if="!(row.items || []).length"
+                      class="text-sm text-primary"
+                      @click="openDailyDetail(row.id)"
+                    >
+                      查看子单
+                    </a>
+                  </template>
+                </div>
+              </template>
+              <template #action="{ row }">
+                <TableAction :actions="buildDailyRowActions(row)" />
+              </template>
+            </DailyGrid>
+            <PublicAccountDailyCardList
+              v-else
+              ref="dailyCardRef"
+              :form-values="dailySearchValues"
+              :build-row-actions="buildDailyRowActions"
+              :with-period-end="true"
+            />
+          </Tabs.TabPane>
+          <Tabs.TabPane key="order" tab="订单明细">
+            <OrderSearchForm class="mb-3" />
+            <div class="mb-3 flex items-center justify-between gap-2">
+              <TableAction
+                :actions="[
+                  {
+                    label: lockDays > 1 ? '生成周期账单' : '生成日账单',
+                    type: 'primary',
+                    ifShow: canGenerate,
+                    onClick: openGenerateDaily,
+                  },
+                ]"
+              />
+              <ViewModeSwitch v-model="viewMode" />
+            </div>
+            <Grid v-if="viewMode === 'list'">
+              <template #toolbar-actions></template>
+              <template #status="{ row }">
+                <Tag :color="publicAccountPayStatusMeta(row.status).color">
+                  {{
+                    row.status_txt ||
+                    publicAccountPayStatusMeta(row.status).label
+                  }}
+                </Tag>
+              </template>
+              <template #vouchers="{ row }">
+                <VoucherThumbs :items="row.vouchers" />
+              </template>
+              <template #action="{ row }">
+                <TableAction :actions="buildOrderRowActions(row)" />
+              </template>
+            </Grid>
+            <PublicAccountOrderCardList
+              v-else
+              ref="orderCardRef"
+              :form-values="orderSearchValues"
+              :build-row-actions="buildOrderRowActions"
+            />
+          </Tabs.TabPane>
+        </Tabs>
+      </template>
+
+      <template v-else>
+        <OrderSearchForm class="mb-3" />
+        <div class="mb-3 flex justify-end">
+          <ViewModeSwitch v-model="viewMode" />
+        </div>
+        <Grid v-if="viewMode === 'list'">
+          <template #toolbar-actions></template>
+          <template #status="{ row }">
+            <Tag :color="publicAccountPayStatusMeta(row.status).color">
+              {{
+                row.status_txt || publicAccountPayStatusMeta(row.status).label
+              }}
+            </Tag>
+          </template>
+          <template #vouchers="{ row }">
+            <VoucherThumbs :items="row.vouchers" />
+          </template>
+          <template #action="{ row }">
+            <TableAction :actions="buildOrderRowActions(row)" />
+          </template>
+        </Grid>
+        <PublicAccountOrderCardList
+          v-else
+          ref="orderCardRef"
+          :form-values="orderSearchValues"
+          :build-row-actions="buildOrderRowActions"
+        />
+      </template>
+
+      <GlassCard
+        v-if="dailyDetail"
+        class="mt-4"
+        icon="lucide:calendar-days"
+        padding="md"
+        :specular="false"
       >
-        <Tabs.TabPane key="daily" tab="日汇总">
-          <DailyGrid>
-            <template #toolbar-actions>
-              <TableAction
-                :actions="[
-                  {
-                    label: lockDays > 1 ? '生成周期账单' : '生成日账单',
-                    type: 'primary',
-                    ifShow: canGenerate,
-                    onClick: openGenerateDaily,
-                  },
-                ]"
-              />
-            </template>
-            <template #status="{ row }">
-              <Tag :color="publicAccountDailyStatusMeta(row.status).color">
-                {{
-                  row.status_txt ||
-                  publicAccountDailyStatusMeta(row.status).label
-                }}
-              </Tag>
-            </template>
-            <template #vouchers="{ row }">
-              <VoucherThumbs :items="row.vouchers" />
-            </template>
-            <template #arrival_vouchers="{ row }">
-              <VoucherThumbs :items="row.arrival_vouchers" />
-            </template>
-            <template #expand="{ row }">
-              <div class="expand-box">
-                <template v-if="Number(row.is_period || 0) === 1">
-                  <div
-                    v-for="item in row.items || []"
-                    :key="`m-${ item.id}`"
-                    class="expand-row"
-                  >
-                    日账单 #{{ item.id }} ·
-                    {{ item.bill_date_txt || item.bill_date }} · ¥{{
-                      item.platform_amount
-                    }}
-                    · {{ item.status_txt }}
-                  </div>
-                </template>
-                <template v-else>
-                  <div
-                    v-for="item in row.items || []"
-                    :key="item.id"
-                    class="expand-row"
-                    :class="{
-                      'text-muted-foreground line-through opacity-70':
-                        item.status === 2,
-                    }"
-                  >
-                    {{ item.order_no }} · ¥{{ item.platform_amount }} ·
-                    {{ item.status_txt }}
-                  </div>
-                  <a
-                    v-if="!(row.items || []).length"
-                    class="text-sm text-primary"
-                    @click="openDailyDetail(row.id)"
-                  >
-                    查看子单
-                  </a>
-                </template>
-              </div>
-            </template>
-            <template #action="{ row }">
-              <TableAction
-                :actions="[
-                  {
-                    label: '上传凭证',
-                    type: 'link',
-                    ifShow:
-                      canUpload &&
-                      row.status !== 1 &&
-                      row.status !== 2 &&
-                      (Number(row.is_period || 0) === 1 ||
-                        (Number(row.is_period || 0) !== 1 &&
-                          Number(row.status) !== 4)),
-                    onClick: openDailyUpload.bind(null, row),
-                  },
-                  {
-                    label: '变动记录',
-                    type: 'link',
-                    ifShow:
-                      Number(row.id || 0) > 0 || Number(row.merge_id || 0) > 0,
-                    onClick: openChangeLog.bind(null, row),
-                  },
-                  {
-                    label: '查看合并',
-                    type: 'link',
-                    ifShow: Number(row.merge_id || 0) > 0,
-                    onClick: openMergeDetail.bind(null, Number(row.merge_id)),
-                  },
-                  {
-                    label: '详情',
-                    type: 'link',
-                    ifShow: Number(row.is_period || 0) !== 1,
-                    onClick: openDailyDetail.bind(null, row.id),
-                  },
-                  {
-                    label: '取消',
-                    type: 'link',
-                    danger: true,
-                    ifShow:
-                      canConfirm &&
-                      Number(row.is_period || 0) !== 1 &&
-                      row.status !== 1 &&
-                      row.status !== 2 &&
-                      row.status !== 4,
-                    popConfirm: {
-                      title: '确认取消该日汇总？子单将退回待出账',
-                      confirm: handleDailyCancel.bind(null, row),
-                    },
-                  },
-                ]"
-              />
-            </template>
-          </DailyGrid>
-        </Tabs.TabPane>
-        <Tabs.TabPane key="order" tab="订单明细">
-          <Grid>
-            <template #toolbar-actions>
-              <TableAction
-                :actions="[
-                  {
-                    label: lockDays > 1 ? '生成周期账单' : '生成日账单',
-                    type: 'primary',
-                    ifShow: canGenerate,
-                    onClick: openGenerateDaily,
-                  },
-                ]"
-              />
-            </template>
-            <template #status="{ row }">
-              <Tag :color="publicAccountPayStatusMeta(row.status).color">
-                {{
-                  row.status_txt || publicAccountPayStatusMeta(row.status).label
-                }}
-              </Tag>
-            </template>
-            <template #vouchers="{ row }">
-              <VoucherThumbs :items="row.vouchers" />
-            </template>
-            <template #action="{ row }">
-              <TableAction
-                :actions="[
-                  {
-                    label: '详情',
-                    type: 'link',
-                    onClick: openDetail.bind(null, row.id),
-                  },
-                ]"
-              />
-            </template>
-          </Grid>
-        </Tabs.TabPane>
-      </Tabs>
-      <Grid v-else>
-        <template #status="{ row }">
-          <Tag :color="publicAccountPayStatusMeta(row.status).color">
-            {{ row.status_txt || publicAccountPayStatusMeta(row.status).label }}
-          </Tag>
+        <template #title>
+          日汇总 #{{ dailyDetail.id }} ·
+          {{ dailyDetail.bill_date_range_txt || dailyDetail.bill_date_txt }}
         </template>
-        <template #vouchers="{ row }">
-          <VoucherThumbs :items="row.vouchers" />
-        </template>
-        <template #action="{ row }">
-          <TableAction
-            :actions="[
-              {
-                label: '详情',
-                type: 'link',
-                onClick: openDetail.bind(null, row.id),
-              },
-              {
-                label: '取消',
-                type: 'link',
-                danger: true,
-                ifShow: row.status === 0,
-                popConfirm: {
-                  title: '确认取消该待到账单？',
-                  confirm: handleCancel.bind(null, row),
-                },
-              },
-            ]"
-          />
-        </template>
-      </Grid>
-      <div v-if="dailyDetail" class="detail-card mt-4">
-        <div class="mb-2 flex items-center justify-between">
-          <b>
-            日汇总 #{{ dailyDetail.id }} ·
-            {{ dailyDetail.bill_date_range_txt || dailyDetail.bill_date_txt }}
-          </b>
-          <a class="text-sm text-primary" @click="dailyDetail = null">关闭</a>
-          <a
-            class="ml-3 text-sm text-primary"
-            @click="openChangeLog(dailyDetail)"
-          >
+        <template #extra>
+          <a class="text-sm text-primary" @click="openChangeLog(dailyDetail)">
             变动记录
           </a>
-        </div>
-        <div class="text-sm text-[hsl(var(--muted-foreground))]">
+          <a class="ml-3 text-sm text-primary" @click="dailyDetail = null">
+            关闭
+          </a>
+        </template>
+        <div class="text-sm text-muted-foreground">
           {{ dailyDetail.store_name }} · {{ dailyDetail.status_txt }} · 应付款
           ¥{{ dailyDetail.platform_amount || '0.00' }} ·
           {{ dailyDetail.order_count }} 单
@@ -507,13 +611,21 @@ watch(
             />
           </div>
         </div>
-      </div>
-      <div v-if="detail" class="detail-card mt-4">
-        <div class="mb-2 flex items-center justify-between">
-          <b>账单 #{{ detail.id }} · {{ detail.order_no }}</b>
+      </GlassCard>
+      <GlassCard
+        v-if="detail"
+        class="mt-4"
+        icon="lucide:landmark"
+        padding="md"
+        :specular="false"
+      >
+        <template #title>
+          账单 #{{ detail.id }} · {{ detail.order_no }}
+        </template>
+        <template #extra>
           <a class="text-sm text-primary" @click="detail = null">关闭</a>
-        </div>
-        <div class="text-sm text-[hsl(var(--muted-foreground))]">
+        </template>
+        <div class="text-sm text-muted-foreground">
           状态 {{ detail.status_txt }} · 分账
           {{ detail.split_mode_txt || '未选' }} · 入账 ¥{{
             detail.paid_amount || '0.00'
@@ -543,7 +655,7 @@ watch(
             />
           </div>
         </div>
-      </div>
+      </GlassCard>
     </div>
   </Page>
 </template>
@@ -576,7 +688,7 @@ watch(
 .pap-tabs :deep(.ant-tabs-content-holder) {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .pap-tabs :deep(.ant-tabs-content) {
@@ -597,14 +709,6 @@ watch(
   height: 100% !important;
 }
 
-.detail-card {
-  padding: 14px 16px;
-  background: hsl(var(--card, var(--background)));
-  border: 1px solid hsl(var(--primary) / 30%);
-  border-radius: 10px;
-  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
-}
-
 .expand-box {
   padding: 8px 12px;
 }
diff --git a/apps/web-antd/src/views/finance/visualization-chart/api/index.ts b/apps/web-antd/src/views/finance/visualization-chart/api/index.ts
index 6d86dfc1..b2c00b51 100644
--- a/apps/web-antd/src/views/finance/visualization-chart/api/index.ts
+++ b/apps/web-antd/src/views/finance/visualization-chart/api/index.ts
@@ -2,8 +2,9 @@ import { requestClient } from '#/api/request';
 
 const prefix = 'visualization-chart/';
 /**
- * 诊所对账单
- * @param data
+ * 财务可视化看板数据（xk-api GET visualization-chart/curve-chart）
+ * 返回 line 趋势 / drug 分类占比 / address 地区 / store_rank 门店排行 / kpi 指标 / compare 环比
+ * @param data { search_time: [开始, 结束] }
  */
 export async function getReconciliationChartApi(data: any) {
   return requestClient.get<any>(`${prefix}curve-chart`, { params: data });
diff --git a/apps/web-antd/src/views/finance/visualization-chart/components/KpiGlassCard.vue b/apps/web-antd/src/views/finance/visualization-chart/components/KpiGlassCard.vue
new file mode 100644
index 00000000..148a07a2
--- /dev/null
+++ b/apps/web-antd/src/views/finance/visualization-chart/components/KpiGlassCard.vue
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+/**
+ * 财务可视化 · 液态玻璃指标卡
+ * - 数字从旧值平滑滚动到新值（切换时间范围时更容易感知变化）
+ * - 底部展示环比：涨用 success、跌用 destructive，上期为 0 时显示「—」
+ * 为什么不复用 stat-islands：它固定两位小数且没有环比位，订单笔数会显示成 128.00
+ */
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { TransitionPresets, useTransition } from '@vueuse/core';
+
+import { formatMoney } from '../utils/chart-theme';
+
+const props = withDefaults(
+  defineProps<{
+    icon: string;
+    /** money 金额千分位两位小数；count 整数 */
+    kind?: 'count' | 'money';
+    label: string;
+    /** 上期值，用于悬停提示 */
+    prevValue?: number;
+    /** 环比百分比；null 表示上期无数据 */
+    rate?: null | number;
+    /** 主题色变量名（不带 --），决定图标与微光颜色 */
+    tone?: string;
+    unit?: string;
+    value: number;
+  }>(),
+  { kind: 'money', rate: null, prevValue: 0, tone: 'primary', unit: '' },
+);
+
+const source = ref(0);
+const animated = useTransition(source, {
+  duration: 700,
+  transition: TransitionPresets.easeOutCubic,
+});
+watch(
+  () => props.value,
+  (val) => {
+    source.value = Number(val) || 0;
+  },
+  { immediate: true },
+);
+
+/** 动画中的数字按类型格式化，金额保留两位、笔数取整 */
+const display = computed(() =>
+  props.kind === 'money'
+    ? formatMoney(animated.value)
+    : Math.round(animated.value).toLocaleString('zh-CN'),
+);
+
+const prevDisplay = computed(() =>
+  props.kind === 'money'
+    ? `¥${formatMoney(props.prevValue)}`
+    : `${Number(props.prevValue || 0).toLocaleString('zh-CN')}${props.unit}`,
+);
+
+/** 环比方向：up / down / flat / none（上期为 0） */
+const trend = computed(() => {
+  if (props.rate === null || props.rate === undefined) return 'none';
+  if (props.rate > 0) return 'up';
+  if (props.rate < 0) return 'down';
+  return 'flat';
+});
+
+const rateText = computed(() =>
+  trend.value === 'none'
+    ? '—'
+    : `${Math.abs(props.rate as number).toFixed(1)}%`,
+);
+</script>
+
+<template>
+  <article class="kpi-card" :style="{ '--kpi-tone': `var(--${tone})` }">
+    <div class="kpi-specular"></div>
+    <div class="kpi-head">
+      <span class="kpi-label">{{ label }}</span>
+      <span class="kpi-icon">
+        <IconifyIcon :icon="icon" />
+      </span>
+    </div>
+    <div class="kpi-value">
+      <span v-if="kind === 'money'" class="kpi-prefix">¥</span>
+      <span class="kpi-number">{{ display }}</span>
+      <span v-if="unit" class="kpi-unit">{{ unit }}</span>
+    </div>
+    <div class="kpi-foot" :title="`上期：${prevDisplay}`">
+      <span class="kpi-rate" :class="`kpi-rate--${trend}`">
+        <IconifyIcon
+          v-if="trend === 'up'"
+          icon="lucide:trending-up"
+          class="kpi-rate-icon"
+        />
+        <IconifyIcon
+          v-else-if="trend === 'down'"
+          icon="lucide:trending-down"
+          class="kpi-rate-icon"
+        />
+        {{ rateText }}
+      </span>
+      <span class="kpi-compare">较上期</span>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.kpi-card {
+  position: relative;
+  padding: 18px 18px 14px;
+  overflow: hidden;
+  background: linear-gradient(
+    145deg,
+    hsl(var(--card) / 72%),
+    hsl(var(--card) / 42%)
+  );
+  border: 1px solid hsl(var(--kpi-tone) / 22%);
+  border-radius: 20px;
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 55%),
+    0 0 6px hsl(var(--kpi-tone) / 12%),
+    0 10px 30px hsl(var(--kpi-tone) / 8%);
+  backdrop-filter: blur(24px) saturate(180%);
+  transition:
+    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 0.35s ease,
+    border-color 0.35s ease;
+}
+
+.kpi-card:hover {
+  border-color: hsl(var(--kpi-tone) / 40%);
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 70%),
+    0 0 10px hsl(var(--kpi-tone) / 18%),
+    0 18px 40px hsl(var(--kpi-tone) / 14%);
+  transform: translateY(-3px);
+}
+
+/* 液态玻璃的高光：左上角斜向反射 + 右上角色彩折射 */
+.kpi-specular {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      120% 60% at 0% 0%,
+      hsl(var(--glass-specular) / 28%) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      60% 80% at 100% 0%,
+      hsl(var(--kpi-tone) / 16%) 0%,
+      transparent 70%
+    );
+}
+
+.kpi-head {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.kpi-label {
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+  letter-spacing: 0.02em;
+}
+
+.kpi-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  font-size: 18px;
+  color: hsl(var(--kpi-tone));
+  background: hsl(var(--kpi-tone) / 12%);
+  border: 1px solid hsl(var(--kpi-tone) / 20%);
+  border-radius: 12px;
+  box-shadow: inset 0 1px 0 hsl(var(--glass-specular) / 40%);
+}
+
+.kpi-value {
+  position: relative;
+  display: flex;
+  gap: 3px;
+  align-items: baseline;
+  color: hsl(var(--foreground));
+}
+
+.kpi-prefix,
+.kpi-unit {
+  font-size: 14px;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+}
+
+.kpi-number {
+  font-family:
+    -apple-system, 'SF Pro Display', 'DIN Alternate', ui-monospace, sans-serif;
+  font-size: 26px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+}
+
+.kpi-foot {
+  position: relative;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.kpi-rate {
+  display: inline-flex;
+  gap: 2px;
+  align-items: center;
+  padding: 1px 8px;
+  font-weight: 600;
+  border-radius: 999px;
+}
+
+.kpi-rate-icon {
+  font-size: 13px;
+}
+
+.kpi-rate--up {
+  color: hsl(var(--success));
+  background: hsl(var(--success) / 12%);
+}
+
+.kpi-rate--down {
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 12%);
+}
+
+.kpi-rate--flat,
+.kpi-rate--none {
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 50%);
+}
+
+.kpi-compare {
+  color: hsl(var(--muted-foreground));
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/visualization-chart/components/StoreRankPanel.vue b/apps/web-antd/src/views/finance/visualization-chart/components/StoreRankPanel.vue
new file mode 100644
index 00000000..e67fa888
--- /dev/null
+++ b/apps/web-antd/src/views/finance/visualization-chart/components/StoreRankPanel.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+/**
+ * 财务可视化 · 门店销售排行 Top10
+ * - 进度条按「占第一名的比例」绘制，直观看出头部门店与长尾差距
+ * - 同时给出占全部销售额的比例，方便判断头部集中度
+ * 不用 vxe-grid：这里是固定 10 行的可视化榜单，没有分页/排序/导出需求
+ */
+import { computed } from 'vue';
+
+import { formatMoney } from '../utils/chart-theme';
+
+export interface StoreRankItem {
+  store_id: number;
+  store_name: string;
+  province_name: string;
+  money: number;
+  order_count: number;
+  avg_order_money: number;
+}
+
+const props = defineProps<{
+  items: StoreRankItem[];
+  /** 区间总销售额，用于计算单店占比 */
+  totalMoney: number;
+}>();
+
+/** 预先算好进度和占比，模板只做展示 */
+const rows = computed(() => {
+  const top = Number(props.items[0]?.money || 0);
+  const total = Number(props.totalMoney || 0);
+  return props.items.map((item, index) => ({
+    ...item,
+    rank: index + 1,
+    progress: top > 0 ? Math.max(4, (Number(item.money) / top) * 100) : 0,
+    share: total > 0 ? ((Number(item.money) / total) * 100).toFixed(1) : '0.0',
+  }));
+});
+</script>
+
+<template>
+  <div class="rank-list">
+    <div v-if="rows.length === 0" class="rank-empty">暂无门店销售数据</div>
+    <div v-for="row in rows" :key="row.store_id" class="rank-row">
+      <span
+        class="rank-badge"
+        :class="`rank-badge--${row.rank <= 3 ? row.rank : 'n'}`"
+      >
+        {{ row.rank }}
+      </span>
+      <div class="rank-main">
+        <div class="rank-title">
+          <span class="rank-name" :title="row.store_name">{{
+            row.store_name
+          }}</span>
+          <span v-if="row.province_name" class="rank-province">{{
+            row.province_name
+          }}</span>
+        </div>
+        <div class="rank-bar">
+          <div class="rank-bar-fill" :style="{ width: `${row.progress}%` }"></div>
+        </div>
+        <div class="rank-meta">
+          <span>{{ row.order_count }} 笔</span>
+          <span>客单价 ¥{{ formatMoney(row.avg_order_money) }}</span>
+          <span>占比 {{ row.share }}%</span>
+        </div>
+      </div>
+      <div class="rank-money">¥{{ formatMoney(row.money) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rank-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 10px 20px;
+}
+
+.rank-empty {
+  grid-column: 1 / -1;
+  padding: 40px 0;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+}
+
+.rank-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+  background: hsl(var(--card) / 35%);
+  border: 1px solid hsl(var(--border) / 60%);
+  border-radius: 14px;
+  transition:
+    background 0.25s ease,
+    border-color 0.25s ease;
+}
+
+.rank-row:hover {
+  background: hsl(var(--primary) / 6%);
+  border-color: hsl(var(--primary) / 30%);
+}
+
+.rank-badge {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 13px;
+  font-weight: 700;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 60%);
+  border-radius: 10px;
+}
+
+/* 前三名：金银铜的柔和玻璃徽章 */
+.rank-badge--1 {
+  color: rgb(230 140 0);
+  background: linear-gradient(
+    145deg,
+    rgb(255 214 10 / 35%),
+    rgb(255 159 10 / 18%)
+  );
+  box-shadow: 0 0 6px rgb(255 159 10 / 25%);
+}
+
+.rank-badge--2 {
+  color: hsl(var(--foreground) / 70%);
+  background: linear-gradient(
+    145deg,
+    rgb(203 213 225 / 45%),
+    rgb(148 163 184 / 18%)
+  );
+}
+
+.rank-badge--3 {
+  color: rgb(234 110 40);
+  background: linear-gradient(
+    145deg,
+    rgb(251 146 60 / 30%),
+    rgb(234 88 12 / 15%)
+  );
+}
+
+.rank-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.rank-title {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.rank-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.rank-province {
+  flex-shrink: 0;
+  padding: 0 6px;
+  font-size: 11px;
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 10%);
+  border-radius: 6px;
+}
+
+.rank-bar {
+  height: 6px;
+  overflow: hidden;
+  background: hsl(var(--muted) / 60%);
+  border-radius: 999px;
+}
+
+.rank-bar-fill {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    hsl(var(--primary) / 55%),
+    hsl(var(--primary))
+  );
+  border-radius: inherit;
+  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.rank-meta {
+  display: flex;
+  gap: 12px;
+  margin-top: 5px;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+.rank-money {
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: hsl(var(--foreground));
+}
+
+@media (max-width: 768px) {
+  .rank-list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/finance/visualization-chart/index.vue b/apps/web-antd/src/views/finance/visualization-chart/index.vue
index 9456cd88..83002ffb 100644
--- a/apps/web-antd/src/views/finance/visualization-chart/index.vue
+++ b/apps/web-antd/src/views/finance/visualization-chart/index.vue
@@ -1,21 +1,41 @@
 <script setup lang="ts">
-import { onActivated, ref } from 'vue';
+/**
+ * 财务数据可视化（液态玻璃风格看板）
+ * - 顶部：时间范围 + 刷新/重置
+ * - 指标卡：总销售额 / 订单笔数 / 客单价 / 动销门店，均带环比（对比紧邻的上一个等长区间）
+ * - 趋势：销售金额（面积）+ 订单笔数（折线）双 Y 轴；≤62 天按天、否则按月（后端决定粒度）
+ * - 药品分类占比（环形图）、地区销售分布（横向条形）、门店 Top10 榜单
+ * 数据全部来自 visualization-chart/curve-chart 一个接口，后端已用 SQL 聚合
+ */
+import type { Dayjs } from 'dayjs';
+
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { computed, nextTick, onActivated, ref, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
-import {
-  EchartsUI,
-  type EchartsUIType,
-  useEcharts,
-} from '@vben/plugins/echarts';
+import { IconifyIcon } from '@vben/icons';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { usePreferences } from '@vben/preferences';
 
-import { Button, Card } from 'ant-design-vue';
-import type { Dayjs } from 'dayjs';
+import { Button, Spin } from 'ant-design-vue';
 
 import SearchTimeRangePicker from '#/components/form/components/search-time-range-picker.vue';
 import { monthToTodayRangeDayjs } from '#/utils/search-time-range';
 import { getReconciliationChartApi } from '#/views/finance/visualization-chart/api';
 
-// 图表相关
+import KpiGlassCard from './components/KpiGlassCard.vue';
+import StoreRankPanel from './components/StoreRankPanel.vue';
+import {
+  formatAxisMoney,
+  formatMoney,
+  getChartPalette,
+  GLASS_SERIES_COLORS,
+  glassTooltip,
+} from './utils/chart-theme';
+
+defineOptions({ name: 'VisualizationChart' });
+
 const lineChartRef = ref<EchartsUIType>();
 const pieChartRef = ref<EchartsUIType>();
 const mapChartRef = ref<EchartsUIType>();
@@ -24,32 +44,159 @@ const { renderEcharts: renderLine } = useEcharts(lineChartRef);
 const { renderEcharts: renderPie } = useEcharts(pieChartRef);
 const { renderEcharts: renderMap } = useEcharts(mapChartRef);
 
-// 模拟数据（替换为真实数据接口）
-const chartData = ref();
+const { isDark } = usePreferences();
 
-// 初始化图表配置
-const initCharts = () => {
-  // 折线图
-  renderLine({
-    tooltip: {
-      trigger: 'axis',
-      formatter: '{b}<br/>{a}: ¥{c}',
+const chartData = ref<any>(null);
+const loading = ref(false);
+
+/** 指标卡配置：值和环比都从接口 kpi / compare 取，tone 对应主题色变量 */
+const kpiCards = computed(() => {
+  const kpi = chartData.value?.kpi || {};
+  const compare = chartData.value?.compare || {};
+  const prev = compare.prev || {};
+  return [
+    {
+      key: 'total_money',
+      label: '总销售额',
+      value: Number(kpi.total_money || 0),
+      prevValue: Number(prev.total_money || 0),
+      rate: compare.total_money_rate ?? null,
+      icon: 'lucide:wallet',
+      kind: 'money' as const,
+      tone: 'primary',
     },
+    {
+      key: 'order_count',
+      label: '订单笔数',
+      value: Number(kpi.order_count || 0),
+      prevValue: Number(prev.order_count || 0),
+      rate: compare.order_count_rate ?? null,
+      icon: 'lucide:receipt-text',
+      kind: 'count' as const,
+      tone: 'success',
+      unit: '笔',
+    },
+    {
+      key: 'avg_order_money',
+      label: '客单价',
+      value: Number(kpi.avg_order_money || 0),
+      prevValue: Number(prev.avg_order_money || 0),
+      rate: compare.avg_order_money_rate ?? null,
+      icon: 'lucide:badge-dollar-sign',
+      kind: 'money' as const,
+      tone: 'warning',
+    },
+    {
+      key: 'store_count',
+      label: '动销门店',
+      value: Number(kpi.store_count || 0),
+      prevValue: Number(prev.store_count || 0),
+      rate: compare.store_count_rate ?? null,
+      icon: 'lucide:store',
+      kind: 'count' as const,
+      tone: 'destructive',
+      unit: '家',
+    },
+  ];
+});
+
+/** 副标题：当前区间与对比区间，让用户明白环比的口径 */
+const rangeText = computed(() => {
+  const [s, e] = searchTime.value || [];
+  const prevRange = chartData.value?.compare?.prev_range || [];
+  const cur =
+    s && e ? `${s.format('YYYY-MM-DD')} 至 ${e.format('YYYY-MM-DD')}` : '';
+  const prev =
+    prevRange.length === 2 ? `，对比 ${prevRange[0]} 至 ${prevRange[1]}` : '';
+  return `${cur}${prev}`;
+});
+
+/** 趋势粒度标签：后端返回 day / month */
+const granularityText = computed(() =>
+  chartData.value?.line?.granularity === 'month' ? '按月' : '按天',
+);
+
+/** 区间内日均销售额（按趋势点数平均），趋势卡右上角展示 */
+const avgPerBucket = computed(() => {
+  const list: number[] = chartData.value?.line?.sale_money || [];
+  if (list.length === 0) return 0;
+  return Number(chartData.value?.kpi?.total_money || 0) / list.length;
+});
+
+/**
+ * 销售趋势：金额走左轴面积线，笔数走右轴折线
+ * 双轴是因为两者量级差几个数量级，同轴会把笔数压成一条直线
+ */
+function renderTrendChart() {
+  const p = getChartPalette();
+  const line = chartData.value?.line || {};
+  const labels: string[] = line.month || [];
+  renderLine({
+    color: [p.primary, GLASS_SERIES_COLORS[1] as string],
+    tooltip: {
+      ...glassTooltip(p),
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        lineStyle: { color: p.border, type: 'dashed' },
+      },
+      formatter: (params: any) => {
+        const list = Array.isArray(params) ? params : [params];
+        const head = `<div style="margin-bottom:6px;font-weight:600">${list[0]?.axisValue ?? ''}</div>`;
+        const body = list
+          .map((it: any) => {
+            const val =
+              it.seriesIndex === 0
+                ? `¥${formatMoney(it.value)}`
+                : `${it.value} 笔`;
+            return `<div style="display:flex;justify-content:space-between;gap:24px">${it.marker}${it.seriesName}<b>${val}</b></div>`;
+          })
+          .join('');
+        return head + body;
+      },
+    },
+    legend: {
+      top: 0,
+      right: 0,
+      icon: 'roundRect',
+      itemWidth: 12,
+      itemHeight: 6,
+      textStyle: { color: p.subText },
+    },
+    grid: { left: 8, right: 8, top: 40, bottom: 4, containLabel: true },
     xAxis: {
       type: 'category',
-      data: chartData.value.line.month,
-      axisLabel: { rotate: 45 },
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: { formatter: '¥{value}' },
+      boundaryGap: false,
+      data: labels,
+      axisLine: { lineStyle: { color: p.border } },
+      axisTick: { show: false },
+      axisLabel: { color: p.subText, hideOverlap: true },
     },
+    yAxis: [
+      {
+        type: 'value',
+        splitLine: { lineStyle: { color: p.splitLine, type: 'dashed' } },
+        axisLabel: {
+          color: p.subText,
+          formatter: (v: number) => `¥${formatAxisMoney(v)}`,
+        },
+      },
+      {
+        type: 'value',
+        minInterval: 1,
+        splitLine: { show: false },
+        axisLabel: { color: p.subText, formatter: '{value} 笔' },
+      },
+    ],
     series: [
       {
-        name: chartData.value.line.legend[0],
+        name: '销售金额',
         type: 'line',
-        smooth: true,
-        data: chartData.value.line.sale_money.map(Number),
+        smooth: 0.4,
+        showSymbol: false,
+        symbolSize: 8,
+        data: (line.sale_money || []).map(Number),
+        lineStyle: { width: 3, shadowBlur: 12, shadowColor: p.primarySoft },
         areaStyle: {
           color: {
             type: 'linear',
@@ -58,94 +205,180 @@ const initCharts = () => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(58,77,233,0.8)' },
-              { offset: 1, color: 'rgba(58,77,233,0.1)' },
+              { offset: 0, color: p.primarySoft },
+              { offset: 1, color: p.primaryFade },
             ],
           },
         },
-        lineStyle: { width: 3, color: '#3a4de9' },
-        itemStyle: { color: '#3a4de9' },
+        emphasis: { focus: 'series' },
+      },
+      {
+        name: '订单笔数',
+        type: 'line',
+        yAxisIndex: 1,
+        smooth: 0.4,
+        showSymbol: false,
+        symbolSize: 7,
+        data: (line.order_count || []).map(Number),
+        lineStyle: { width: 2, type: [6, 4] },
+        emphasis: { focus: 'series' },
       },
     ],
   });
+}
 
-  // 饼图
+/**
+ * 药品分类占比：环形图 + 中心总额（用 title 组件实现，插件没有注册 graphic）
+ */
+function renderDrugChart() {
+  const p = getChartPalette();
+  const list: any[] = chartData.value?.drug?.data || [];
+  const total = list.reduce((sum, it) => sum + Number(it.value || 0), 0);
   renderPie({
+    color: GLASS_SERIES_COLORS,
     tooltip: {
+      ...glassTooltip(p),
       trigger: 'item',
-      formatter: '{b}: ¥{c} ({d}%)',
+      formatter: (it: any) =>
+        `${it.marker}${it.name}<br/><b>¥${formatMoney(it.value)}</b>　${it.percent}%<br/>${it.data?.orders ?? 0} 笔订单`,
+    },
+    title: {
+      text:
+        list.length > 0 ? `¥${formatAxisMoney(Math.round(total))}` : '暂无数据',
+      subtext: list.length > 0 ? '分类合计' : '',
+      left: '34%',
+      top: '43%',
+      textAlign: 'center',
+      textStyle: { color: p.text, fontSize: 20, fontWeight: 700 },
+      subtextStyle: { color: p.subText, fontSize: 12 },
+      itemGap: 4,
+    },
+    legend: {
+      orient: 'vertical',
+      right: 8,
+      top: 'middle',
+      icon: 'circle',
+      itemWidth: 8,
+      itemGap: 14,
+      textStyle: { color: p.subText },
+      formatter: (name: string) => {
+        const hit = list.find((it) => it.name === name);
+        const pct =
+          total > 0 && hit
+            ? ((Number(hit.value) / total) * 100).toFixed(1)
+            : '0.0';
+        return `${name}  ${pct}%`;
+      },
     },
     series: [
       {
         type: 'pie',
-        radius: ['40%', '70%'],
-        data: chartData.value.drug.data.map((item) => ({
-          name: item.name,
-          value: Number.parseFloat(item.value),
+        radius: ['56%', '78%'],
+        center: ['35%', '50%'],
+        padAngle: 2,
+        avoidLabelOverlap: true,
+        itemStyle: { borderRadius: 8 },
+        label: { show: false },
+        emphasis: {
+          scale: true,
+          scaleSize: 6,
+          itemStyle: { shadowBlur: 16, shadowColor: p.primarySoft },
+        },
+        data: list.map((it) => ({
+          name: it.name,
+          value: Number(it.value),
+          orders: it.orders,
         })),
-        itemStyle: {
-          borderRadius: 5,
-          borderColor: '#fff',
-          borderWidth: 2,
-        },
-        label: {
-          formatter: '{b|{b}}\n{hr|}\n¥{d|{c}}',
-          rich: {
-            b: { fontSize: 14, lineHeight: 20 },
-            hr: {
-              borderColor: '#a8a8a8',
-              width: '100%',
-              borderWidth: 1,
-              height: 0,
-            },
-            d: { color: '#4c4c4c', fontSize: 12, padding: [5, 0] },
-          },
-        },
-        color: ['#36c6d9', '#659be0'],
       },
     ],
   });
+}
 
-  // 地图（这里使用柱状图替代）
+/**
+ * 地区销售分布：横向条形，后端已按金额倒序；倒置数组让第一名显示在最上方
+ */
+function renderRegionChart() {
+  const p = getChartPalette();
+  const names: string[] = [
+    ...(chartData.value?.address?.address || []),
+  ].reverse();
+  const money: number[] = [...(chartData.value?.address?.money || [])]
+    .map(Number)
+    .reverse();
   renderMap({
-    tooltip: { trigger: 'item', formatter: '¥{c}' },
+    tooltip: {
+      ...glassTooltip(p),
+      trigger: 'axis',
+      axisPointer: { type: 'shadow', shadowStyle: { color: p.primaryFade } },
+      formatter: (params: any) => {
+        const it = Array.isArray(params) ? params[0] : params;
+        return `${it.name}<br/><b>¥${formatMoney(it.value)}</b>`;
+      },
+    },
+    grid: { left: 8, right: 56, top: 8, bottom: 4, containLabel: true },
     xAxis: {
-      type: 'category',
-      data: chartData.value.address.address,
+      type: 'value',
+      splitLine: { lineStyle: { color: p.splitLine, type: 'dashed' } },
+      axisLabel: {
+        color: p.subText,
+        formatter: (v: number) => formatAxisMoney(v),
+      },
     },
     yAxis: {
-      type: 'value',
-      axisLabel: { formatter: '¥{value}' },
+      type: 'category',
+      data: names,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: p.text },
     },
     series: [
       {
         type: 'bar',
-        data: chartData.value.address.money.map(Number),
+        data: money,
+        barMaxWidth: 16,
+        showBackground: true,
+        backgroundStyle: { color: p.primaryFade, borderRadius: 8 },
         itemStyle: {
+          borderRadius: 8,
           color: {
             type: 'linear',
             x: 0,
             y: 0,
-            x2: 0,
-            y2: 1,
+            x2: 1,
+            y2: 0,
             colorStops: [
-              { offset: 0, color: '#36c6d9' },
-              { offset: 1, color: '#659be0' },
+              { offset: 0, color: GLASS_SERIES_COLORS[2] as string },
+              { offset: 1, color: p.primary },
             ],
           },
-          borderRadius: [5, 5, 0, 0],
         },
-        barWidth: '60%',
+        label: {
+          show: true,
+          position: 'right',
+          color: p.subText,
+          formatter: (it: any) => formatAxisMoney(Number(it.value)),
+        },
       },
     ],
   });
-};
+}
 
-// onMounted(() => {
-//   // initCharts();
-// });
+/** 三张图一起重绘（数据变化 / 主题切换都走这里） */
+function initCharts() {
+  if (!chartData.value) return;
+  renderTrendChart();
+  renderDrugChart();
+  renderRegionChart();
+}
+
+/**
+ * 主题切换后 CSS 变量已变，要重新读取配色再渲染；
+ * useEcharts 内部只会用旧 option 重绘，所以这里等它重建实例后再覆盖一次
+ */
+watch(isDark, () => {
+  nextTick(() => setTimeout(initCharts, 60));
+});
 
-// 时间选择器相关
 const searchTime = ref<[Dayjs, Dayjs]>(monthToTodayRangeDayjs());
 const searchTimeTouched = ref(false);
 
@@ -160,13 +393,23 @@ const handleTimeChange = (range?: [Dayjs, Dayjs] | null) => {
   getData();
 };
 
-const getData = () => {
-  getReconciliationChartApi({
-    search_time: searchTime.value,
-  }).then((res) => {
+/** 拉取看板数据；用请求序号丢弃过期响应，避免快速切换时间时旧数据覆盖新数据 */
+let requestSeq = 0;
+const getData = async () => {
+  const seq = ++requestSeq;
+  loading.value = true;
+  try {
+    const res = await getReconciliationChartApi({
+      search_time: searchTime.value,
+    });
+    if (seq !== requestSeq) return;
     chartData.value = res;
     initCharts();
-  });
+  } catch (error) {
+    console.error('获取财务可视化数据失败:', error);
+  } finally {
+    if (seq === requestSeq) loading.value = false;
+  }
 };
 
 const reload = () => {
@@ -187,112 +430,351 @@ getData();
 
 <template>
   <Page>
-    <!-- 搜索区域 -->
-    <div class="search-container">
-      <SearchTimeRangePicker
-        v-model:value="searchTime"
-        format="YYYY-MM-DD"
-        style="width: 100%; max-width: 420px"
-        @change="handleTimeChange"
-      />
-      <Button type="link" @click="getData">刷新</Button>
-      <Button type="link" @click="reload">重置</Button>
-    </div>
+    <div class="viz-page">
+      <!-- 背景氛围光：液态玻璃需要有色彩的底才能折射出层次 -->
+      <div class="viz-ambient" aria-hidden="true">
+        <span class="blob blob-a"></span>
+        <span class="blob blob-b"></span>
+        <span class="blob blob-c"></span>
+      </div>
 
-    <!-- 图表容器 -->
-    <div class="charts-grid">
-      <div class="chart-card">
-        <!-- 总金额展示 -->
-        <!--        <div class="total-money">-->
-        <!--          <span>总销售金额：</span>-->
-        <!--        </div>-->
-        <Card title="每日销售趋势">
-          <template #extra>
-            <div class="amount">
-              总销售金额：¥{{ chartData?.total_money || 0 }}
+      <header class="glass glass-header">
+        <div class="header-text">
+          <h2 class="header-title">
+            <IconifyIcon icon="lucide:chart-spline" class="header-icon" />
+            销售数据看板
+          </h2>
+          <p class="header-sub">{{ rangeText }}</p>
+        </div>
+        <div class="header-actions">
+          <SearchTimeRangePicker
+            v-model:value="searchTime"
+            format="YYYY-MM-DD"
+            class="header-picker"
+            @change="handleTimeChange"
+          />
+          <Button class="glass-btn" :loading="loading" @click="getData">
+            <template #icon><IconifyIcon icon="lucide:refresh-cw" /></template>
+            刷新
+          </Button>
+          <Button class="glass-btn" @click="reload">
+            <template #icon><IconifyIcon icon="lucide:rotate-ccw" /></template>
+            重置
+          </Button>
+        </div>
+      </header>
+
+      <Spin :spinning="loading" :delay="200">
+        <section class="kpi-grid">
+          <KpiGlassCard
+            v-for="card in kpiCards"
+            :key="card.key"
+            :label="card.label"
+            :value="card.value"
+            :prev-value="card.prevValue"
+            :rate="card.rate"
+            :icon="card.icon"
+            :kind="card.kind"
+            :tone="card.tone"
+            :unit="card.unit"
+          />
+        </section>
+
+        <section class="glass panel">
+          <div class="panel-head">
+            <div>
+              <div class="panel-title">销售趋势</div>
+              <div class="panel-sub">
+                {{ granularityText }}统计 · 金额与订单笔数
+              </div>
             </div>
-          </template>
-          <EchartsUI ref="lineChartRef" class="chart" />
-        </Card>
-      </div>
-    </div>
-    <!-- 图表容器 -->
-    <div class="charts-grid">
-      <div class="chart-card">
-        <Card title="药品销售占比">
-          <EchartsUI ref="pieChartRef" class="chart" />
-        </Card>
-      </div>
+            <div class="panel-extra">
+              <span class="extra-label">平均每{{ granularityText === '按月' ? '月' : '日' }}</span>
+              <span class="extra-value">¥{{ formatMoney(avgPerBucket) }}</span>
+            </div>
+          </div>
+          <EchartsUI ref="lineChartRef" class="chart chart-lg" />
+        </section>
 
-      <div class="chart-card">
-        <Card title="地区销售分布">
-          <EchartsUI ref="mapChartRef" class="chart" />
-        </Card>
-      </div>
+        <section class="panel-row">
+          <div class="glass panel">
+            <div class="panel-head">
+              <div>
+                <div class="panel-title">药品分类占比</div>
+                <div class="panel-sub">按销售金额</div>
+              </div>
+            </div>
+            <EchartsUI ref="pieChartRef" class="chart" />
+          </div>
+          <div class="glass panel">
+            <div class="panel-head">
+              <div>
+                <div class="panel-title">地区销售分布</div>
+                <div class="panel-sub">按门店所在省份汇总</div>
+              </div>
+            </div>
+            <EchartsUI ref="mapChartRef" class="chart" />
+          </div>
+        </section>
+
+        <section class="glass panel">
+          <div class="panel-head">
+            <div>
+              <div class="panel-title">门店销售排行</div>
+              <div class="panel-sub">Top 10 · 进度条为相对第一名的比例</div>
+            </div>
+          </div>
+          <StoreRankPanel
+            :items="chartData?.store_rank || []"
+            :total-money="Number(chartData?.kpi?.total_money || 0)"
+          />
+        </section>
+      </Spin>
     </div>
   </Page>
 </template>
 
 <style scoped>
-.search-container {
-  padding: 16px;
-  margin-bottom: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
+/*
+ * 液态玻璃变量：--glass-specular 是高光色（HSL 三元组），暗色下降低亮度让高光更含蓄
+ * 只在本页根节点定义，不污染全局主题变量
+ */
+.viz-page {
+  --glass-specular: 0 0% 100%;
 
-.total-money {
-  padding: 24px;
-  margin-bottom: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  text-align: center;
-}
-
-.total-money h3 {
-  color: #666;
-  margin-bottom: 8px;
-  font-size: 16px;
-}
-
-.amount {
-  color: #3a4de9;
-  font-weight: 600;
-}
-
-.charts-grid {
-  display: grid;
+  position: relative;
+  display: flex;
+  flex-direction: column;
   gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  isolation: isolate;
 }
 
-.chart-card {
-  padding: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+.dark .viz-page {
+  --glass-specular: 0 0% 62%;
 }
 
-.chart-card h4 {
-  margin: 0 0 12px 0;
-  color: #333;
+.viz-ambient {
+  position: absolute;
+  inset: -24px;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.55;
+  filter: blur(80px);
+  animation: blob-float 18s ease-in-out infinite alternate;
+}
+
+.blob-a {
+  top: -60px;
+  left: -40px;
+  width: 420px;
+  height: 420px;
+  background: hsl(var(--primary) / 35%);
+}
+
+.blob-b {
+  top: 260px;
+  right: -80px;
+  width: 380px;
+  height: 380px;
+  background: rgb(94 92 230 / 28%);
+  animation-delay: -6s;
+}
+
+.blob-c {
+  bottom: -80px;
+  left: 30%;
+  width: 460px;
+  height: 360px;
+  background: rgb(100 210 255 / 26%);
+  animation-delay: -12s;
+}
+
+@keyframes blob-float {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  100% {
+    transform: translate3d(40px, 30px, 0) scale(1.12);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .blob {
+    animation: none;
+  }
+}
+
+/* 通用玻璃面板：半透明底 + 模糊饱和 + 顶部内高光 + 1px 主色微光边框 */
+.glass {
+  position: relative;
+  background: linear-gradient(
+    150deg,
+    hsl(var(--card) / 68%),
+    hsl(var(--card) / 40%)
+  );
+  border: 1px solid hsl(var(--primary) / 16%);
+  border-radius: 22px;
+  box-shadow:
+    inset 0 1px 0 hsl(var(--glass-specular) / 55%),
+    inset 0 -1px 0 hsl(var(--glass-specular) / 10%),
+    0 0 6px hsl(var(--primary) / 8%),
+    0 12px 36px hsl(var(--foreground) / 6%);
+  backdrop-filter: blur(28px) saturate(180%);
+}
+
+.glass-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 22px;
+}
+
+.header-title {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: hsl(var(--foreground));
+  letter-spacing: -0.01em;
+}
+
+.header-icon {
+  font-size: 20px;
+  color: hsl(var(--primary));
+}
+
+.header-sub {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.header-picker {
+  width: 380px;
+  max-width: 100%;
+}
+
+/* 胶囊玻璃按钮：覆盖 antd 默认实底，保持与面板同一质感 */
+.glass-btn {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  color: hsl(var(--foreground));
+  background: hsl(var(--card) / 55%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 999px;
+  box-shadow: inset 0 1px 0 hsl(var(--glass-specular) / 45%);
+  backdrop-filter: blur(12px);
+}
+
+.glass-btn:hover {
+  color: hsl(var(--primary)) !important;
+  border-color: hsl(var(--primary) / 40%) !important;
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.panel {
+  padding: 18px 20px 14px;
+  margin-bottom: 16px;
+}
+
+.panel-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.panel-title {
   font-size: 15px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.panel-sub {
+  margin-top: 2px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.panel-extra {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 6px 12px;
+  background: hsl(var(--primary) / 8%);
+  border: 1px solid hsl(var(--primary) / 18%);
+  border-radius: 12px;
+}
+
+.extra-label {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+.extra-value {
+  font-size: 15px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: hsl(var(--primary));
 }
 
 .chart {
-  height: 400px;
+  height: 340px;
+}
+
+.chart-lg {
+  height: 380px;
+}
+
+@media (max-width: 1200px) {
+  .kpi-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .panel-row {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 768px) {
-  .charts-grid {
+  .kpi-grid {
     grid-template-columns: 1fr;
   }
 
-  .chart {
+  .chart,
+  .chart-lg {
     height: 300px;
   }
-
-  .amount {
-    font-size: 24px;
-  }
 }
 </style>
diff --git a/apps/web-antd/src/views/finance/visualization-chart/utils/chart-theme.ts b/apps/web-antd/src/views/finance/visualization-chart/utils/chart-theme.ts
new file mode 100644
index 00000000..a627878c
--- /dev/null
+++ b/apps/web-antd/src/views/finance/visualization-chart/utils/chart-theme.ts
@@ -0,0 +1,83 @@
+/**
+ * 财务可视化 · 图表主题工具
+ * ECharts 不认识 Tailwind/Vben 的 `--xxx: 212 100% 45%` 变量写法，也不支持空格分隔的 hsl()，
+ * 所以在渲染时读取 CSS 变量并转换成 `hsla(h, s, l, a)`，保证亮/暗主题切换后坐标轴文字、分割线可读
+ */
+
+/** 系列配色：取自 Apple 系统色，亮暗两套底色上都有足够对比度 */
+export const GLASS_SERIES_COLORS = [
+  '#0A84FF',
+  '#5E5CE6',
+  '#64D2FF',
+  '#30D158',
+  '#FF9F0A',
+  '#FF375F',
+  '#BF5AF2',
+  '#FFD60A',
+];
+
+/**
+ * 读取主题 CSS 变量并转成 ECharts 可用的 hsla 颜色
+ * @param name 变量名（不带 --），如 primary / muted-foreground
+ * @param alpha 透明度 0~1
+ * @param fallback 变量不存在时的兜底色（SSR / 变量未注入）
+ */
+export function themeColor(name: string, alpha = 1, fallback = '#888') {
+  if (typeof window === 'undefined') return fallback;
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue(`--${name}`)
+    .trim();
+  if (!raw) return fallback;
+  const [h, s, l] = raw.split(/\s+/);
+  if (!h || !s || !l) return fallback;
+  return `hsla(${h}, ${s}, ${l}, ${alpha})`;
+}
+
+/**
+ * 一次性取出图表通用的轴/提示框配色，避免每个图表重复读 CSS 变量
+ */
+export function getChartPalette() {
+  return {
+    primary: themeColor('primary', 1, '#0A84FF'),
+    primarySoft: themeColor('primary', 0.28, 'rgba(10,132,255,0.28)'),
+    primaryFade: themeColor('primary', 0.02, 'rgba(10,132,255,0.02)'),
+    text: themeColor('foreground', 0.85, '#333'),
+    subText: themeColor('muted-foreground', 1, '#888'),
+    border: themeColor('border', 1, '#e5e5e5'),
+    splitLine: themeColor('border', 0.6, 'rgba(0,0,0,0.06)'),
+    tooltipBg: themeColor('card', 0.82, 'rgba(255,255,255,0.82)'),
+  };
+}
+
+/**
+ * 玻璃风 tooltip：半透明底 + 背景模糊 + 圆角，与页面卡片质感一致
+ */
+export function glassTooltip(palette: ReturnType<typeof getChartPalette>) {
+  return {
+    backgroundColor: palette.tooltipBg,
+    borderColor: palette.border,
+    borderWidth: 1,
+    padding: [10, 14],
+    textStyle: { color: palette.text, fontSize: 12 },
+    extraCssText:
+      'backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);',
+  };
+}
+
+/** 金额千分位，保留 2 位小数 */
+export function formatMoney(val: null | number | string | undefined) {
+  const n = Number(val ?? 0);
+  if (!Number.isFinite(n)) return '0.00';
+  return n.toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+/** 坐标轴金额缩写：1.2万 / 3.4亿，避免长数字挤压 Y 轴 */
+export function formatAxisMoney(val: number) {
+  const abs = Math.abs(val);
+  if (abs >= 1e8) return `${(val / 1e8).toFixed(1)}亿`;
+  if (abs >= 1e4) return `${(val / 1e4).toFixed(1)}万`;
+  return String(val);
+}
diff --git a/apps/web-antd/src/views/finance/withdrawal/components/settlement-detail-drawer.vue b/apps/web-antd/src/views/finance/withdrawal/components/settlement-detail-drawer.vue
index 96232ab0..3007de7e 100644
--- a/apps/web-antd/src/views/finance/withdrawal/components/settlement-detail-drawer.vue
+++ b/apps/web-antd/src/views/finance/withdrawal/components/settlement-detail-drawer.vue
@@ -6,11 +6,12 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { Descriptions, Spin, Table } from 'ant-design-vue';
 
 import { getSettlementLedgerDetail } from '#/views/finance/withdrawal/api/settlement';
+import { getStoreSettlementLedgerDetailApi } from '#/views/system/store/api';
 
 const loading = ref(false);
 const detail = ref<{
   items: Record<string, any>[];
-  ledger_log: Record<string, any> | null;
+  ledger_log: null | Record<string, any>;
   order_id: number;
   order_no: string;
   order_type: number;
@@ -54,6 +55,8 @@ async function loadDetail() {
     merged?: boolean;
     order_id?: number;
     order_type?: number;
+    /** 诊所详情传入时走门店主体接口，避免超管登录态查不到该店分账 */
+    storeId?: number;
   }>();
   if (!data) {
     return;
@@ -61,11 +64,18 @@ async function loadDetail() {
 
   loading.value = true;
   try {
-    const params =
+    const baseParams =
       data.merged && data.order_id && data.order_type
         ? { order_id: data.order_id, order_type: data.order_type }
         : { ledger_log_id: data.ledger_log_id };
-    const res = await getSettlementLedgerDetail(params);
+    const storeId = Number(data.storeId || 0);
+    const res =
+      storeId > 0
+        ? await getStoreSettlementLedgerDetailApi({
+            id: storeId,
+            ...baseParams,
+          })
+        : await getSettlementLedgerDetail(baseParams);
     detail.value = res || detail.value;
   } finally {
     loading.value = false;
@@ -73,12 +83,17 @@ async function loadDetail() {
 }
 
 defineExpose({
-  open(row: Record<string, any>) {
+  /**
+   * @param row 结算记录行
+   * @param options.storeId 诊所详情场景传入门店 ID
+   */
+  open(row: Record<string, any>, options?: { storeId?: number }) {
     drawerApi.setData({
       ledger_log_id: row.id,
       merged: row.merged,
       order_id: row.order_id,
       order_type: row.order_type,
+      storeId: options?.storeId,
     });
     drawerApi.open();
   },
diff --git a/apps/web-antd/src/views/finance/withdrawal/config/account-change-search.ts b/apps/web-antd/src/views/finance/withdrawal/config/account-change-search.ts
index b680b17b..b5d5291c 100644
--- a/apps/web-antd/src/views/finance/withdrawal/config/account-change-search.ts
+++ b/apps/web-antd/src/views/finance/withdrawal/config/account-change-search.ts
@@ -5,20 +5,24 @@ import { useUserStore } from '@vben/stores';
 /**
  * 资金变动筛选：门店现金账户无 frozen（未确认收货），筛选项需按角色裁剪
  * 须在组件 setup 内调用，保证 Pinia 已就绪
+ * @param options.forceStore 诊所详情等「固定看门店主体」场景强制按门店裁剪，避免超管态误出 frozen
  */
-export function getAccountChangeSearchOptions(): VbenFormProps {
+export function getAccountChangeSearchOptions(options?: {
+  forceStore?: boolean;
+}): VbenFormProps {
   const userStore = useUserStore();
   const isStoreUser =
+    options?.forceStore === true ||
     Number(
-      (userStore.userInfo as Record<string, any> | null)?.roles?.user_type,
+      (userStore.userInfo as null | Record<string, any>)?.roles?.user_type,
     ) === 1;
   const fieldNameOptions = [
     { label: '可提现金额', value: 'able_cash' },
     { label: '可提现余额', value: 'balance' },
     // 仅供应商/配送仓余额账户有「确认收货前冻结」
-    ...(!isStoreUser
-      ? [{ label: '冻结金额（用户未确认收货）', value: 'frozen' }]
-      : []),
+    ...(isStoreUser
+      ? []
+      : [{ label: '冻结金额（用户未确认收货）', value: 'frozen' }]),
     { label: '审核中金额', value: 'frozen_cash' },
     { label: '审核中金额（余额账户）', value: 'withdrawn_frozen' },
   ];
diff --git a/apps/web-antd/src/views/log/api-log-history/api/index.ts b/apps/web-antd/src/views/log/api-log-history/api/index.ts
new file mode 100644
index 00000000..7c9d34ff
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-log-history/api/index.ts
@@ -0,0 +1,20 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'log/';
+
+/**
+ * Api 访问历史日志接口（xk-api，读 xk_api_op_log_history）
+ * 取值：code / result / message
+ */
+
+/** 分页查询历史日志 xk-api GET /log/api-history-list */
+export async function getApiOpLogHistoryList(data: any) {
+  return requestClient.get<any>(`${prefix}api-history-list`, { params: data });
+}
+
+/** 单条历史详情（含 param/result）xk-api GET /log/api-history-detail */
+export async function getApiOpLogHistoryDetail(id: number) {
+  return requestClient.get<any>(`${prefix}api-history-detail`, {
+    params: { id },
+  });
+}
diff --git a/apps/web-antd/src/views/log/api-log-history/components/modal.vue b/apps/web-antd/src/views/log/api-log-history/components/modal.vue
new file mode 100644
index 00000000..ad385db3
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-log-history/components/modal.vue
@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+/**
+ * Api 访问历史日志详情弹窗
+ * 列表不带大 JSON，打开时按历史表 id 再拉详情；操作人只用 xk_admin / 患者，不兼容 oldadmin
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Descriptions, Spin } from 'ant-design-vue';
+
+import { Icon } from '#/components/icon';
+import { getIcon } from '#/util/tool';
+
+import {
+  getApiOpLogOperatorLabel,
+  getApiOpLogPlatformLabel,
+} from '../../api-log/config/platform';
+import { getApiOpLogHistoryDetail } from '../api';
+
+const gridApi = ref();
+const data = ref<Record<string, any>>({});
+const loading = ref(false);
+
+/** 列表行没有 param/result，打开时按 id 拉详情；解析失败则原样展示 */
+function formatJson(raw: unknown) {
+  if (raw == null || raw === '') return '';
+  if (typeof raw === 'object') return raw;
+  try {
+    return JSON.parse(String(raw));
+  } catch {
+    return raw;
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (!isOpen) return;
+    const { values } = modalApi.getData<Record<string, any>>();
+    data.value = values || {};
+    const id = Number(values?.id || 0);
+    if (!id) return;
+    loading.value = true;
+    try {
+      data.value = (await getApiOpLogHistoryDetail(id)) || values || {};
+    } catch (error) {
+      console.error(error);
+    } finally {
+      loading.value = false;
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[80%] h-[80%]" title="Api访问历史日志详情">
+    <Spin :spinning="loading">
+      <div class="flex flex-col gap-4">
+        <Descriptions
+          :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }"
+          bordered
+        >
+          <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
+          <Descriptions.Item label="接口名称">
+            {{ data.url_title || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="接口说明">
+            {{ data.url_description || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="是否鉴权">
+            <span v-if="data.url_need_auth === 1">需要鉴权</span>
+            <span v-else-if="data.url_need_auth === 0">无需鉴权</span>
+            <span v-else>-</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="操作人员">
+            <span>{{ getApiOpLogOperatorLabel(data) }}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="URL">{{ data.url }}</Descriptions.Item>
+          <Descriptions.Item label="请求方式">
+            <span v-if="data.method === 1">GET</span>
+            <span v-else-if="data.method === 2">POST</span>
+            <span v-else>未知</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="控制器">
+            {{ data.controller }}
+          </Descriptions.Item>
+          <Descriptions.Item label="IP">
+            IP地址：{{ data.ip }}
+            <p>归属地：{{ data.ip_address }}</p>
+          </Descriptions.Item>
+          <Descriptions.Item label="类型">
+            {{ data.type === 0 ? '访问成功' : '访问失败' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="返回结果代码">
+            {{ data.result_code }}
+          </Descriptions.Item>
+          <Descriptions.Item label="接口来源">
+            <span>{{ getApiOpLogPlatformLabel(data.platform_type) }}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="设备">
+            <Icon :icon="getIcon(data.equipment)" :size="20" />
+            {{ data.equipment }}
+          </Descriptions.Item>
+          <Descriptions.Item label="浏览器">
+            <Icon :icon="getIcon(data.browser)" :size="20" />
+            {{ data.browser }}
+          </Descriptions.Item>
+          <Descriptions.Item label="所属平台">
+            {{ data.platform?.name || '未绑定' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="访问时间">
+            {{ data.created_at }}
+          </Descriptions.Item>
+          <Descriptions.Item label="归档时间">
+            {{ data.archived_at }}
+          </Descriptions.Item>
+        </Descriptions>
+        <Descriptions
+          :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
+          bordered
+        >
+          <Descriptions.Item label="参数">
+            <pre>{{ formatJson(data.param) }}</pre>
+          </Descriptions.Item>
+          <Descriptions.Item label="结果">
+            <pre>{{ formatJson(data.result) }}</pre>
+          </Descriptions.Item>
+        </Descriptions>
+      </div>
+    </Spin>
+  </Modal>
+</template>
+
+<style scoped>
+.ant-descriptions-item-label {
+  font-weight: bold;
+}
+
+pre {
+  padding: 8px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  border-radius: 4px;
+}
+</style>
diff --git a/apps/web-antd/src/views/log/api-log-history/config/search.ts b/apps/web-antd/src/views/log/api-log-history/config/search.ts
new file mode 100644
index 00000000..231d18fd
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-log-history/config/search.ts
@@ -0,0 +1,72 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+/**
+ * 历史日志搜索：端由页面 Tab 控制。
+ * 抽出 Grid 后必须显式多列栅格，否则默认一行一个字段占满屏。
+ */
+export const formOptions: VbenFormProps = {
+  collapsed: false,
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  wrapperClass:
+    'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'platform_type',
+      label: '端',
+      dependencies: {
+        show: false,
+        triggerFields: ['platform_type'],
+      },
+    },
+    {
+      component: 'ApiLogUserPicker',
+      fieldName: 'user_filter',
+      label: '操作用户',
+      dependencies: {
+        show: true,
+        triggerFields: ['user_filter'],
+      },
+    },
+    {
+      // 接诊式：标题/首拼/全拼搜索，选中回填 url；platformType 由页面 Tab 注入
+      component: 'ApiLogRoutePicker',
+      fieldName: 'router',
+      label: 'api接口',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: 'GET', value: 1 },
+          { label: 'POST', value: 2 },
+        ],
+        placeholder: '全部',
+      },
+      fieldName: 'method',
+      label: '请求方式',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+      fieldName: 'search_time',
+      label: '时间范围',
+    },
+  ],
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  submitOnChange: false,
+  submitOnEnter: true,
+};
diff --git a/apps/web-antd/src/views/log/api-log-history/config/table.ts b/apps/web-antd/src/views/log/api-log-history/config/table.ts
new file mode 100644
index 00000000..3a27382d
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-log-history/config/table.ts
@@ -0,0 +1,100 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getApiOpLogHistoryList } from '../api';
+
+interface RowType {
+  id: string;
+  admin: string;
+  url: string;
+  url_title: string;
+  ip: string;
+  type: string;
+  created_at: string;
+  archived_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    {
+      field: 'url_title',
+      title: '接口名称',
+      minWidth: 120,
+      slots: { default: 'url_title' },
+    },
+    {
+      field: 'admin',
+      align: 'left',
+      title: '操作管理员',
+      slots: { default: 'admin' },
+    },
+    { field: 'url', title: '访问路由', minWidth: 180 },
+    {
+      field: 'method',
+      title: '请求方式',
+      slots: { default: 'method' },
+      width: 90,
+    },
+    { field: 'ip', title: '用户IP地址' },
+    { field: 'ip_address', title: 'IP归属地' },
+    { field: 'controller', title: '访问控制器' },
+    {
+      field: 'equipment',
+      title: '操作系统',
+      slots: { default: 'equipment' },
+      width: 80,
+    },
+    {
+      field: 'browser',
+      title: '浏览器',
+      slots: { default: 'browser' },
+      width: 80,
+    },
+    { field: 'type', title: '操作简述', slots: { default: 'type' } },
+    { field: 'created_at', title: '访问时间' },
+    { field: 'archived_at', title: '归档时间', width: 170 },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        const { user_filter, ...rest } = formValues || {};
+        return await getApiOpLogHistoryList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...rest,
+          user_id: user_filter?.id,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // @ts-expect-error
+    search: true,
+    refresh: true,
+    print: false,
+    export: false,
+    zoom: true,
+    slots: {
+      buttons: 'toolbar-actions',
+    },
+    custom: {
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};
diff --git a/apps/web-antd/src/views/log/api-log-history/index.vue b/apps/web-antd/src/views/log/api-log-history/index.vue
new file mode 100644
index 00000000..1f0baf3f
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-log-history/index.vue
@@ -0,0 +1,272 @@
+<script lang="ts" setup>
+/**
+ * Api 访问历史日志：按端 Tab；列表/卡片双视图共用顶部搜索。
+ * Tab 写入的 platform_type 随请求参数区分各端数据。
+ */
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Tabs, Tag } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Icon } from '#/components/icon';
+import { TableAction } from '#/components/table-action';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import { getIcon } from '#/util/tool';
+
+import ApiOpLogCardList from '../api-log/components/ApiOpLogCardList.vue';
+import {
+  API_OP_LOG_PLATFORM_OPTIONS,
+  getApiOpLogOperatorLabel,
+} from '../api-log/config/platform';
+import { normalizeApiOpLogFilters } from '../api-log/utils/filters';
+import { getApiOpLogHistoryList } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions as baseGridOptions } from './config/table';
+
+defineOptions({ name: 'ApiOpLogHistory' });
+
+const TAB_STORAGE_KEY = 'api_op_log_history_platform_tab';
+const TabPane = Tabs.TabPane;
+
+function readStoredTab(): number {
+  const raw = localStorage.getItem(TAB_STORAGE_KEY);
+  const n = raw === null ? 0 : Number(raw);
+  return API_OP_LOG_PLATFORM_OPTIONS.some((o) => o.value === n) ? n : 0;
+}
+
+const activePlatform = ref<number>(readStoredTab());
+const viewMode = useViewMode('api-op-log-history-view-mode');
+const cardListRef = ref<InstanceType<typeof ApiOpLogCardList> | null>(null);
+
+const userTypeByPlatform = computed(() => {
+  const map: Record<number, 'admin' | 'doctor' | 'patient' | null> = {
+    0: 'admin',
+    1: 'patient',
+    2: 'doctor',
+    3: null,
+  };
+  return map[activePlatform.value] ?? 'admin';
+});
+
+const showUserPicker = computed(() => userTypeByPlatform.value !== null);
+
+function collectDefaultSearchValues(): Record<string, any> {
+  const values: Record<string, any> = {
+    platform_type: activePlatform.value,
+  };
+  for (const item of formOptions.schema ?? []) {
+    if (item.fieldName && item.defaultValue !== undefined) {
+      values[item.fieldName] = item.defaultValue;
+    }
+  }
+  return values;
+}
+
+const searchValues = ref<Record<string, any>>(collectDefaultSearchValues());
+const cardFilters = computed(() =>
+  normalizeApiOpLogFilters(searchValues.value),
+);
+
+async function readLiveSearchValues(): Promise<Record<string, any>> {
+  try {
+    await nextTick();
+    const live = await searchFormApi.getValues();
+    return {
+      ...live,
+      platform_type: activePlatform.value,
+    };
+  } catch {
+    return {
+      ...searchValues.value,
+      platform_type: activePlatform.value,
+    };
+  }
+}
+
+const [SearchForm, searchFormApi] = useVbenForm({
+  ...formOptions,
+  handleSubmit: async () => {
+    searchValues.value = await readLiveSearchValues();
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    }
+  },
+  handleReset: async () => {
+    await searchFormApi.reset();
+    await applyTabToForm();
+    searchValues.value = await readLiveSearchValues();
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    }
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    ...baseGridOptions,
+    toolbarConfig: {
+      ...baseGridOptions.toolbarConfig,
+      search: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({
+          page,
+        }: {
+          page: { currentPage: number; pageSize: number };
+        }) => {
+          searchValues.value = await readLiveSearchValues();
+          return await getApiOpLogHistoryList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...normalizeApiOpLogFilters(searchValues.value),
+          });
+        },
+      },
+    },
+  },
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+async function applyTabToForm() {
+  const ut = userTypeByPlatform.value;
+  await searchFormApi.updateSchema([
+    {
+      fieldName: 'user_filter',
+      dependencies: {
+        show: showUserPicker.value,
+        triggerFields: ['user_filter'],
+      },
+      componentProps: {
+        userType: ut || 'admin',
+        platformType: (activePlatform.value === 3
+          ? 0
+          : activePlatform.value) as 0 | 1 | 2,
+      },
+    },
+    {
+      fieldName: 'router',
+      componentProps: {
+        platformType: activePlatform.value,
+      },
+    },
+  ]);
+  await searchFormApi.setFieldValue('platform_type', activePlatform.value);
+  await searchFormApi.setFieldValue('user_filter', undefined);
+  await searchFormApi.setFieldValue('router', undefined);
+}
+
+async function refreshCurrentViewFromPageOne() {
+  searchValues.value = await readLiveSearchValues();
+  if (viewMode.value === 'list') {
+    gridApi.reload();
+  } else {
+    await cardListRef.value?.reload?.();
+  }
+}
+
+watch(activePlatform, async (val) => {
+  localStorage.setItem(TAB_STORAGE_KEY, String(val));
+  await applyTabToForm();
+  await refreshCurrentViewFromPageOne();
+});
+
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    gridApi.query();
+  }
+});
+
+onMounted(async () => {
+  await applyTabToForm();
+  searchValues.value = await readLiveSearchValues();
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+async function fetchCardList(params: Record<string, any>) {
+  return await getApiOpLogHistoryList(params);
+}
+</script>
+
+<template>
+  <Page auto-content-height title="Api访问历史日志">
+    <Tabs v-model:active-key="activePlatform" class="mb-3">
+      <TabPane
+        v-for="item in API_OP_LOG_PLATFORM_OPTIONS"
+        :key="item.value"
+        :tab="item.label"
+      />
+    </Tabs>
+    <FormModal />
+    <div
+      class="mb-3 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+    >
+      <SearchForm />
+    </div>
+    <div class="mb-3 flex flex-wrap items-center gap-2">
+      <ViewModeSwitch v-model="viewMode" />
+    </div>
+    <Grid v-if="viewMode === 'list'">
+      <template #toolbar-actions></template>
+      <template #url_title="{ row }">
+        <span>{{ row.url_title || '-' }}</span>
+      </template>
+      <template #type="{ row }">
+        <Tag v-if="row.type === 0" color="green"> 访问成功 </Tag>
+        <Tag v-else color="red"> 访问失败 </Tag>
+      </template>
+      <template #admin="{ row }">
+        <span>{{ getApiOpLogOperatorLabel(row) }}</span>
+      </template>
+      <template #method="{ row }">
+        <Tag v-if="row.method === 1" color="blue">GET</Tag>
+        <Tag v-else-if="row.method === 2" color="green">POST</Tag>
+        <Tag v-else color="default">未知</Tag>
+      </template>
+      <template #toolbar-tools></template>
+      <template #equipment="{ row }">
+        <Icon :icon="getIcon(row.equipment)" :size="20" />
+      </template>
+      <template #browser="{ row }">
+        <Icon :icon="getIcon(row.browser)" :size="20" />
+      </template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              onClick: showModal.bind(null, row, true),
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+    <ApiOpLogCardList
+      v-else
+      ref="cardListRef"
+      :filters="cardFilters"
+      :fetch-list="fetchCardList"
+      show-archived-at
+      @detail="(row) => showModal(row, true)"
+    />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/log/api-log/api/index.ts b/apps/web-antd/src/views/log/api-log/api/index.ts
index 99f86e08..29a65256 100644
--- a/apps/web-antd/src/views/log/api-log/api/index.ts
+++ b/apps/web-antd/src/views/log/api-log/api/index.ts
@@ -3,12 +3,12 @@ import { requestClient } from '#/api/request';
 const prefix = 'log/';
 
 export type ApiLogUserSearchItem = {
+  avatar: string;
   id: number;
   name: string;
-  avatar: string;
-  role_label: string;
-  user_type: 'admin' | 'patient' | 'doctor';
   platform_type: 0 | 1 | 2;
+  role_label: string;
+  user_type: 'admin' | 'doctor' | 'patient';
 };
 
 /**
@@ -27,11 +27,13 @@ export async function getApiOpLogDetail(id: number) {
 
 /**
  * Api 访问日志操作用户搜索
+ * search_mode=id 精确按 ID；search_mode=text 按姓名/手机号模糊（与 ID 互不混搜）
  */
 export async function searchApiLogUsers(params: {
-  user_type: 'admin' | 'patient' | 'doctor';
   keyword: string;
   pageSize?: number;
+  search_mode: 'id' | 'text';
+  user_type: 'admin' | 'doctor' | 'patient';
 }) {
   return requestClient.get<{ items: ApiLogUserSearchItem[] }>(
     `${prefix}user-search`,
diff --git a/apps/web-antd/src/views/log/api-log/components/ApiOpLogCardList.vue b/apps/web-antd/src/views/log/api-log/components/ApiOpLogCardList.vue
new file mode 100644
index 00000000..40248dfa
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-log/components/ApiOpLogCardList.vue
@@ -0,0 +1,288 @@
+<script lang="ts" setup>
+/**
+ * Api 访问日志卡片看板：字段与列表对齐，分页由页面统一滚动。
+ * 现网/历史共用本组件，通过 fetchList 注入不同接口；历史多展示归档时间。
+ */
+import { ref, watch } from 'vue';
+
+import { Button, Empty, Pagination, Spin, Tag } from 'ant-design-vue';
+
+import { Icon } from '#/components/icon';
+import { getIcon } from '#/util/tool';
+
+import { getApiOpLogOperatorLabel } from '../config/platform';
+
+const props = defineProps<{
+  /** 分页拉取函数，返回 { items, total } */
+  fetchList: (params: Record<string, any>) => Promise<{
+    items?: any[];
+    total?: number;
+  }>;
+  /** 已 normalize 的筛选（含 platform_type，不含 page） */
+  filters: Record<string, any>;
+  /** 历史日志展示归档时间 */
+  showArchivedAt?: boolean;
+}>();
+
+const emit = defineEmits<{
+  detail: [row: Record<string, any>];
+}>();
+
+const items = ref<any[]>([]);
+const page = ref(1);
+const pageSize = ref(12);
+const total = ref(0);
+const loading = ref(false);
+/** 只应用最后一次响应，避免筛选连点时旧结果覆盖 */
+let requestSeq = 0;
+
+async function fetchPage(targetPage: number) {
+  const seq = ++requestSeq;
+  loading.value = true;
+  try {
+    const res = await props.fetchList({
+      page: targetPage,
+      pageSize: pageSize.value,
+      ...props.filters,
+    });
+    if (seq !== requestSeq) return;
+    items.value = res?.items ?? [];
+    page.value = targetPage;
+    total.value = Number(res?.total ?? 0);
+  } catch (error) {
+    if (seq !== requestSeq) return;
+    console.error(error);
+    items.value = [];
+    total.value = 0;
+  } finally {
+    if (seq === requestSeq) {
+      loading.value = false;
+    }
+  }
+}
+
+async function reload() {
+  page.value = 1;
+  await fetchPage(1);
+}
+
+async function refreshKeepPage() {
+  await fetchPage(page.value);
+}
+
+defineExpose({ reload, refreshKeepPage });
+
+watch(
+  () => props.filters,
+  () => {
+    void reload();
+  },
+  { deep: true, immediate: true },
+);
+
+async function onPageChange(nextPage: number, nextSize: number) {
+  if (nextSize === pageSize.value) {
+    page.value = nextPage;
+  } else {
+    pageSize.value = nextSize;
+    page.value = 1;
+  }
+  await fetchPage(page.value);
+}
+
+function methodTag(method: number) {
+  if (method === 1) return { color: 'blue', text: 'GET' };
+  if (method === 2) return { color: 'green', text: 'POST' };
+  return { color: 'default', text: '未知' };
+}
+</script>
+
+<template>
+  <div class="api-log-card-scroll">
+    <Spin :spinning="loading">
+      <Empty v-if="!items.length && !loading" description="暂无访问日志" />
+      <div v-else class="api-log-card-grid">
+        <div v-for="row in items" :key="row.id" class="api-log-card">
+          <div class="api-log-card__head">
+            <div class="min-w-0 flex-1">
+              <div class="api-log-card__title">
+                {{ row.url_title || '未命名接口' }}
+              </div>
+              <div class="api-log-card__url" :title="row.url">
+                {{ row.url || '—' }}
+              </div>
+            </div>
+            <div class="flex shrink-0 flex-col items-end gap-1">
+              <Tag :color="methodTag(Number(row.method)).color">
+                {{ methodTag(Number(row.method)).text }}
+              </Tag>
+              <Tag v-if="Number(row.type) === 0" color="green">访问成功</Tag>
+              <Tag v-else color="red">访问失败</Tag>
+            </div>
+          </div>
+          <div class="api-log-card__body">
+            <div class="api-log-card__row">
+              <span class="api-log-card__label">操作人</span>
+              <span>{{ getApiOpLogOperatorLabel(row) }}</span>
+            </div>
+            <div class="api-log-card__row">
+              <span class="api-log-card__label">IP</span>
+              <span>
+                {{ row.ip || '—' }}
+                <span
+                  v-if="row.ip_address"
+                  class="text-[hsl(var(--muted-foreground))]"
+                >
+                  （{{ row.ip_address }}）
+                </span>
+              </span>
+            </div>
+            <div class="api-log-card__row">
+              <span class="api-log-card__label">控制器</span>
+              <span class="truncate" :title="row.controller">
+                {{ row.controller || '—' }}
+              </span>
+            </div>
+            <div class="api-log-card__meta">
+              <span class="inline-flex items-center gap-1">
+                <Icon :icon="getIcon(row.equipment)" :size="16" />
+                <Icon :icon="getIcon(row.browser)" :size="16" />
+              </span>
+              <span>#{{ row.id }}</span>
+            </div>
+            <div class="api-log-card__meta">
+              <span>访问 {{ row.created_at || '—' }}</span>
+              <span v-if="showArchivedAt">
+                归档 {{ row.archived_at || '—' }}
+              </span>
+            </div>
+          </div>
+          <div class="api-log-card__foot">
+            <Button
+              type="link"
+              size="small"
+              class="!px-0"
+              @click="emit('detail', row)"
+            >
+              查看
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div v-if="total > 0" class="mt-4 flex justify-end">
+        <Pagination
+          :current="page"
+          :page-size="pageSize"
+          :page-size-options="['12', '24', '48']"
+          :total="total"
+          show-quick-jumper
+          show-size-changer
+          @change="onPageChange"
+        />
+      </div>
+    </Spin>
+  </div>
+</template>
+
+<style scoped>
+.api-log-card-scroll {
+  padding: 4px 2px 8px;
+}
+
+.api-log-card-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+}
+
+@media (min-width: 768px) {
+  .api-log-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .api-log-card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* 强调用同色边框+微光，禁止左侧竖色条 */
+.api-log-card {
+  display: flex;
+  flex-direction: column;
+  background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--primary) / 30%);
+  border-radius: 12px;
+  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+}
+
+.api-log-card:hover {
+  border-color: hsl(var(--primary) / 45%);
+  box-shadow: 0 0 8px hsl(var(--primary) / 22%);
+}
+
+.api-log-card__head {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.api-log-card__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.api-log-card__url {
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+}
+
+.api-log-card__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 16px;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+}
+
+.api-log-card__row {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.api-log-card__label {
+  flex-shrink: 0;
+  width: 3.5em;
+  color: hsl(var(--muted-foreground));
+}
+
+.api-log-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: space-between;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.api-log-card__foot {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 12px 8px;
+  border-top: 1px solid hsl(var(--border));
+}
+</style>
diff --git a/apps/web-antd/src/views/log/api-log/components/modal.vue b/apps/web-antd/src/views/log/api-log/components/modal.vue
index e6361ff3..31ce55d2 100644
--- a/apps/web-antd/src/views/log/api-log/components/modal.vue
+++ b/apps/web-antd/src/views/log/api-log/components/modal.vue
@@ -7,6 +7,7 @@ import { Descriptions, Spin } from 'ant-design-vue';
 
 import { Icon } from '#/components/icon';
 import { getIcon } from '#/util/tool';
+
 import { getApiOpLogDetail } from '../api';
 import {
   getApiOpLogOperatorLabel,
@@ -59,64 +60,75 @@ const [Modal, modalApi] = useVbenModal({
 <template>
   <Modal class="w-[80%] h-[80%]" title="Api访问日志详情">
     <Spin :spinning="loading">
-    <div class="flex flex-col gap-4">
-      <Descriptions
-        :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }"
-        bordered
-      >
-        <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
-        <Descriptions.Item label="操作人员">
-          <span>{{ getApiOpLogOperatorLabel(data) }}</span>
-        </Descriptions.Item>
-        <Descriptions.Item label="URL">{{ data.url }}</Descriptions.Item>
-        <Descriptions.Item label="请求方式">
-          <span v-if="data.method === 1">GET</span>
-          <span v-else-if="data.method === 2">POST</span>
-          <span v-else>未知</span>
-        </Descriptions.Item>
-        <Descriptions.Item label="控制器">
-          {{ data.controller }}
-        </Descriptions.Item>
-        <Descriptions.Item label="IP">
-          IP地址：{{ data.ip }}
-          <p>归属地：{{data.ip_address}}</p>
-        </Descriptions.Item>
-        <Descriptions.Item label="类型">
-          {{ data.type === 0 ? '访问成功' : '访问失败' }}
-        </Descriptions.Item>
-        <Descriptions.Item label="返回结果代码">
-          {{ data.result_code }}
-        </Descriptions.Item>
-        <Descriptions.Item label="接口来源">
-          <span>{{ getApiOpLogPlatformLabel(data.platform_type) }}</span>
-        </Descriptions.Item>
-        <Descriptions.Item label="设备">
-          <Icon :icon="getIcon(data.equipment)" :size="20" />
-          {{ data.equipment }}
-        </Descriptions.Item>
-        <Descriptions.Item label="浏览器">
-          <Icon :icon="getIcon(data.browser)" :size="20" />
-          {{ data.browser }}
-        </Descriptions.Item>
-        <Descriptions.Item label="所属平台">
-          {{ data.platform?.name || '未绑定' }}
-        </Descriptions.Item>
-        <Descriptions.Item label="访问时间">
-          {{ data.created_at }}
-        </Descriptions.Item>
-      </Descriptions>
-      <Descriptions
-        :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
-        bordered
-      >
-        <Descriptions.Item label="参数">
-          <pre>{{ formatJson(data.param) }}</pre>
-        </Descriptions.Item>
-        <Descriptions.Item label="结果">
-          <pre>{{ formatJson(data.result) }}</pre>
-        </Descriptions.Item>
-      </Descriptions>
-    </div>
+      <div class="flex flex-col gap-4">
+        <Descriptions
+          :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }"
+          bordered
+        >
+          <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
+          <Descriptions.Item label="接口名称">
+            {{ data.url_title || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="接口说明">
+            {{ data.url_description || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="是否鉴权">
+            <span v-if="data.url_need_auth === 1">需要鉴权</span>
+            <span v-else-if="data.url_need_auth === 0">无需鉴权</span>
+            <span v-else>-</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="操作人员">
+            <span>{{ getApiOpLogOperatorLabel(data) }}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="URL">{{ data.url }}</Descriptions.Item>
+          <Descriptions.Item label="请求方式">
+            <span v-if="data.method === 1">GET</span>
+            <span v-else-if="data.method === 2">POST</span>
+            <span v-else>未知</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="控制器">
+            {{ data.controller }}
+          </Descriptions.Item>
+          <Descriptions.Item label="IP">
+            IP地址：{{ data.ip }}
+            <p>归属地：{{ data.ip_address }}</p>
+          </Descriptions.Item>
+          <Descriptions.Item label="类型">
+            {{ data.type === 0 ? '访问成功' : '访问失败' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="返回结果代码">
+            {{ data.result_code }}
+          </Descriptions.Item>
+          <Descriptions.Item label="接口来源">
+            <span>{{ getApiOpLogPlatformLabel(data.platform_type) }}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="设备">
+            <Icon :icon="getIcon(data.equipment)" :size="20" />
+            {{ data.equipment }}
+          </Descriptions.Item>
+          <Descriptions.Item label="浏览器">
+            <Icon :icon="getIcon(data.browser)" :size="20" />
+            {{ data.browser }}
+          </Descriptions.Item>
+          <Descriptions.Item label="所属平台">
+            {{ data.platform?.name || '未绑定' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="访问时间">
+            {{ data.created_at }}
+          </Descriptions.Item>
+        </Descriptions>
+        <Descriptions
+          :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
+          bordered
+        >
+          <Descriptions.Item label="参数">
+            <pre>{{ formatJson(data.param) }}</pre>
+          </Descriptions.Item>
+          <Descriptions.Item label="结果">
+            <pre>{{ formatJson(data.result) }}</pre>
+          </Descriptions.Item>
+        </Descriptions>
+      </div>
     </Spin>
   </Modal>
 </template>
@@ -128,8 +140,8 @@ const [Modal, modalApi] = useVbenModal({
 
 pre {
   padding: 8px;
-  border-radius: 4px;
   overflow-x: auto;
   white-space: pre-wrap;
+  border-radius: 4px;
 }
 </style>
diff --git a/apps/web-antd/src/views/log/api-log/config/search.ts b/apps/web-antd/src/views/log/api-log/config/search.ts
index 792e76a5..34887325 100644
--- a/apps/web-antd/src/views/log/api-log/config/search.ts
+++ b/apps/web-antd/src/views/log/api-log/config/search.ts
@@ -1,36 +1,47 @@
 import type { VbenFormProps } from '#/adapter/form';
 
-import { API_OP_LOG_PLATFORM_OPTIONS } from './platform';
-
-// import dayjs from 'dayjs';
-
+/**
+ * Api 访问日志搜索：端由页面 Tab 承担。
+ * 抽出 Grid 后必须显式多列栅格，否则默认一行一个字段占满屏。
+ */
 export const formOptions: VbenFormProps = {
-  // 默认展开
   collapsed: false,
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  wrapperClass:
+    'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
   schema: [
+    {
+      // 由页面端 Tab 写入，列表 query 带上；不展示
+      component: 'VbenInput',
+      fieldName: 'platform_type',
+      label: '端',
+      dependencies: {
+        show: false,
+        triggerFields: ['platform_type'],
+      },
+    },
     {
       component: 'ApiLogUserPicker',
       fieldName: 'user_filter',
       label: '操作用户',
+      // userType / platformType 由 index 动态 updateSchema 注入
+      dependencies: {
+        show: true,
+        triggerFields: ['user_filter'],
+      },
     },
     {
-      component: 'VbenInput',
-      // defaultValue: [dayjs().startOf('month'), dayjs()],
+      // 接诊式：标题/首拼/全拼搜索，选中回填 url；platformType 由页面 Tab 注入
+      component: 'ApiLogRoutePicker',
       fieldName: 'router',
       label: 'api接口',
     },
     {
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: [...API_OP_LOG_PLATFORM_OPTIONS],
-        placeholder: '全部',
-      },
-      fieldName: 'platform_type',
-      label: '接口来源',
-    },
-    {
-      // 请求方式：与后端 xk_api_op_log.method（1=GET 2=POST）一致
       component: 'Select',
       componentProps: {
         allowClear: true,
@@ -50,18 +61,14 @@ export const formOptions: VbenFormProps = {
         showTime: true,
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
-      // defaultValue: [dayjs().startOf('month'), dayjs()],
       fieldName: 'search_time',
       label: '时间范围',
     },
   ],
-  // 控制表单是否显示折叠按钮
   showCollapseButton: true,
   submitButtonOptions: {
     content: '查询',
   },
-  // 是否在字段值改变时提交表单
   submitOnChange: false,
-  // 按下回车时是否提交表单
   submitOnEnter: true,
 };
diff --git a/apps/web-antd/src/views/log/api-log/config/table.ts b/apps/web-antd/src/views/log/api-log/config/table.ts
index e04c164b..8d987358 100644
--- a/apps/web-antd/src/views/log/api-log/config/table.ts
+++ b/apps/web-antd/src/views/log/api-log/config/table.ts
@@ -6,8 +6,8 @@ interface RowType {
   id: string;
   admin: string;
   url: string;
+  url_title: string;
   ip: string;
-  param: string;
   type: string;
   created_at: string;
 }
@@ -25,31 +25,40 @@ export const gridOptions: VxeGridProps<RowType> = {
   },
   columns: [
     { field: 'id', align: 'left', title: 'ID', width: 100 },
+    {
+      field: 'url_title',
+      title: '接口名称',
+      minWidth: 120,
+      slots: { default: 'url_title' },
+    },
     {
       field: 'admin',
       align: 'left',
       title: '操作管理员',
       slots: { default: 'admin' },
     },
-    { field: 'url', title: '访问路由' },
+    { field: 'url', title: '访问路由', minWidth: 180 },
     {
       field: 'method',
       title: '请求方式',
       slots: { default: 'method' },
       width: 90,
     },
-    {
-      field: 'platform_type',
-      title: '接口来源',
-      slots: { default: 'platform_type' },
-      width: 120,
-    },
     { field: 'ip', title: '用户IP地址' },
     { field: 'ip_address', title: 'IP归属地' },
     { field: 'controller', title: '访问控制器' },
-    // { field: 'param', title: '携带参数' },
-    { field: 'equipment', title: '操作系统', slots: { default: 'equipment' }, width: 80 },
-    { field: 'browser', title: '浏览器', slots: { default: 'browser' }, width: 80 },
+    {
+      field: 'equipment',
+      title: '操作系统',
+      slots: { default: 'equipment' },
+      width: 80,
+    },
+    {
+      field: 'browser',
+      title: '浏览器',
+      slots: { default: 'browser' },
+      width: 80,
+    },
     { field: 'type', title: '操作简述', slots: { default: 'type' } },
     { field: 'created_at', title: '访问时间' },
     { type: 'html', title: '操作', slots: { default: 'action' } },
@@ -58,42 +67,31 @@ export const gridOptions: VxeGridProps<RowType> = {
   pagerConfig: {},
   proxyConfig: {
     ajax: {
-      // 请求后端接口方法
       query: async ({ page }, formValues) => {
-        const { user_filter, platform_type, ...rest } = formValues;
+        const { user_filter, ...rest } = formValues || {};
+        // platform_type 由页面 Tab 通过 form 注入，随 rest 带上
         return await getOldApiLogList({
           page: page.currentPage,
           pageSize: page.pageSize,
           ...rest,
           user_id: user_filter?.id,
-          platform_type: platform_type ?? user_filter?.platform_type,
         });
       },
     },
   },
   height: 'auto',
   border: false,
-  exportConfig: {
-    // 导出配置
-    filename: 'api-log',
-    remote: true,
-    type: 'csv',
-  },
   toolbarConfig: {
-    // 是否显示搜索表单控制按钮
-    // @ts-ignore 正式环境时有完整的类型声明
+    // @ts-expect-error
     search: true,
-    refresh: true, // 刷新
-    // import: true, // 导入
-    print: false, // 打印
-    export: false, // 导出
-    // custom: true, // 自定义列
-    zoom: true, // 最大化最小化
+    refresh: true,
+    print: false,
+    export: false,
+    zoom: true,
     slots: {
       buttons: 'toolbar-actions',
     },
     custom: {
-      // 自定义列-图标
       icon: 'vxe-icon-menu',
     },
   },
diff --git a/apps/web-antd/src/views/log/api-log/index.vue b/apps/web-antd/src/views/log/api-log/index.vue
index 5590284a..aaac0071 100644
--- a/apps/web-antd/src/views/log/api-log/index.vue
+++ b/apps/web-antd/src/views/log/api-log/index.vue
@@ -1,69 +1,239 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+/**
+ * Api 访问日志：按端 Tab 固定 platform_type；列表/卡片双视图共用顶部搜索。
+ * Tab 写入的 platform_type 会随列表/卡片请求参数带给后端。
+ */
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Button, Tag } from 'ant-design-vue';
+import { Tabs, Tag } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Icon } from '#/components/icon';
 import { TableAction } from '#/components/table-action';
-
-import FormModalDemo from './components/modal.vue';
-import { formOptions } from './config/search';
-import { gridOptions } from './config/table';
-import {
-  getApiOpLogOperatorLabel,
-  getApiOpLogPlatformLabel,
-} from './config/platform';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
 import { getIcon } from '#/util/tool';
-import {Icon} from "#/components/icon";
 
-ref(false);
+import { getOldApiLogList } from './api';
+import ApiOpLogCardList from './components/ApiOpLogCardList.vue';
+import FormModalDemo from './components/modal.vue';
+import {
+  API_OP_LOG_PLATFORM_OPTIONS,
+  getApiOpLogOperatorLabel,
+} from './config/platform';
+import { formOptions } from './config/search';
+import { gridOptions as baseGridOptions } from './config/table';
+import { normalizeApiOpLogFilters } from './utils/filters';
 
-let gridApiRef: ReturnType<typeof useVbenVxeGrid>[1];
+defineOptions({ name: 'ApiOpLog' });
 
-function syncPlatformType(platformType: 0 | 1 | 2) {
-  gridApiRef?.formApi?.setFieldValue('platform_type', platformType);
+const TAB_STORAGE_KEY = 'api_op_log_platform_tab';
+const TabPane = Tabs.TabPane;
+
+function readStoredTab(): number {
+  const raw = localStorage.getItem(TAB_STORAGE_KEY);
+  const n = raw === null ? 0 : Number(raw);
+  return API_OP_LOG_PLATFORM_OPTIONS.some((o) => o.value === n) ? n : 0;
 }
 
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    ...formOptions,
-    schema: formOptions.schema?.map((item) =>
-      item.fieldName === 'user_filter'
-        ? {
-            ...item,
-            componentProps: {
-              onPlatformTypeChange: syncPlatformType,
-            },
-          }
-        : item,
-    ),
-  },
-  gridOptions,
+const activePlatform = ref<number>(readStoredTab());
+/** 列表/卡片双视图，localStorage 记忆偏好 */
+const viewMode = useViewMode('api-op-log-view-mode');
+const cardListRef = ref<InstanceType<typeof ApiOpLogCardList> | null>(null);
+
+/** Tab → 用户搜索类型；互医无用户选择器 */
+const userTypeByPlatform = computed(() => {
+  const map: Record<number, 'admin' | 'doctor' | 'patient' | null> = {
+    0: 'admin',
+    1: 'patient',
+    2: 'doctor',
+    3: null,
+  };
+  return map[activePlatform.value] ?? 'admin';
+});
+
+const showUserPicker = computed(() => userTypeByPlatform.value !== null);
+
+function collectDefaultSearchValues(): Record<string, any> {
+  const values: Record<string, any> = {
+    platform_type: activePlatform.value,
+  };
+  for (const item of formOptions.schema ?? []) {
+    if (item.fieldName && item.defaultValue !== undefined) {
+      values[item.fieldName] = item.defaultValue;
+    }
+  }
+  return values;
+}
+
+/** 列表与卡片共用的搜索条件 */
+const searchValues = ref<Record<string, any>>(collectDefaultSearchValues());
+const cardFilters = computed(() =>
+  normalizeApiOpLogFilters(searchValues.value),
+);
+
+async function readLiveSearchValues(): Promise<Record<string, any>> {
+  try {
+    await nextTick();
+    const live = await searchFormApi.getValues();
+    return {
+      ...(live || {}),
+      platform_type: activePlatform.value,
+    };
+  } catch {
+    return {
+      ...searchValues.value,
+      platform_type: activePlatform.value,
+    };
+  }
+}
+
+/**
+ * 顶部统一搜索：抽出后列表/卡片共用；platform_type 始终跟当前 Tab
+ */
+const [SearchForm, searchFormApi] = useVbenForm({
+  ...formOptions,
+  handleSubmit: async () => {
+    searchValues.value = await readLiveSearchValues();
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    }
+  },
+  handleReset: async () => {
+    await searchFormApi.reset();
+    await applyTabToForm();
+    searchValues.value = await readLiveSearchValues();
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    }
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    ...baseGridOptions,
+    toolbarConfig: {
+      ...baseGridOptions.toolbarConfig,
+      search: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({
+          page,
+        }: {
+          page: { currentPage: number; pageSize: number };
+        }) => {
+          searchValues.value = await readLiveSearchValues();
+          return await getOldApiLogList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...normalizeApiOpLogFilters(searchValues.value),
+          });
+        },
+      },
+    },
+  },
 });
-gridApiRef = gridApi;
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: FormModalDemo,
 });
 
+/** 把当前 Tab 的 platform_type / userType 注入顶部搜索表单 */
+async function applyTabToForm() {
+  const ut = userTypeByPlatform.value;
+  await searchFormApi.updateSchema([
+    {
+      fieldName: 'user_filter',
+      dependencies: {
+        show: showUserPicker.value,
+        triggerFields: ['user_filter'],
+      },
+      componentProps: {
+        userType: ut || 'admin',
+        platformType: (activePlatform.value === 3
+          ? 0
+          : activePlatform.value) as 0 | 1 | 2,
+      },
+    },
+    {
+      fieldName: 'router',
+      componentProps: {
+        platformType: activePlatform.value,
+      },
+    },
+  ]);
+  await searchFormApi.setFieldValue('platform_type', activePlatform.value);
+  await searchFormApi.setFieldValue('user_filter', undefined);
+  await searchFormApi.setFieldValue('router', undefined);
+}
+
+async function refreshCurrentViewFromPageOne() {
+  searchValues.value = await readLiveSearchValues();
+  if (viewMode.value === 'list') {
+    gridApi.reload();
+  } else {
+    await cardListRef.value?.reload?.();
+  }
+}
+
+watch(activePlatform, async (val) => {
+  localStorage.setItem(TAB_STORAGE_KEY, String(val));
+  await applyTabToForm();
+  await refreshCurrentViewFromPageOne();
+});
+
+/** 切回列表时 Grid 被 v-if 卸载过，需主动重查 */
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    gridApi.query();
+  }
+});
+
+onMounted(async () => {
+  await applyTabToForm();
+  searchValues.value = await readLiveSearchValues();
+});
+
 const showModal = (data = {}, isUpdate = false) => {
   formModalApi.setData({
-    // 表单值
     values: data,
     update: isUpdate,
     gridApi,
   });
   formModalApi.open();
 };
+
+/** 卡片列表请求：与表格 proxy 同口径 */
+async function fetchCardList(params: Record<string, any>) {
+  return await getOldApiLogList(params);
+}
 </script>
 
 <template>
   <Page auto-content-height title="Api访问日志管理">
+    <Tabs v-model:active-key="activePlatform" class="mb-3">
+      <TabPane
+        v-for="item in API_OP_LOG_PLATFORM_OPTIONS"
+        :key="item.value"
+        :tab="item.label"
+      />
+    </Tabs>
     <FormModal />
-    <Grid>
-      <template #toolbar-actions>
+    <div
+      class="mb-3 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+    >
+      <SearchForm />
+    </div>
+    <div class="mb-3 flex flex-wrap items-center gap-2">
+      <ViewModeSwitch v-model="viewMode" />
+    </div>
+    <Grid v-if="viewMode === 'list'">
+      <template #toolbar-actions></template>
+      <template #url_title="{ row }">
+        <span>{{ row.url_title || '-' }}</span>
       </template>
       <template #type="{ row }">
         <Tag v-if="row.type === 0" color="green"> 访问成功 </Tag>
@@ -72,9 +242,6 @@ const showModal = (data = {}, isUpdate = false) => {
       <template #admin="{ row }">
         <span>{{ getApiOpLogOperatorLabel(row) }}</span>
       </template>
-      <template #platform_type="{ row }">
-        <span>{{ getApiOpLogPlatformLabel(row.platform_type) }}</span>
-      </template>
       <template #method="{ row }">
         <Tag v-if="row.method === 1" color="blue">GET</Tag>
         <Tag v-else-if="row.method === 2" color="green">POST</Tag>
@@ -95,7 +262,6 @@ const showModal = (data = {}, isUpdate = false) => {
               type: 'link',
               icon: 'uil:edit',
               size: 'small',
-              // auth: ['op-log', 'sys:role:detail'],
               onClick: showModal.bind(null, row, true),
             },
           ]"
@@ -103,5 +269,12 @@ const showModal = (data = {}, isUpdate = false) => {
         />
       </template>
     </Grid>
+    <ApiOpLogCardList
+      v-else
+      ref="cardListRef"
+      :filters="cardFilters"
+      :fetch-list="fetchCardList"
+      @detail="(row) => showModal(row, true)"
+    />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/log/api-log/utils/filters.ts b/apps/web-antd/src/views/log/api-log/utils/filters.ts
new file mode 100644
index 00000000..b3935a88
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-log/utils/filters.ts
@@ -0,0 +1,14 @@
+/**
+ * 把搜索表单值转成列表/卡片接口参数。
+ * user_filter 是选择器对象，后端只吃 user_id。
+ */
+export function normalizeApiOpLogFilters(
+  formValues: Record<string, any> = {},
+): Record<string, any> {
+  const { user_filter, ...rest } = formValues || {};
+  const params: Record<string, any> = { ...rest };
+  if (user_filter?.id != null && user_filter.id !== '') {
+    params.user_id = user_filter.id;
+  }
+  return params;
+}
diff --git a/apps/web-antd/src/views/log/api-route-map/api/index.ts b/apps/web-antd/src/views/log/api-route-map/api/index.ts
new file mode 100644
index 00000000..5a1ccdef
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-route-map/api/index.ts
@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 接口映射管理（xk-api）
+ * 取值：code / result / message
+ */
+const prefix = 'api-route-map/';
+
+/** 分页列表 xk-api GET /api-route-map/list */
+export async function getApiRouteMapList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/** 详情 xk-api GET /api-route-map/detail */
+export async function getApiRouteMapInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/** 新增 xk-api POST /api-route-map/create */
+export async function createApiRouteMap(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/** 更新 xk-api POST /api-route-map/update */
+export async function updateApiRouteMap(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/** 删除 xk-api POST /api-route-map/delete */
+export async function deleteApiRouteMap(ids: number[]) {
+  return requestClient.post<any>(`${prefix}delete`, { ids });
+}
+
+/** 从路由同步 xk-api POST /api-route-map/sync-routes */
+export async function syncApiRouteMapRoutes() {
+  return requestClient.post<any>(`${prefix}sync-routes`, {});
+}
+
+/**
+ * 接诊式搜索（标题/url/首拼/全拼）xk-api GET /api-route-map/search
+ * 供 Api 日志选接口
+ */
+export async function searchApiRouteMap(params: {
+  keyword: string;
+  platform_type?: number;
+  pageSize?: number;
+}) {
+  return requestClient.get<{ items: any[] }>(`${prefix}search`, { params });
+}
diff --git a/apps/web-antd/src/views/log/api-route-map/components/ApiRouteMapCardList.vue b/apps/web-antd/src/views/log/api-route-map/components/ApiRouteMapCardList.vue
new file mode 100644
index 00000000..6d4e9f3e
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-route-map/components/ApiRouteMapCardList.vue
@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+/**
+ * 接口映射卡片看板：展示与列表一致（路由/端/鉴权/补全/来源），分页不抢页面滚轮。
+ */
+import { ref, watch } from 'vue';
+
+import { Button, Empty, Pagination, Spin, Tag } from 'ant-design-vue';
+
+import { getApiRouteMapList } from '../api';
+
+const props = defineProps<{
+  /** 顶部搜索条件（含 platform_type 等） */
+  filters: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  edit: [row: Record<string, any>];
+  remove: [row: Record<string, any>];
+}>();
+
+const items = ref<any[]>([]);
+const page = ref(1);
+const pageSize = ref(12);
+const total = ref(0);
+const loading = ref(false);
+let requestSeq = 0;
+
+async function fetchPage(targetPage: number) {
+  const seq = ++requestSeq;
+  loading.value = true;
+  try {
+    const res = await getApiRouteMapList({
+      page: targetPage,
+      pageSize: pageSize.value,
+      ...(props.filters || {}),
+    });
+    if (seq !== requestSeq) return;
+    items.value = res?.items ?? [];
+    page.value = targetPage;
+    total.value = Number(res?.total ?? 0);
+  } catch (error) {
+    if (seq !== requestSeq) return;
+    console.error(error);
+    items.value = [];
+    total.value = 0;
+  } finally {
+    if (seq === requestSeq) {
+      loading.value = false;
+    }
+  }
+}
+
+async function reload() {
+  page.value = 1;
+  await fetchPage(1);
+}
+
+async function refreshKeepPage() {
+  await fetchPage(page.value);
+}
+
+defineExpose({ reload, refreshKeepPage });
+
+watch(
+  () => props.filters,
+  () => {
+    void reload();
+  },
+  { deep: true, immediate: true },
+);
+
+async function onPageChange(nextPage: number, nextSize: number) {
+  if (nextSize !== pageSize.value) {
+    pageSize.value = nextSize;
+    page.value = 1;
+  } else {
+    page.value = nextPage;
+  }
+  await fetchPage(page.value);
+}
+
+function methodColor(txt: string) {
+  if (txt === 'GET') return 'blue';
+  if (txt === 'POST') return 'green';
+  return 'default';
+}
+</script>
+
+<template>
+  <div class="route-map-card-scroll">
+    <Spin :spinning="loading">
+      <Empty v-if="!items.length && !loading" description="暂无接口映射" />
+      <div v-else class="route-map-card-grid">
+        <div v-for="row in items" :key="row.id" class="route-map-card">
+          <div class="route-map-card__head">
+            <div class="min-w-0 flex-1">
+              <div class="route-map-card__title">
+                {{ row.title || '待补全名称' }}
+              </div>
+              <div class="route-map-card__url" :title="row.url">
+                {{ row.url || '—' }}
+              </div>
+            </div>
+            <div class="flex shrink-0 flex-col items-end gap-1">
+              <Tag :color="methodColor(row.method_txt)">
+                {{ row.method_txt || '未知' }}
+              </Tag>
+              <Tag v-if="Number(row.need_fill) === 1" color="orange">
+                待补全
+              </Tag>
+              <Tag v-else color="green">已补全</Tag>
+            </div>
+          </div>
+          <div class="route-map-card__body">
+            <div class="route-map-card__chips">
+              <Tag>{{ row.platform_type_txt || '—' }}</Tag>
+              <Tag>{{ row.need_auth_txt || '—' }}</Tag>
+              <Tag>{{ row.source_txt || '—' }}</Tag>
+            </div>
+            <div class="route-map-card__row">
+              <span class="route-map-card__label">控制器</span>
+              <span class="truncate" :title="row.controller">
+                {{ row.controller || '—' }}
+              </span>
+            </div>
+            <div v-if="row.description" class="route-map-card__desc">
+              {{ row.description }}
+            </div>
+            <div class="route-map-card__meta">
+              <span>#{{ row.id }}</span>
+              <span>更新 {{ row.updated_at || '—' }}</span>
+            </div>
+          </div>
+          <div class="route-map-card__foot">
+            <Button
+              type="link"
+              size="small"
+              class="!px-0"
+              @click="emit('edit', row)"
+            >
+              编辑
+            </Button>
+            <Button
+              type="link"
+              size="small"
+              danger
+              class="!px-0"
+              @click="emit('remove', row)"
+            >
+              删除
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div v-if="total > 0" class="mt-4 flex justify-end">
+        <Pagination
+          :current="page"
+          :page-size="pageSize"
+          :page-size-options="['12', '24', '48']"
+          :total="total"
+          show-quick-jumper
+          show-size-changer
+          @change="onPageChange"
+        />
+      </div>
+    </Spin>
+  </div>
+</template>
+
+<style scoped>
+.route-map-card-scroll {
+  padding: 4px 2px 8px;
+}
+
+.route-map-card-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+}
+
+@media (min-width: 768px) {
+  .route-map-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .route-map-card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.route-map-card {
+  display: flex;
+  flex-direction: column;
+  background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--primary) / 30%);
+  border-radius: 12px;
+  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+}
+
+.route-map-card:hover {
+  border-color: hsl(var(--primary) / 45%);
+  box-shadow: 0 0 8px hsl(var(--primary) / 22%);
+}
+
+.route-map-card__head {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.route-map-card__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.route-map-card__url {
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+}
+
+.route-map-card__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 16px;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+}
+
+.route-map-card__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.route-map-card__row {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.route-map-card__label {
+  flex-shrink: 0;
+  width: 3.5em;
+  color: hsl(var(--muted-foreground));
+}
+
+.route-map-card__desc {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.route-map-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: space-between;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.route-map-card__foot {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 4px 12px 8px;
+  border-top: 1px solid hsl(var(--border));
+}
+</style>
diff --git a/apps/web-antd/src/views/log/api-route-map/components/modal.vue b/apps/web-antd/src/views/log/api-route-map/components/modal.vue
new file mode 100644
index 00000000..518c81cf
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-route-map/components/modal.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+/**
+ * 接口映射新增/编辑弹窗
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import {
+  createApiRouteMap,
+  getApiRouteMapInfo,
+  updateApiRouteMap,
+} from '../api';
+import { modalFormProps } from '../config/form';
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const e = await formApi.validate();
+    if (!e.valid) return;
+    const values = await formApi.getValues();
+    modalApi.setState({ loading: true, confirmLoading: true });
+    try {
+      if (isUpdate.value) {
+        await updateApiRouteMap(values);
+        message.success('保存成功');
+      } else {
+        await createApiRouteMap(values);
+        message.success('创建成功');
+      }
+      gridApi.value?.reload?.();
+      modalApi.close();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      modalApi.setState({ loading: false, confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<Record<string, any>>() || {};
+    gridApi.value = data.gridApi;
+    isUpdate.value = !!data.update;
+    await formApi.reset();
+    if (isUpdate.value && data.values?.id) {
+      try {
+        const detail = await getApiRouteMapInfo(Number(data.values.id));
+        await formApi.setValues(detail || data.values);
+      } catch {
+        await formApi.setValues(data.values);
+      }
+    } else {
+      await formApi.setValues({
+        method: 1,
+        platform_type: 0,
+        need_auth: 1,
+      });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[640px]" :title="isUpdate ? '编辑接口映射' : '新增接口映射'">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/log/api-route-map/config/constants.ts b/apps/web-antd/src/views/log/api-route-map/config/constants.ts
new file mode 100644
index 00000000..227fac23
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-route-map/config/constants.ts
@@ -0,0 +1,31 @@
+/** 接口映射：请求方式 / 来源 / 待补全 / 鉴权 */
+
+export const API_ROUTE_METHOD_OPTIONS = [
+  { label: '未知', value: 0 },
+  { label: 'GET', value: 1 },
+  { label: 'POST', value: 2 },
+] as const;
+
+export const API_ROUTE_SOURCE_OPTIONS = [
+  { label: '路由扫描', value: 1 },
+  { label: '写日志自动补', value: 2 },
+  { label: '手工/SQL登记', value: 3 },
+] as const;
+
+export const API_ROUTE_NEED_FILL_OPTIONS = [
+  { label: '全部', value: '' },
+  { label: '仅待补全', value: 1 },
+  { label: '已补全', value: 2 },
+] as const;
+
+export const API_ROUTE_NEED_AUTH_OPTIONS = [
+  { label: '需要鉴权', value: 1 },
+  { label: '无需鉴权', value: 0 },
+] as const;
+
+export const API_ROUTE_PLATFORM_OPTIONS = [
+  { label: '后台', value: 0 },
+  { label: '用户移动端', value: 1 },
+  { label: '医生移动端', value: 2 },
+  { label: '互医内部接口', value: 3 },
+] as const;
diff --git a/apps/web-antd/src/views/log/api-route-map/config/form.ts b/apps/web-antd/src/views/log/api-route-map/config/form.ts
new file mode 100644
index 00000000..59305b93
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-route-map/config/form.ts
@@ -0,0 +1,86 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import {
+  API_ROUTE_METHOD_OPTIONS,
+  API_ROUTE_NEED_AUTH_OPTIONS,
+  API_ROUTE_PLATFORM_OPTIONS,
+} from './constants';
+
+/** 新增/编辑表单 */
+export const modalFormProps: VbenFormProps = {
+  commonConfig: {
+    componentProps: { class: 'w-full' },
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      dependencies: { show: false, triggerFields: ['id'] },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'url',
+      label: '接口路由',
+      rules: 'required',
+      componentProps: {
+        placeholder: '如 api/admin/log/api-list',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'method',
+      label: '请求方式',
+      rules: 'selectRequired',
+      componentProps: { options: [...API_ROUTE_METHOD_OPTIONS] },
+    },
+    {
+      component: 'Select',
+      fieldName: 'platform_type',
+      label: '端',
+      rules: 'selectRequired',
+      componentProps: { options: [...API_ROUTE_PLATFORM_OPTIONS] },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'title',
+      label: '接口名称',
+      rules: 'required',
+      componentProps: { placeholder: '短标题，日志列表展示' },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '接口说明',
+      rules: 'required',
+      componentProps: { rows: 3, placeholder: '做什么、适用场景' },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'need_auth',
+      label: '是否鉴权',
+      defaultValue: 1,
+      componentProps: { options: [...API_ROUTE_NEED_AUTH_OPTIONS] },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'controller',
+      label: '控制器',
+      componentProps: { placeholder: '可选' },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'action',
+      label: '方法名',
+      componentProps: { placeholder: '小驼峰，可选' },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'remark',
+      label: '备注',
+      componentProps: { placeholder: '可选' },
+    },
+  ],
+  showDefaultActions: false,
+};
diff --git a/apps/web-antd/src/views/log/api-route-map/config/search.ts b/apps/web-antd/src/views/log/api-route-map/config/search.ts
new file mode 100644
index 00000000..650b4910
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-route-map/config/search.ts
@@ -0,0 +1,87 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import {
+  API_ROUTE_METHOD_OPTIONS,
+  API_ROUTE_NEED_AUTH_OPTIONS,
+  API_ROUTE_NEED_FILL_OPTIONS,
+  API_ROUTE_PLATFORM_OPTIONS,
+  API_ROUTE_SOURCE_OPTIONS,
+} from './constants';
+
+/**
+ * 接口映射搜索：含待补全单独筛选。
+ * 抽出 Grid 后必须显式多列栅格，否则默认一行一个字段占满屏。
+ */
+export const formOptions: VbenFormProps = {
+  collapsed: false,
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  wrapperClass:
+    'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'url',
+      label: '接口路由',
+      componentProps: { allowClear: true, placeholder: '模糊匹配 url' },
+    },
+    {
+      component: 'Select',
+      fieldName: 'platform_type',
+      label: '端',
+      componentProps: {
+        allowClear: true,
+        options: [...API_ROUTE_PLATFORM_OPTIONS],
+        placeholder: '全部',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'method',
+      label: '请求方式',
+      componentProps: {
+        allowClear: true,
+        options: [...API_ROUTE_METHOD_OPTIONS],
+        placeholder: '全部',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'need_auth',
+      label: '是否鉴权',
+      componentProps: {
+        allowClear: true,
+        options: [...API_ROUTE_NEED_AUTH_OPTIONS],
+        placeholder: '全部',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'need_fill',
+      label: '补全状态',
+      componentProps: {
+        allowClear: true,
+        options: [...API_ROUTE_NEED_FILL_OPTIONS],
+        placeholder: '全部',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'source',
+      label: '来源',
+      componentProps: {
+        allowClear: true,
+        options: [...API_ROUTE_SOURCE_OPTIONS],
+        placeholder: '全部',
+      },
+    },
+  ],
+  showCollapseButton: true,
+  submitButtonOptions: { content: '查询' },
+  submitOnChange: false,
+  submitOnEnter: true,
+};
diff --git a/apps/web-antd/src/views/log/api-route-map/config/table.ts b/apps/web-antd/src/views/log/api-route-map/config/table.ts
new file mode 100644
index 00000000..6a1b35c2
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-route-map/config/table.ts
@@ -0,0 +1,71 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getApiRouteMapList } from '../api';
+
+interface RowType {
+  id: number;
+  url: string;
+  title: string;
+  method: number;
+  platform_type: number;
+  need_auth: number;
+  source: number;
+  need_fill: number;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: { highlight: true, labelField: '' },
+  columnConfig: { useKey: true },
+  rowConfig: { useKey: true },
+  columns: [
+    { type: 'checkbox', width: 50 },
+    { field: 'id', title: 'ID', width: 80 },
+    { field: 'url', title: '接口路由', minWidth: 220 },
+    {
+      field: 'title',
+      title: '接口名称',
+      minWidth: 140,
+      slots: { default: 'title' },
+    },
+    { field: 'pinyin_simple', title: '首拼', width: 100 },
+    { field: 'method_txt', title: '请求方式', width: 90 },
+    { field: 'platform_type_txt', title: '端', width: 110 },
+    { field: 'need_auth_txt', title: '鉴权', width: 100 },
+    { field: 'source_txt', title: '来源', width: 120 },
+    {
+      field: 'need_fill',
+      title: '补全',
+      width: 90,
+      slots: { default: 'need_fill' },
+    },
+    { field: 'controller', title: '控制器', minWidth: 160 },
+    { field: 'updated_at', title: '更新时间', width: 170 },
+    { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getApiRouteMapList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // @ts-ignore
+    search: true,
+    refresh: true,
+    print: false,
+    export: false,
+    zoom: true,
+    slots: { buttons: 'toolbar-actions' },
+    custom: { icon: 'vxe-icon-menu' },
+  },
+  showOverflow: true,
+};
diff --git a/apps/web-antd/src/views/log/api-route-map/index.vue b/apps/web-antd/src/views/log/api-route-map/index.vue
new file mode 100644
index 00000000..82f0e73f
--- /dev/null
+++ b/apps/web-antd/src/views/log/api-route-map/index.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+/**
+ * 接口映射管理：维护 url/请求方式/鉴权/说明；列表/卡片双视图共用顶部搜索。
+ */
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Modal, Tag, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+
+import { deleteApiRouteMap, getApiRouteMapList } from './api';
+import ApiRouteMapCardList from './components/ApiRouteMapCardList.vue';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions as baseGridOptions } from './config/table';
+
+defineOptions({ name: 'ApiRouteMap' });
+
+const viewMode = useViewMode('api-route-map-view-mode');
+const cardListRef = ref<InstanceType<typeof ApiRouteMapCardList> | null>(null);
+
+function collectDefaultSearchValues(): Record<string, any> {
+  const values: Record<string, any> = {};
+  for (const item of formOptions.schema ?? []) {
+    if (item.fieldName && item.defaultValue !== undefined) {
+      values[item.fieldName] = item.defaultValue;
+    }
+  }
+  return values;
+}
+
+const searchValues = ref<Record<string, any>>(collectDefaultSearchValues());
+/** 卡片筛选：与 searchValues 同步，避免模板每次新建对象 */
+const cardFilters = computed(() => ({ ...searchValues.value }));
+
+async function readLiveSearchValues(): Promise<Record<string, any>> {
+  try {
+    await nextTick();
+    const live = await searchFormApi.getValues();
+    return { ...(live || {}) };
+  } catch {
+    return { ...searchValues.value };
+  }
+}
+
+const [SearchForm, searchFormApi] = useVbenForm({
+  ...formOptions,
+  handleSubmit: async () => {
+    searchValues.value = await readLiveSearchValues();
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    }
+  },
+  handleReset: async () => {
+    await searchFormApi.reset();
+    searchValues.value = collectDefaultSearchValues();
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    }
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    ...baseGridOptions,
+    toolbarConfig: {
+      ...baseGridOptions.toolbarConfig,
+      search: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({
+          page,
+        }: {
+          page: { currentPage: number; pageSize: number };
+        }) => {
+          searchValues.value = await readLiveSearchValues();
+          return await getApiRouteMapList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...searchValues.value,
+          });
+        },
+      },
+    },
+  },
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    gridApi.query();
+  }
+});
+
+function showModal(data: Record<string, any> = {}, isUpdate = false) {
+  formModalApi.setData({
+    values: data,
+    update: isUpdate,
+    gridApi: {
+      reload: () => refreshCurrentViewFromPageOne(),
+      query: () => refreshCurrentView(),
+    },
+  });
+  formModalApi.open();
+}
+
+async function refreshCurrentView() {
+  if (viewMode.value === 'list') {
+    await gridApi.query();
+  } else {
+    await cardListRef.value?.refreshKeepPage?.();
+  }
+}
+
+async function refreshCurrentViewFromPageOne() {
+  searchValues.value = await readLiveSearchValues();
+  if (viewMode.value === 'list') {
+    gridApi.reload();
+  } else {
+    await cardListRef.value?.reload?.();
+  }
+}
+
+/** 快捷筛「仅待补全」并刷新 */
+async function filterNeedFill() {
+  await searchFormApi.setValues({ need_fill: 1 });
+  searchValues.value = await readLiveSearchValues();
+  await refreshCurrentViewFromPageOne();
+}
+
+async function handleDelete(row: { id: number }) {
+  try {
+    await deleteApiRouteMap([row.id]);
+    message.success('删除成功');
+    await refreshCurrentView();
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+/** 卡片删除用 Modal.confirm，避免卡片内嵌 Popconfirm */
+function confirmDelete(row: { id: number }) {
+  Modal.confirm({
+    title: '确认删除该映射？',
+    onOk: () => handleDelete(row),
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height title="接口映射">
+    <FormModal />
+    <div
+      class="mb-3 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+    >
+      <SearchForm />
+    </div>
+    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+      <ViewModeSwitch v-model="viewMode" />
+      <TableAction
+        :actions="[
+          {
+            label: '新增',
+            type: 'primary',
+            onClick: () => showModal({}, false),
+          },
+          {
+            label: '仅待补全',
+            type: 'default',
+            onClick: filterNeedFill,
+          },
+        ]"
+      />
+    </div>
+    <Grid v-if="viewMode === 'list'">
+      <template #toolbar-actions></template>
+      <template #title="{ row }">
+        <span>{{ row.title || '-' }}</span>
+      </template>
+      <template #need_fill="{ row }">
+        <Tag v-if="Number(row.need_fill) === 1" color="orange">待补全</Tag>
+        <Tag v-else color="green">已补全</Tag>
+      </template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              size: 'small',
+              onClick: () => showModal(row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              size: 'small',
+              popConfirm: {
+                title: '确认删除该映射？',
+                confirm: () => handleDelete(row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <ApiRouteMapCardList
+      v-else
+      ref="cardListRef"
+      :filters="cardFilters"
+      @edit="(row) => showModal(row, true)"
+      @remove="confirmDelete"
+    />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/log/old-api-log/components/modal.vue b/apps/web-antd/src/views/log/old-api-log/components/modal.vue
index f0a07c65..a10d538d 100644
--- a/apps/web-antd/src/views/log/old-api-log/components/modal.vue
+++ b/apps/web-antd/src/views/log/old-api-log/components/modal.vue
@@ -5,8 +5,6 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { Descriptions } from 'ant-design-vue';
 
-
-
 const gridApi = ref();
 const data = ref({});
 
@@ -41,14 +39,18 @@ const [Modal, modalApi] = useVbenModal({
         <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
         <Descriptions.Item label="用户ID">{{ data.user_id }}</Descriptions.Item>
         <Descriptions.Item label="URL">{{ data.url }}</Descriptions.Item>
-        <Descriptions.Item label="IP">{{ data.ip === '127.0.0.1' ? '本地' : data.ip }}</Descriptions.Item>
+        <Descriptions.Item label="IP">{{
+          data.ip === '127.0.0.1' ? '本地' : data.ip
+        }}</Descriptions.Item>
         <Descriptions.Item label="参数">
           <pre>{{ JSON.parse(JSON.parse(data.param)) }}</pre>
         </Descriptions.Item>
         <Descriptions.Item label="结果">
           <pre>{{ JSON.parse(JSON.parse(data.result)) }}</pre>
         </Descriptions.Item>
-        <Descriptions.Item label="类型">{{ data.type === 0 ? '访问成功' : '访问失败' }}</Descriptions.Item>
+        <Descriptions.Item label="类型">{{
+          data.type === 0 ? '访问成功' : '访问失败'
+        }}</Descriptions.Item>
         <Descriptions.Item label="返回结果代码">
           {{ data.result_code }}
         </Descriptions.Item>
@@ -56,15 +58,15 @@ const [Modal, modalApi] = useVbenModal({
           {{ data.platform_type === 0 ? '平台' : '诊所' }}
         </Descriptions.Item>
         <Descriptions.Item label="平台">
-          {{ data.platform_id === 0 ? '萧康医药' : data?.old_admin?.username || '获取失败' }}
+          {{ data.platform_id === 0 ? '萧康医药' : data?.store?.name || '-' }}
         </Descriptions.Item>
         <Descriptions.Item label="设备">{{ data.equipment }}</Descriptions.Item>
         <Descriptions.Item label="浏览器">{{ data.browser }}</Descriptions.Item>
         <Descriptions.Item label="创建时间">
           {{ data.created_at }}
         </Descriptions.Item>
-        <Descriptions.Item label="管理员名称">
-          {{ data?.old_admin?.username || '获取失败' }}
+        <Descriptions.Item label="操作用户ID">
+          {{ data.user_id || '-' }}
         </Descriptions.Item>
       </Descriptions>
     </div>
@@ -78,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 
 pre {
   padding: 8px;
-  border-radius: 4px;
   overflow-x: auto;
+  border-radius: 4px;
 }
 </style>
diff --git a/apps/web-antd/src/views/log/old-api-log/config/table.ts b/apps/web-antd/src/views/log/old-api-log/config/table.ts
index bf258e6b..7b4da1ec 100644
--- a/apps/web-antd/src/views/log/old-api-log/config/table.ts
+++ b/apps/web-antd/src/views/log/old-api-log/config/table.ts
@@ -24,10 +24,10 @@ export const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { field: 'id', align: 'left', title: 'ID', width: 100 },
     {
-      field: 'old_admin',
+      field: 'user_id',
       align: 'left',
-      title: '操作管理员',
-      slots: { default: 'old_admin' },
+      title: '操作用户ID',
+      width: 120,
     },
     { field: 'url', title: '访问路由' },
     { field: 'ip', title: '用户IP地址' },
diff --git a/apps/web-antd/src/views/log/old-api-log/index.vue b/apps/web-antd/src/views/log/old-api-log/index.vue
index 9e0d9ea6..4383d252 100644
--- a/apps/web-antd/src/views/log/old-api-log/index.vue
+++ b/apps/web-antd/src/views/log/old-api-log/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 import { ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -38,15 +37,11 @@ const showModal = (data = {}, isUpdate = false) => {
   <Page auto-content-height title="Api访问日志管理">
     <FormModal />
     <Grid>
-      <template #toolbar-actions>
-      </template>
+      <template #toolbar-actions> </template>
       <template #type="{ row }">
         <Tag v-if="row.type === 0" color="green"> 访问成功 </Tag>
         <Tag v-else color="red"> 访问失败 </Tag>
       </template>
-      <template #old_admin="{ row }">
-        {{ row?.old_admin?.username || '获取失败' }}
-      </template>
       <template #toolbar-tools></template>
       <template #action="{ row }">
         <TableAction
diff --git a/apps/web-antd/src/views/log/op-log/components/modal.vue b/apps/web-antd/src/views/log/op-log/components/modal.vue
index 99a31f48..a2c4f3f1 100644
--- a/apps/web-antd/src/views/log/op-log/components/modal.vue
+++ b/apps/web-antd/src/views/log/op-log/components/modal.vue
@@ -4,8 +4,6 @@ import { ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { Descriptions } from 'ant-design-vue';
 
-
-
 const gridApi = ref();
 const data = ref({});
 
@@ -37,8 +35,12 @@ const [Modal, modalApi] = useVbenModal({
         bordered
       >
         <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
-        <Descriptions.Item label="管理员ID">{{ data.admin_id }}</Descriptions.Item>
-        <Descriptions.Item label="理员名称">{{ data.old_admin?.username || data.admin?.nick_name }}</Descriptions.Item>
+        <Descriptions.Item label="管理员ID">{{
+          data.admin_id
+        }}</Descriptions.Item>
+        <Descriptions.Item label="管理员名称">{{
+          data.admin?.nick_name || '-'
+        }}</Descriptions.Item>
         <Descriptions.Item label="类型">{{ data.type }}</Descriptions.Item>
         <Descriptions.Item label="内容">
           <pre>{{ JSON.parse(data.content) }}</pre>
@@ -49,7 +51,9 @@ const [Modal, modalApi] = useVbenModal({
         <Descriptions.Item label="操作时间">
           {{ data.operate_time }}
         </Descriptions.Item>
-        <Descriptions.Item label="创建时间">{{ data.created_at }}</Descriptions.Item>
+        <Descriptions.Item label="创建时间">{{
+          data.created_at
+        }}</Descriptions.Item>
       </Descriptions>
     </div>
   </Modal>
@@ -62,8 +66,8 @@ const [Modal, modalApi] = useVbenModal({
 
 pre {
   padding: 8px;
-  border-radius: 4px;
   overflow-x: auto;
   white-space: pre-wrap;
+  border-radius: 4px;
 }
 </style>
diff --git a/apps/web-antd/src/views/log/op-log/config/table.ts b/apps/web-antd/src/views/log/op-log/config/table.ts
index 8c8afb76..f39f89fd 100644
--- a/apps/web-antd/src/views/log/op-log/config/table.ts
+++ b/apps/web-antd/src/views/log/op-log/config/table.ts
@@ -24,14 +24,14 @@ export const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { field: 'id', align: 'left', title: 'ID', width: 100 },
     {
-      field: 'old_admin',
+      field: 'admin',
       align: 'left',
       title: '操作管理员',
-      slots: { default: 'old_admin' },
+      slots: { default: 'admin' },
     },
     { field: 'type', title: '操作简述' },
     { field: 'mold_txt', title: '操作类型' },
-    { field: 'content', title: '操作内容', slots: { default: 'content'} },
+    { field: 'content', title: '操作内容', slots: { default: 'content' } },
     { field: 'operate_time', title: '操作时间' },
     { field: 'created_at', title: '上传时间' },
     { type: 'html', title: '操作', slots: { default: 'action' } },
diff --git a/apps/web-antd/src/views/log/op-log/index.vue b/apps/web-antd/src/views/log/op-log/index.vue
index 351fb55f..ed93c152 100644
--- a/apps/web-antd/src/views/log/op-log/index.vue
+++ b/apps/web-antd/src/views/log/op-log/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 import { ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -39,12 +38,7 @@ const showModal = (data = {}, isUpdate = false) => {
     <FormModal />
     <Grid>
       <template #toolbar-actions>
-        <TableAction
-          :actions="[
-          ]"
-          :drop-down-actions="[
-          ]"
-        >
+        <TableAction :actions="[]" :drop-down-actions="[]">
           <template #more>
             <Button style="margin-left: 16px">
               批量操作
@@ -53,8 +47,8 @@ const showModal = (data = {}, isUpdate = false) => {
           </template>
         </TableAction>
       </template>
-      <template #old_admin="{ row }">
-        {{ row.old_admin?.username || row.admin?.nick_name }}
+      <template #admin="{ row }">
+        {{ row.admin?.nick_name || '-' }}
       </template>
       <template #content="{ row }">
         {{
diff --git a/apps/web-antd/src/views/notice/api/index.ts b/apps/web-antd/src/views/notice/api/index.ts
index 7e6fa2e3..cb2f82a0 100644
--- a/apps/web-antd/src/views/notice/api/index.ts
+++ b/apps/web-antd/src/views/notice/api/index.ts
@@ -23,21 +23,31 @@ export async function getUserOptionApi() {
   return requestClient.get<any>(`${prefix}user-option`);
 }
 
+/**
+ * 通知其它页面/标签页「已读状态变了」，铃铛会据此重新拉未读列表
+ * 必须在接口成功后再写：请求还没落库就触发刷新，会拉回旧的未读数据，刚点掉的消息又闪回铃铛
+ */
+function broadcastReadStatus() {
+  localStorage.setItem(`readStatus`, Math.random().toString(36).slice(2));
+}
+
 /**
  * 查询通知详情（会标记已读）
  */
 export async function getNoticeDetailApi(id: number) {
-  const result = requestClient.get<any>(`${prefix}detail`, { params: { id } });
-  localStorage.setItem(`readStatus`, Math.random().toString(36).slice(2));
+  const result = await requestClient.get<any>(`${prefix}detail`, {
+    params: { id },
+  });
+  broadcastReadStatus();
   return result;
 }
 
 /**
- * 设置已读某条消息
+ * 设置已读某条消息（后端幂等：已读过再调也返回成功）
  */
 export async function readApi(id: number) {
-  const result = requestClient.post<any>(`${prefix}read`, { id });
-  localStorage.setItem(`readStatus`, Math.random().toString(36).slice(2));
+  const result = await requestClient.post<any>(`${prefix}read`, { id });
+  broadcastReadStatus();
   return result;
 }
 
@@ -45,8 +55,8 @@ export async function readApi(id: number) {
  * 设置已读全部消息
  */
 export async function readAllApi() {
-  const result = requestClient.post<any>(`${prefix}read-all`);
-  localStorage.setItem(`readStatus`, Math.random().toString(36).slice(2));
+  const result = await requestClient.post<any>(`${prefix}read-all`);
+  broadcastReadStatus();
   return result;
 }
 
diff --git a/apps/web-antd/src/views/notice/canvas-icon/NoticeCanvasIcon.vue b/apps/web-antd/src/views/notice/canvas-icon/NoticeCanvasIcon.vue
new file mode 100644
index 00000000..fd895230
--- /dev/null
+++ b/apps/web-antd/src/views/notice/canvas-icon/NoticeCanvasIcon.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+/**
+ * 消息类型 Canvas 动态图标
+ * - 按 type_code 绘制专属动效（齿轮转动、喇叭声波、硬币翻转、沙漏流沙……），颜色跟消息类型字典 type_color
+ * - animate=false（如已读消息）只画定格帧，减少无意义的动画干扰
+ * - 不在可视区（铃铛弹层关闭、列表滚出屏幕）时自动停止绘制；系统开启「减少动态效果」时也只画定格帧
+ * - 按 devicePixelRatio 放大画布，高分屏下线条不发虚
+ */
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import { resolveNoticeGlow } from '../action/types';
+import { renderNoticeIcon } from './drawers';
+import { subscribeTick } from './ticker';
+
+const props = withDefaults(
+  defineProps<{
+    typeCode?: string;
+    /** 消息类型字典的 type_color token（sky / amber / red ...） */
+    color?: string;
+    /** CSS 像素尺寸 */
+    size?: number;
+    animate?: boolean;
+  }>(),
+  { typeCode: '', color: 'sky', size: 40, animate: true },
+);
+
+const canvasRef = ref<HTMLCanvasElement>();
+const { isDark } = usePreferences();
+
+/** 每个实例随机相位，避免同类型图标整齐划一地同步摆动 */
+const phaseOffset = Math.random() * 10;
+const reducedMotion =
+  typeof window !== 'undefined' &&
+  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+let ctx: CanvasRenderingContext2D | null = null;
+let dpr = 1;
+let visible = false;
+let unsubscribe: (() => void) | null = null;
+let observer: IntersectionObserver | null = null;
+
+/** 画布物理尺寸 = CSS 尺寸 × DPR */
+function setupCanvas() {
+  const el = canvasRef.value;
+  if (!el) return;
+  dpr = Math.min(window.devicePixelRatio || 1, 3);
+  el.width = Math.round(props.size * dpr);
+  el.height = Math.round(props.size * dpr);
+  ctx = el.getContext('2d');
+}
+
+function draw(t: number, dark: boolean, still: boolean) {
+  if (!ctx) return;
+  renderNoticeIcon(ctx, {
+    size: props.size,
+    dpr,
+    typeCode: props.typeCode,
+    glow: resolveNoticeGlow(props.color),
+    t: t + phaseOffset,
+    still,
+    dark,
+  });
+}
+
+function onTick(t: number, dark: boolean) {
+  draw(t, dark, false);
+}
+
+/**
+ * 根据「是否要动 + 是否可见」决定订阅或退订共享时钟；不动时补画一帧定格图
+ */
+function syncAnimation() {
+  const shouldRun = props.animate && visible && !reducedMotion;
+  if (shouldRun && !unsubscribe) {
+    unsubscribe = subscribeTick(onTick);
+  } else if (!shouldRun && unsubscribe) {
+    unsubscribe();
+    unsubscribe = null;
+  }
+  if (!shouldRun) draw(0, isDark.value, true);
+}
+
+onMounted(() => {
+  setupCanvas();
+  draw(0, isDark.value, true);
+  if (typeof IntersectionObserver === 'undefined') {
+    visible = true;
+    syncAnimation();
+    return;
+  }
+  observer = new IntersectionObserver((entries) => {
+    visible = entries.some((e) => e.isIntersecting);
+    syncAnimation();
+  });
+  if (canvasRef.value) observer.observe(canvasRef.value);
+});
+
+onBeforeUnmount(() => {
+  unsubscribe?.();
+  unsubscribe = null;
+  observer?.disconnect();
+  observer = null;
+});
+
+watch(
+  () => props.size,
+  () => {
+    setupCanvas();
+    syncAnimation();
+  },
+);
+watch(() => [props.animate, props.typeCode, props.color], syncAnimation);
+/** 主题切换时，静止的图标也要按新配色重画 */
+watch(isDark, () => {
+  if (!unsubscribe) draw(0, isDark.value, true);
+});
+</script>
+
+<template>
+  <canvas
+    ref="canvasRef"
+    class="notice-canvas-icon"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+    aria-hidden="true"
+  />
+</template>
+
+<style scoped>
+.notice-canvas-icon {
+  display: block;
+  flex-shrink: 0;
+}
+</style>
diff --git a/apps/web-antd/src/views/notice/canvas-icon/drawers.ts b/apps/web-antd/src/views/notice/canvas-icon/drawers.ts
new file mode 100644
index 00000000..69311df2
--- /dev/null
+++ b/apps/web-antd/src/views/notice/canvas-icon/drawers.ts
@@ -0,0 +1,829 @@
+/**
+ * 消息 Canvas 图标 · 绘制器
+ * - 底板：玻璃圆角方块（类型色渐变 + 左上高光 + 1px 同色边框）
+ * - 图形：在 24×24 坐标系里绘制（与 lucide 图标同网格，直接复用其 SVG path），按 type_code 选择专属动效
+ * - still=true 时画「定格帧」（已读消息 / 系统开启了减少动态效果），动画类进度统一取完成态
+ */
+
+export interface DrawContext {
+  ctx: CanvasRenderingContext2D;
+  /** 秒级时间（已叠加实例随机相位，同类型图标不会同步摆动） */
+  t: number;
+  still: boolean;
+  /** 类型主色，a 为透明度 */
+  color: (a?: number) => string;
+}
+
+type Drawer = (d: DrawContext) => void;
+
+const TAU = Math.PI * 2;
+
+/** Path2D 缓存：同一条 SVG path 只解析一次 */
+const pathCache = new Map<string, Path2D>();
+function P(d: string) {
+  let p = pathCache.get(d);
+  if (!p) {
+    p = new Path2D(d);
+    pathCache.set(d, p);
+  }
+  return p;
+}
+
+function stroke(d: DrawContext, ...paths: string[]) {
+  paths.forEach((p) => d.ctx.stroke(P(p)));
+}
+
+function fillSoft(d: DrawContext, path: string, alpha = 0.14) {
+  const { ctx } = d;
+  ctx.save();
+  ctx.shadowBlur = 0;
+  ctx.fillStyle = d.color(alpha);
+  ctx.fill(P(path));
+  ctx.restore();
+}
+
+/** 0~1 循环进度；定格帧固定返回 1 */
+function phase(d: DrawContext, period: number, offset = 0) {
+  if (d.still) return 1;
+  return ((((d.t + offset) % period) + period) % period) / period;
+}
+
+/**
+ * 「画出来 → 停留 → 重来」的进度：前 drawPortion 段从 0 缓动到 1，其余时间保持 1
+ */
+function drawCycle(d: DrawContext, period: number, drawPortion = 0.55) {
+  const p = phase(d, period);
+  const x = Math.min(1, p / drawPortion);
+  return 1 - (1 - x) ** 3;
+}
+
+/** 用虚线偏移实现「描边生长」，length 为路径近似长度 */
+function strokeProgress(
+  d: DrawContext,
+  path: string,
+  length: number,
+  p: number,
+) {
+  if (p <= 0) return;
+  const { ctx } = d;
+  ctx.save();
+  ctx.setLineDash([length, length]);
+  ctx.lineDashOffset = length * (1 - p);
+  ctx.stroke(P(path));
+  ctx.restore();
+}
+
+/** 水平线段按进度绘制（账单行、发票行依次出现） */
+function lineProgress(
+  d: DrawContext,
+  x: number,
+  y: number,
+  len: number,
+  p: number,
+) {
+  if (p <= 0) return;
+  const { ctx } = d;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(x + len * Math.min(1, p), y);
+  ctx.stroke();
+}
+
+/** 四角星闪光 */
+function sparkle(d: DrawContext, cx: number, cy: number, r: number) {
+  const { ctx } = d;
+  ctx.save();
+  ctx.fillStyle = d.color(1);
+  ctx.beginPath();
+  ctx.moveTo(cx, cy - r);
+  ctx.quadraticCurveTo(cx, cy, cx + r, cy);
+  ctx.quadraticCurveTo(cx, cy, cx, cy + r);
+  ctx.quadraticCurveTo(cx, cy, cx - r, cy);
+  ctx.quadraticCurveTo(cx, cy, cx, cy - r);
+  ctx.fill();
+  ctx.restore();
+}
+
+/** 在 clip 区域内扫过一道斜向高光（VIP 皇冠、银行卡） */
+function shine(d: DrawContext, clipPath: string, period: number) {
+  if (d.still) return;
+  const { ctx } = d;
+  const x = phase(d, period) * 48 - 12;
+  ctx.save();
+  ctx.clip(P(clipPath));
+  ctx.shadowBlur = 0;
+  const g = ctx.createLinearGradient(x - 5, 0, x + 5, 12);
+  g.addColorStop(0, 'rgba(255,255,255,0)');
+  g.addColorStop(0.5, 'rgba(255,255,255,0.7)');
+  g.addColorStop(1, 'rgba(255,255,255,0)');
+  ctx.fillStyle = g;
+  ctx.fillRect(0, 0, 24, 24);
+  ctx.restore();
+}
+
+/** 绕点旋转后执行绘制 */
+function rotateAt(
+  d: DrawContext,
+  cx: number,
+  cy: number,
+  angle: number,
+  fn: () => void,
+) {
+  const { ctx } = d;
+  ctx.save();
+  ctx.translate(cx, cy);
+  ctx.rotate(angle);
+  ctx.translate(-cx, -cy);
+  fn();
+  ctx.restore();
+}
+
+/** 间歇抖动：每 period 秒抖 burst 秒，振幅随时间衰减 */
+function burstShake(
+  d: DrawContext,
+  period: number,
+  burst: number,
+  amp: number,
+  freq = 50,
+) {
+  if (d.still) return 0;
+  const ph = d.t % period;
+  if (ph > burst) return 0;
+  return Math.sin(ph * freq) * amp * (1 - ph / burst);
+}
+
+/** 沿折线取距起点 dist 处的坐标（价格走势的游标点） */
+function pointAlong(
+  points: [number, number][],
+  dist: number,
+): [number, number] {
+  let remain = dist;
+  for (let i = 1; i < points.length; i++) {
+    const [x0, y0] = points[i - 1] as [number, number];
+    const [x1, y1] = points[i] as [number, number];
+    const seg = Math.hypot(x1 - x0, y1 - y0);
+    if (remain <= seg) {
+      const k = remain / seg;
+      return [x0 + (x1 - x0) * k, y0 + (y1 - y0) * k];
+    }
+    remain -= seg;
+  }
+  return points[points.length - 1] as [number, number];
+}
+
+const BELL = 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9';
+const CROWN =
+  'M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z';
+const HEART =
+  'M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z';
+const ALERT =
+  'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3';
+const CARD =
+  'M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z';
+const DOC = 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z';
+const RECEIPT =
+  'M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z';
+
+/** 默认：铃铛间歇摇摆，铃舌反向摆动更有惯性 */
+const drawBell: Drawer = (d) => {
+  const swing = d.still
+    ? 0
+    : 0.3 * Math.sin(d.t * 9) * Math.max(0, Math.sin(d.t * 1.6));
+  rotateAt(d, 12, 3, swing, () => {
+    fillSoft(d, BELL);
+    stroke(d, BELL);
+  });
+  rotateAt(d, 12, 3, -swing * 0.6, () =>
+    stroke(d, 'M10.3 21a1.94 1.94 0 0 0 3.4 0'),
+  );
+};
+
+/** 系统通知：齿轮匀速旋转 */
+const drawGear: Drawer = (d) => {
+  const { ctx } = d;
+  const angle = d.still ? 0 : d.t * 0.9;
+  rotateAt(d, 12, 12, angle, () => {
+    ctx.beginPath();
+    const teeth = 8;
+    const step = TAU / teeth;
+    for (let i = 0; i < teeth; i++) {
+      const base = i * step;
+      const pts: [number, number][] = [
+        [base - 0.2, 9.6],
+        [base + 0.2, 9.6],
+        [base + 0.36, 7.3],
+        [base + step - 0.36, 7.3],
+      ];
+      pts.forEach(([a, r], k) => {
+        const x = 12 + Math.cos(a) * r;
+        const y = 12 + Math.sin(a) * r;
+        if (i === 0 && k === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      });
+    }
+    ctx.closePath();
+    ctx.save();
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = d.color(0.14);
+    ctx.fill();
+    ctx.restore();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(12, 12, 3, 0, TAU);
+    ctx.stroke();
+  });
+};
+
+/** 系统公告：喇叭 + 声波向外扩散渐隐 */
+const drawMegaphone: Drawer = (d) => {
+  const { ctx } = d;
+  const body = 'M3 9.5h3.5L13 5v14l-6.5-4.5H3z';
+  fillSoft(d, body);
+  stroke(d, body, 'M6.5 14.5 8 19.5h2.5l-1-4.2');
+  const fixed = [0.2, 0.5, 0.8];
+  for (let k = 0; k < 3; k++) {
+    const f = d.still ? (fixed[k] as number) : (d.t * 0.9 + k / 3) % 1;
+    ctx.save();
+    ctx.globalAlpha = d.still ? 1 - k * 0.28 : 1 - f;
+    ctx.beginPath();
+    ctx.arc(13, 12, 2.6 + f * 7.6, -0.7, 0.7);
+    ctx.stroke();
+    ctx.restore();
+  }
+};
+
+/** VIP：皇冠流光扫过 + 右上角星光闪烁 */
+const drawCrown: Drawer = (d) => {
+  fillSoft(d, CROWN, 0.18);
+  shine(d, CROWN, 2.6);
+  stroke(d, CROWN, 'M5 21h14');
+  const s = d.still ? 1 : 0.35 + 0.65 * Math.abs(Math.sin(d.t * 2.2));
+  sparkle(d, 20.5, 2.8, 2.6 * s);
+  sparkle(d, 3.2, 2.6, 1.5 * (d.still ? 0.8 : 1 - s * 0.6));
+};
+
+/** 提现待审：¥ 硬币翻转（横向缩放模拟 3D） */
+const drawCoin: Drawer = (d) => {
+  const { ctx } = d;
+  const flip = d.still ? 1 : Math.cos(d.t * 2.2);
+  const sx = Math.max(0.08, Math.abs(flip));
+  const edge = (1 - sx) * 1.6 * (flip >= 0 ? 1 : -1);
+  ctx.save();
+  ctx.globalAlpha = 0.4;
+  ctx.beginPath();
+  ctx.ellipse(12 + edge, 12, 8.6 * sx, 8.6, 0, 0, TAU);
+  ctx.stroke();
+  ctx.restore();
+  ctx.beginPath();
+  ctx.ellipse(12, 12, 8.6 * sx, 8.6, 0, 0, TAU);
+  ctx.save();
+  ctx.shadowBlur = 0;
+  ctx.fillStyle = d.color(0.16);
+  ctx.fill();
+  ctx.restore();
+  ctx.stroke();
+  if (sx > 0.3) {
+    ctx.save();
+    ctx.translate(12, 12);
+    ctx.scale(sx, 1);
+    ctx.translate(-12, -12);
+    ctx.globalAlpha = Math.min(1, (sx - 0.3) * 2);
+    stroke(
+      d,
+      'M9 7.5l3 3.6 3-3.6',
+      'M12 11.1V17',
+      'M9.4 12.6h5.2',
+      'M9.4 15h5.2',
+    );
+    ctx.restore();
+  }
+  if (!d.still && flip > 0.92) sparkle(d, 18.5, 5, 1.8);
+};
+
+/** 仓品待审：包裹上下浮动，地面投影随高度缩放 */
+const drawPackage: Drawer = (d) => {
+  const { ctx } = d;
+  const bob = d.still ? 0 : Math.sin(d.t * 2.6) * 0.9;
+  ctx.save();
+  ctx.shadowBlur = 0;
+  ctx.fillStyle = d.color(0.25);
+  ctx.beginPath();
+  ctx.ellipse(12, 23, 6 - bob * 0.8, 0.9, 0, 0, TAU);
+  ctx.fill();
+  ctx.restore();
+  ctx.save();
+  ctx.translate(12, 12 + bob - 1);
+  ctx.scale(0.88, 0.88);
+  ctx.translate(-12, -12);
+  const box =
+    'M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z';
+  fillSoft(d, box);
+  stroke(
+    d,
+    box,
+    'M12 22V12',
+    'm3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7',
+    'm7.5 4.27 9 5.15',
+  );
+  ctx.restore();
+};
+
+/** 门店录入待审：店铺门口灯光呼吸 */
+const drawStore: Drawer = (d) => {
+  const glow = d.still ? 0.3 : 0.12 + 0.36 * (0.5 + 0.5 * Math.sin(d.t * 2.4));
+  fillSoft(d, 'M9 22v-4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4z', glow);
+  stroke(
+    d,
+    'm2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7',
+    'M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8',
+    'M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4',
+    'M2 7h20',
+    'M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7',
+  );
+};
+
+/** 医生预填待审：心形双拍跳动 + 心电线描出 */
+const drawHeartPulse: Drawer = (d) => {
+  const { ctx } = d;
+  const ph = phase(d, 1.2);
+  const beat = (c: number) => Math.exp(-((ph - c) ** 2) / 0.0025);
+  const s = d.still ? 1 : 1 + 0.08 * beat(0.12) + 0.05 * beat(0.32);
+  ctx.save();
+  ctx.translate(12, 12);
+  ctx.scale(s, s);
+  ctx.translate(-12, -12);
+  fillSoft(d, HEART);
+  stroke(d, HEART);
+  ctx.restore();
+  strokeProgress(
+    d,
+    'M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27',
+    28.7,
+    drawCycle(d, 1.8, 0.7),
+  );
+};
+
+/** 处方审核：Rx 处方夹 + 扫描线自上而下 */
+const drawPrescription: Drawer = (d) => {
+  const { ctx } = d;
+  const board =
+    'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2';
+  const clip =
+    'M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z';
+  fillSoft(
+    d,
+    'M6 4h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z',
+    0.1,
+  );
+  stroke(d, board, clip);
+  ctx.save();
+  ctx.lineWidth = 1.6;
+  stroke(
+    d,
+    'M9 10v7',
+    'M9 10h2.4a1.7 1.7 0 0 1 0 3.4H9',
+    'M11 13.4l4 4.1',
+    'M15 13.6l-2.6 2.9',
+  );
+  ctx.restore();
+  if (!d.still) {
+    const y = 7 + phase(d, 1.6) * 13;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(4.8, 6.5, 14.4, 14.8);
+    ctx.clip();
+    ctx.shadowBlur = 0;
+    const g = ctx.createLinearGradient(0, y - 3.5, 0, y);
+    g.addColorStop(0, d.color(0));
+    g.addColorStop(1, d.color(0.35));
+    ctx.fillStyle = g;
+    ctx.fillRect(4.8, y - 3.5, 14.4, 3.5);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = d.color(0.9);
+    ctx.beginPath();
+    ctx.moveTo(5.5, y);
+    ctx.lineTo(18.5, y);
+    ctx.stroke();
+    ctx.restore();
+  }
+};
+
+/** 开票待办：小票上的明细行依次「打印」出来 */
+const drawReceipt: Drawer = (d) => {
+  fillSoft(d, RECEIPT, 0.12);
+  stroke(d, RECEIPT);
+  const p = drawCycle(d, 2.8, 0.7) * 3;
+  lineProgress(d, 8, 8, 8, p);
+  lineProgress(d, 8, 12, 8, p - 1);
+  lineProgress(d, 8, 16, 5, p - 2);
+};
+
+/** 运营总结 / 药价变更兜底：柱状图柱子错峰起伏 */
+const drawBars: Drawer = (d) => {
+  const { ctx } = d;
+  stroke(d, 'M3 3v18h18');
+  const xs = [7.5, 12.5, 17.5];
+  const base = [6, 10.5, 8];
+  const tops: [number, number][] = [];
+  xs.forEach((x, i) => {
+    const h =
+      (base[i] as number) + (d.still ? 0 : Math.sin(d.t * 2.2 + i * 1.3) * 2.2);
+    tops.push([x, 18 - h]);
+    ctx.save();
+    ctx.shadowBlur = 0;
+    const g = ctx.createLinearGradient(0, 18 - h, 0, 18);
+    g.addColorStop(0, d.color(0.95));
+    g.addColorStop(1, d.color(0.35));
+    ctx.fillStyle = g;
+    ctx.beginPath();
+    ctx.roundRect(x - 1.7, 18 - h, 3.4, h, [1.2, 1.2, 0, 0]);
+    ctx.fill();
+    ctx.restore();
+  });
+  ctx.save();
+  ctx.lineWidth = 1;
+  ctx.globalAlpha = 0.6;
+  ctx.beginPath();
+  tops.forEach(([x, y], i) =>
+    i === 0 ? ctx.moveTo(x, y - 2) : ctx.lineTo(x, y - 2),
+  );
+  ctx.stroke();
+  ctx.restore();
+};
+
+/** 队列失败：警示三角间歇抖动 + 外圈告警波纹 */
+const drawAlert: Drawer = (d) => {
+  const { ctx } = d;
+  if (!d.still) {
+    const f = phase(d, 1.6);
+    ctx.save();
+    ctx.globalAlpha = (1 - f) * 0.5;
+    ctx.lineWidth = 1.2;
+    ctx.beginPath();
+    ctx.arc(12, 13, 6 + f * 6, 0, TAU);
+    ctx.stroke();
+    ctx.restore();
+  }
+  ctx.save();
+  ctx.translate(burstShake(d, 2.2, 0.45, 0.9), 0);
+  fillSoft(d, ALERT, 0.16);
+  stroke(d, ALERT, 'M12 9v4', 'M12 17h.01');
+  ctx.restore();
+};
+
+/** 物流查询失败：货车行驶（路面虚线后移、车轮转动）+ 右上角失败角标 */
+const drawTruck: Drawer = (d) => {
+  const { ctx } = d;
+  ctx.save();
+  ctx.lineWidth = 1.2;
+  ctx.globalAlpha = 0.5;
+  const offset = d.still ? 0 : (d.t * 8) % 4;
+  for (let x = -offset; x < 24; x += 4) {
+    ctx.beginPath();
+    ctx.moveTo(Math.max(1, x), 22.8);
+    ctx.lineTo(Math.min(23, x + 2), 22.8);
+    ctx.stroke();
+  }
+  ctx.restore();
+  ctx.save();
+  ctx.translate(0, d.still ? 0 : -Math.abs(Math.sin(d.t * 10)) * 0.35);
+  fillSoft(
+    d,
+    'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2',
+    0.12,
+  );
+  stroke(
+    d,
+    'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2',
+    'M15 18H9',
+    'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14',
+  );
+  ctx.restore();
+  const spin = d.still ? 0 : -d.t * 8;
+  [7, 17].forEach((cx) => {
+    ctx.beginPath();
+    ctx.arc(cx, 18, 2, 0, TAU);
+    ctx.stroke();
+    ctx.save();
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(cx + Math.cos(spin) * 1.2, 18 + Math.sin(spin) * 1.2);
+    ctx.lineTo(cx - Math.cos(spin) * 1.2, 18 - Math.sin(spin) * 1.2);
+    ctx.stroke();
+    ctx.restore();
+  });
+  const bs = d.still ? 1 : 1 + 0.12 * Math.sin(d.t * 4);
+  ctx.save();
+  ctx.translate(20.4, 3.8);
+  ctx.scale(bs, bs);
+  ctx.fillStyle = d.color(1);
+  ctx.beginPath();
+  ctx.arc(0, 0, 3.4, 0, TAU);
+  ctx.fill();
+  ctx.shadowBlur = 0;
+  ctx.strokeStyle = 'rgba(255,255,255,0.95)';
+  ctx.lineWidth = 1.3;
+  ctx.beginPath();
+  ctx.moveTo(-1.2, -1.2);
+  ctx.lineTo(1.2, 1.2);
+  ctx.moveTo(1.2, -1.2);
+  ctx.lineTo(-1.2, 1.2);
+  ctx.stroke();
+  ctx.restore();
+};
+
+/** 药价变更：走势线描出，游标点沿线前进，结束后弹出箭头 */
+const drawTrend: Drawer = (d) => {
+  const { ctx } = d;
+  const pts: [number, number][] = [
+    [2, 17],
+    [8.5, 10.5],
+    [13.5, 15.5],
+    [22, 7],
+  ];
+  const len = 28.3;
+  const p = drawCycle(d, 2.4, 0.6);
+  strokeProgress(d, 'M2 17 8.5 10.5 13.5 15.5 22 7', len, p);
+  if (p > 0.92) {
+    ctx.save();
+    ctx.globalAlpha = Math.min(1, (p - 0.92) / 0.08);
+    stroke(d, 'M16 7h6v6');
+    ctx.restore();
+  }
+  if (!d.still && p < 1) {
+    const [x, y] = pointAlong(pts, len * p);
+    ctx.beginPath();
+    ctx.arc(x, y, 1.6, 0, TAU);
+    ctx.fill();
+  }
+};
+
+/** 日历待办：日历上的勾选描出 */
+const drawCalendar: Drawer = (d) => {
+  fillSoft(d, 'M5 4h14a2 2 0 0 1 2 2v4H3V6a2 2 0 0 1 2-2z', 0.2);
+  stroke(
+    d,
+    'M8 2v4',
+    'M16 2v4',
+    'M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z',
+    'M3 10h18',
+  );
+  strokeProgress(d, 'M9 16l2 2 4-4', 8.5, drawCycle(d, 2.4, 0.45));
+};
+
+/** 排班变更：时钟分针快走、时针慢走 */
+const drawClock: Drawer = (d) => {
+  const { ctx } = d;
+  ctx.beginPath();
+  ctx.arc(12, 12, 10, 0, TAU);
+  ctx.save();
+  ctx.shadowBlur = 0;
+  ctx.fillStyle = d.color(0.12);
+  ctx.fill();
+  ctx.restore();
+  ctx.stroke();
+  ctx.save();
+  ctx.lineWidth = 1;
+  for (let i = 0; i < 4; i++) {
+    const a = (i * TAU) / 4;
+    ctx.beginPath();
+    ctx.moveTo(12 + Math.cos(a) * 7.6, 12 + Math.sin(a) * 7.6);
+    ctx.lineTo(12 + Math.cos(a) * 8.6, 12 + Math.sin(a) * 8.6);
+    ctx.stroke();
+  }
+  ctx.restore();
+  const minute = d.still ? -Math.PI / 2 : d.t * 1.8 - Math.PI / 2;
+  const hour = d.still ? Math.PI / 6 : d.t * 0.15;
+  ctx.beginPath();
+  ctx.moveTo(12, 12);
+  ctx.lineTo(12 + Math.cos(minute) * 6.2, 12 + Math.sin(minute) * 6.2);
+  ctx.moveTo(12, 12);
+  ctx.lineTo(12 + Math.cos(hour) * 4, 12 + Math.sin(hour) * 4);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(12, 12, 1, 0, TAU);
+  ctx.fill();
+};
+
+/** 公户支付：银行卡斜向流光 */
+const drawCard: Drawer = (d) => {
+  fillSoft(d, CARD, 0.14);
+  shine(d, CARD, 2.4);
+  stroke(d, CARD, 'M2 10h20', 'M6 15h4', 'M14 15h2');
+};
+
+/** 公户日账单：单据明细行依次出现 */
+const drawBill: Drawer = (d) => {
+  fillSoft(d, DOC, 0.12);
+  stroke(d, DOC, 'M14 2v4a2 2 0 0 0 2 2h4');
+  const p = drawCycle(d, 2.8, 0.7) * 3;
+  lineProgress(d, 8, 9, 2, p);
+  lineProgress(d, 8, 13, 8, p - 1);
+  lineProgress(d, 8, 17, 8, p - 2);
+};
+
+/** 公户逾期：闹钟间歇剧烈摇晃 + 两侧震动线 */
+const drawAlarm: Drawer = (d) => {
+  const { ctx } = d;
+  const angle = burstShake(d, 1.8, 0.5, 0.16, 55);
+  rotateAt(d, 12, 13, angle, () => {
+    ctx.beginPath();
+    ctx.arc(12, 13, 8, 0, TAU);
+    ctx.save();
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = d.color(0.14);
+    ctx.fill();
+    ctx.restore();
+    ctx.stroke();
+    stroke(
+      d,
+      'M12 9v4l2 2',
+      'M5 3 2 6',
+      'm22 6-3-3',
+      'M6.38 18.7 4 21',
+      'M17.64 18.67 20 21',
+    );
+  });
+  if (Math.abs(angle) > 0.02) {
+    ctx.save();
+    ctx.lineWidth = 1.1;
+    ctx.globalAlpha = Math.min(1, Math.abs(angle) * 8);
+    stroke(d, 'M1 11.5v3', 'M23 11.5v3');
+    ctx.restore();
+  }
+};
+
+/** 即将到期：沙漏流沙，漏完后翻转重来 */
+const drawHourglass: Drawer = (d) => {
+  const { ctx } = d;
+  const period = 4;
+  const ph = d.still ? 1.2 : d.t % period;
+  const flowEnd = 3.4;
+  const p = Math.min(1, ph / flowEnd);
+  const flipK = ph > flowEnd ? (ph - flowEnd) / (period - flowEnd) : 0;
+  const flip =
+    Math.PI * (flipK < 0.5 ? 2 * flipK * flipK : 1 - (-2 * flipK + 2) ** 2 / 2);
+  const sandP = d.still ? 0.45 : p;
+  rotateAt(d, 12, 12, flip, () => {
+    ctx.save();
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = d.color(0.6);
+    const k = 1 - sandP;
+    if (k > 0.02) {
+      ctx.beginPath();
+      ctx.moveTo(12, 11.6);
+      ctx.lineTo(12 - 4.1 * k, 11.6 - 4.8 * k);
+      ctx.lineTo(12 + 4.1 * k, 11.6 - 4.8 * k);
+      ctx.closePath();
+      ctx.fill();
+    }
+    const hw = 4.6 * Math.min(1, 0.4 + sandP);
+    const h = 4.2 * sandP;
+    if (h > 0.05) {
+      ctx.beginPath();
+      ctx.moveTo(12 - hw, 21.4);
+      ctx.lineTo(12 + hw, 21.4);
+      ctx.lineTo(12, 21.4 - h);
+      ctx.closePath();
+      ctx.fill();
+    }
+    ctx.restore();
+    if (!d.still && p < 1 && flipK === 0) {
+      ctx.save();
+      ctx.lineWidth = 0.9;
+      ctx.setLineDash([1, 1.6]);
+      ctx.lineDashOffset = -d.t * 20;
+      ctx.beginPath();
+      ctx.moveTo(12, 12);
+      ctx.lineTo(12, 21.4 - h);
+      ctx.stroke();
+      ctx.restore();
+    }
+    stroke(
+      d,
+      'M5 22h14',
+      'M5 2h14',
+      'M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22',
+      'M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2',
+    );
+  });
+};
+
+/**
+ * type_code → 绘制器（与后端 AdminNoticeTypeCodeEnum 对齐）
+ * 未登记的类型回落到铃铛，新增消息类型时在这里补一行即可
+ */
+const DRAWERS: Record<string, Drawer> = {
+  default: drawBell,
+  system: drawGear,
+  broadcast: drawMegaphone,
+  vip: drawCrown,
+  withdraw_audit: drawCoin,
+  warehouse_product_audit: drawPackage,
+  store_input_audit: drawStore,
+  doctor_input_audit: drawHeartPulse,
+  prescription_audit: drawPrescription,
+  invoice_todo: drawReceipt,
+  period_report: drawBars,
+  queue_failure: drawAlert,
+  express_track_fail: drawTruck,
+  price_change: drawTrend,
+  calendar_todo: drawCalendar,
+  schedule_change: drawClock,
+  public_account_pay: drawCard,
+  public_account_daily_bill: drawBill,
+  public_account_daily_overdue: drawAlarm,
+  public_account_daily_approaching: drawHourglass,
+};
+
+/** 绘制圆角矩形路径（底板用） */
+function roundRectPath(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+) {
+  ctx.beginPath();
+  ctx.roundRect(x, y, w, h, r);
+}
+
+/** 解析 "199 89% 48%" 形式的 HSL 通道 */
+function parseHsl(hsl: string): [number, number, number] {
+  const [h, s, l] = hsl.split(/\s+/).map((v) => Number.parseFloat(v));
+  return [h ?? 199, s ?? 89, l ?? 48];
+}
+
+export interface RenderOptions {
+  size: number;
+  dpr: number;
+  typeCode?: string;
+  /** 类型主色 HSL 通道，如 "199 89% 48%"（来自 NOTICE_GLOW_HSL） */
+  glow: string;
+  t: number;
+  still: boolean;
+  dark: boolean;
+}
+
+/**
+ * 绘制一帧完整图标：玻璃底板 + 类型图形
+ * 暗色下主色提亮、高光减弱，保证在深色背景上仍然清晰且不刺眼
+ */
+export function renderNoticeIcon(
+  ctx: CanvasRenderingContext2D,
+  o: RenderOptions,
+) {
+  const { size, dpr } = o;
+  const [h, s, l] = parseHsl(o.glow);
+  const light = o.dark ? Math.min(l + 12, 76) : l;
+  const color = (a = 1) => `hsla(${h}, ${s}%, ${light}%, ${a})`;
+
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, size, size);
+
+  const radius = size * 0.3;
+  roundRectPath(ctx, 0.5, 0.5, size - 1, size - 1, radius);
+  const bg = ctx.createLinearGradient(0, 0, size, size);
+  bg.addColorStop(0, color(o.dark ? 0.3 : 0.22));
+  bg.addColorStop(1, color(o.dark ? 0.1 : 0.07));
+  ctx.fillStyle = bg;
+  ctx.fill();
+
+  ctx.save();
+  ctx.clip();
+  const hl = ctx.createRadialGradient(
+    size * 0.22,
+    0,
+    0,
+    size * 0.22,
+    0,
+    size * 0.8,
+  );
+  hl.addColorStop(0, `rgba(255,255,255,${o.dark ? 0.14 : 0.55})`);
+  hl.addColorStop(1, 'rgba(255,255,255,0)');
+  ctx.fillStyle = hl;
+  ctx.fillRect(0, 0, size, size);
+  ctx.restore();
+
+  roundRectPath(ctx, 0.5, 0.5, size - 1, size - 1, radius);
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = color(0.35);
+  ctx.stroke();
+
+  const unit = (size * 0.58) / 24;
+  ctx.save();
+  ctx.translate(size / 2, size / 2);
+  ctx.scale(unit, unit);
+  ctx.translate(-12, -12);
+  ctx.lineWidth = 1.8;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.strokeStyle = color(1);
+  ctx.fillStyle = color(1);
+  ctx.shadowColor = color(0.45);
+  ctx.shadowBlur = 3 * dpr;
+  const drawer = DRAWERS[o.typeCode || ''] || drawBell;
+  drawer({ ctx, t: o.t, still: o.still, color });
+  ctx.restore();
+}
diff --git a/apps/web-antd/src/views/notice/canvas-icon/ticker.ts b/apps/web-antd/src/views/notice/canvas-icon/ticker.ts
new file mode 100644
index 00000000..36633f23
--- /dev/null
+++ b/apps/web-antd/src/views/notice/canvas-icon/ticker.ts
@@ -0,0 +1,29 @@
+/**
+ * 消息 Canvas 图标 · 共享动画时钟
+ * 所有图标实例共用一个 requestAnimationFrame 循环，而不是每个图标各开一个：
+ * 铃铛下拉 + 消息中心可能同时有几十个图标，一个循环能把调度开销压到最低，且无订阅时自动停表
+ */
+type TickFn = (seconds: number, dark: boolean) => void;
+
+const subscribers = new Set<TickFn>();
+let rafId = 0;
+
+/** 每帧读取一次暗色状态并分发给所有订阅者 */
+function loop(now: number) {
+  const dark = document.documentElement.classList.contains('dark');
+  const seconds = now / 1000;
+  subscribers.forEach((fn) => fn(seconds, dark));
+  rafId = subscribers.size > 0 ? requestAnimationFrame(loop) : 0;
+}
+
+/**
+ * 订阅动画帧，返回取消订阅函数
+ * @param fn 每帧回调（秒级时间戳，是否暗色）
+ */
+export function subscribeTick(fn: TickFn) {
+  subscribers.add(fn);
+  if (!rafId) rafId = requestAnimationFrame(loop);
+  return () => {
+    subscribers.delete(fn);
+  };
+}
diff --git a/apps/web-antd/src/views/notice/index.vue b/apps/web-antd/src/views/notice/index.vue
index 8b9cf186..7cf80575 100644
--- a/apps/web-antd/src/views/notice/index.vue
+++ b/apps/web-antd/src/views/notice/index.vue
@@ -5,12 +5,11 @@
  */
 import { computed, onMounted, ref, watch } from 'vue';
 
-import { Page, VbenIcon } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 
 import { notification } from 'ant-design-vue';
 import {
   ArrowRight,
-  Bell,
   CheckCheck,
   Inbox,
   Search,
@@ -18,16 +17,14 @@ import {
   X,
 } from 'lucide-vue-next';
 
+import { GlassCard } from '#/components/glass-card';
 import { openNoticeAction } from '#/views/notice/action/bus';
 import {
   resolveNoticeColor,
   resolveNoticeGlow,
 } from '#/views/notice/action/types';
-import {
-  getNoticeListApi,
-  readAllApi,
-  readApi,
-} from '#/views/notice/api';
+import { getNoticeListApi, readAllApi, readApi } from '#/views/notice/api';
+import NoticeCanvasIcon from '#/views/notice/canvas-icon/NoticeCanvasIcon.vue';
 import { getAdminNoticeTypeOption } from '#/views/system/admin-notice-type/api';
 
 defineOptions({ name: 'NoticeList' });
@@ -209,6 +206,14 @@ function glowOf(item: any) {
   return resolveNoticeGlow(item.type_color);
 }
 
+/**
+ * 是否「重要且未读」：命中时 GlassCard 的 tone 切到 --notice-glow，
+ * 让玻璃卡的边框、微光、右上折射光都跟消息类型色走；已读后回到主题色，高亮随之消失
+ */
+function isPriorityUnread(item: any) {
+  return Number(item.priority) === 1 && Number(item.status) === 0;
+}
+
 /**
  * 点击消息：立刻取消未读态，再打开详情/动作（已读接口不挡 UI）
  */
@@ -318,20 +323,35 @@ async function loadMore() {
           <span
             v-if="s.key === 'unread' && unreadTotal > 0"
             class="seg-badge"
-          >{{ unreadTotal > 99 ? '99+' : unreadTotal }}</span>
+            >{{ unreadTotal > 99 ? '99+' : unreadTotal }}</span
+          >
         </button>
       </nav>
 
       <div class="timeline">
         <!-- 首次加载骨架屏：占位形状与真实消息行一致，避免布局跳动 -->
-        <div v-if="loading && messages.length === 0" class="skeleton-list" aria-label="加载中">
-          <div v-for="n in 5" :key="n" class="skeleton-row" :style="{ '--i': n - 1 }">
-            <div class="sk sk-avatar"></div>
-            <div class="sk-lines">
-              <div class="sk sk-title"></div>
-              <div class="sk sk-text"></div>
+        <div
+          v-if="loading && messages.length === 0"
+          class="skeleton-list"
+          aria-label="加载中"
+        >
+          <!-- 骨架同样用玻璃卡壳，加载完成切到真实消息时质感不跳变；关掉高光减少闪烁噪音 -->
+          <GlassCard
+            v-for="n in 5"
+            :key="n"
+            class="skeleton-row"
+            :style="{ '--i': n - 1 }"
+            padding="none"
+            :specular="false"
+          >
+            <div class="skeleton-grid">
+              <div class="sk sk-avatar"></div>
+              <div class="sk-lines">
+                <div class="sk sk-title"></div>
+                <div class="sk sk-text"></div>
+              </div>
             </div>
-          </div>
+          </GlassCard>
         </div>
 
         <div v-else-if="messages.length === 0" class="empty-state">
@@ -342,92 +362,105 @@ async function loadMore() {
           <p class="empty-desc">新的审核、报表和系统提醒会出现在这里</p>
         </div>
 
-        <section
-          v-for="group in grouped"
-          :key="group.label"
-          class="day-group"
-        >
+        <section v-for="group in grouped" :key="group.label" class="day-group">
           <h3 class="day-label">{{ group.label }}</h3>
           <ul class="day-list">
+            <!--
+              li 只负责列表语义与错峰入场动画（--i）；卡片外观交给 GlassCard。
+              入场动画和悬停上浮分属两层元素，避免动画 fill 把 hover 的 transform 锁死。
+              GlassCard 的 clickable 自带 role=button / tabindex / 回车触发，等价于原先 li 上的点击与键盘处理。
+            -->
             <li
               v-for="(item, idx) in group.items"
               :key="item.id"
-              class="msg"
-              :class="{
-                unread: Number(item.status) === 0,
-                actionable: !!item.action_type,
-                priority: Number(item.priority) === 1,
-              }"
-              :style="{
-                '--i': idx,
-                '--notice-glow': glowOf(item),
-              }"
-              role="button"
-              tabindex="0"
-              @click="handleItemClick(item)"
-              @keydown.enter="handleItemClick(item)"
+              class="msg-item"
+              :style="{ '--i': idx }"
             >
-              <div
-                class="avatar"
-                :class="[colorOf(item).bg, colorOf(item).text]"
+              <GlassCard
+                class="msg"
+                :class="{
+                  unread: Number(item.status) === 0,
+                  actionable: !!item.action_type,
+                  priority: Number(item.priority) === 1,
+                }"
+                :style="{ '--notice-glow': glowOf(item) }"
+                :tone="isPriorityUnread(item) ? 'notice-glow' : 'primary'"
+                padding="none"
+                clickable
+                @click="handleItemClick(item)"
               >
-                <img
-                  v-if="item.cover_url"
-                  :src="item.cover_url"
-                  alt=""
-                  class="avatar-img"
-                />
-                <template v-else>
-                  <VbenIcon
-                    v-if="item.type_icon"
-                    :icon="item.type_icon"
-                    class="size-5"
-                  />
-                  <Bell v-else class="size-5" />
-                </template>
-              </div>
-
-              <div class="content">
-                <div class="row-top">
-                  <h4 class="title">{{ item.title }}</h4>
-                  <time class="time">{{
-                    group.label === '今天' || group.label === '昨天'
-                      ? item._clock
-                      : item._day
-                  }}</time>
-                </div>
-                <p class="preview">{{ item.detail || item.type_name || '查看详情' }}</p>
-                <div class="meta">
-                  <span
-                    v-if="item.type_name"
-                    class="type-tag"
-                    :class="colorOf(item).text"
-                  >{{ item.type_name }}</span>
-                  <span v-if="Number(item.priority) === 1" class="prio-tag"
-                    >重要</span
+                <!-- 三列栅格放在卡片内部：移动端媒体查询改的是这一层的 grid-areas -->
+                <div class="msg-grid">
+                  <div
+                    class="avatar"
+                    :class="
+                      item.cover_url
+                        ? [colorOf(item).bg, colorOf(item).text]
+                        : ''
+                    "
                   >
-                </div>
-              </div>
+                    <img
+                      v-if="item.cover_url"
+                      :src="item.cover_url"
+                      alt=""
+                      class="avatar-img"
+                    />
+                    <!-- 无封面时用类型 Canvas 动态图标：未读才动，已读定格 -->
+                    <NoticeCanvasIcon
+                      v-else
+                      :type-code="item.type_code"
+                      :color="item.type_color"
+                      :size="48"
+                      :animate="Number(item.status) === 0"
+                    />
+                  </div>
 
-              <div class="aside">
-                <span
-                  v-if="Number(item.status) === 0"
-                  class="dot"
-                  aria-label="未读"
-                ></span>
-                <button
-                  v-if="Number(item.status) === 0"
-                  type="button"
-                  class="mark"
-                  @click="markAsRead($event, item)"
-                >
-                  标已读
-                </button>
-                <span v-if="item.action_type" class="go">
-                  去处理
-                  <ArrowRight class="size-3.5" />
-                </span>
-              </div>
+                  <div class="content">
+                    <div class="row-top">
+                      <h4 class="title">{{ item.title }}</h4>
+                      <time class="time">{{
+                        group.label === '今天' || group.label === '昨天'
+                          ? item._clock
+                          : item._day
+                      }}</time>
+                    </div>
+                    <p class="preview">
+                      {{ item.detail || item.type_name || '查看详情' }}
+                    </p>
+                    <div class="meta">
+                      <span
+                        v-if="item.type_name"
+                        class="type-tag"
+                        :class="colorOf(item).text"
+                        >{{ item.type_name }}</span
+                      >
+                      <span v-if="Number(item.priority) === 1" class="prio-tag"
+                        >重要</span
+                      >
+                    </div>
+                  </div>
+
+                  <div class="aside">
+                    <span
+                      v-if="Number(item.status) === 0"
+                      class="dot"
+                      aria-label="未读"
+                    ></span>
+                    <button
+                      v-if="Number(item.status) === 0"
+                      type="button"
+                      class="mark"
+                      @click="markAsRead($event, item)"
+                    >
+                      标已读
+                    </button>
+                    <span v-if="item.action_type" class="go">
+                      去处理
+                      <ArrowRight class="size-3.5" />
+                    </span>
+                  </div>
+                </div>
+              </GlassCard>
             </li>
           </ul>
         </section>
@@ -445,6 +478,7 @@ async function loadMore() {
 <style scoped>
 .inbox {
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
+
   position: relative;
   min-height: 100%;
   padding: 28px 20px 48px;
@@ -452,19 +486,19 @@ async function loadMore() {
 }
 
 .inbox-atmosphere {
-  pointer-events: none;
   position: absolute;
-  inset: 0 0 auto 0;
+  inset: 0 0 auto;
   height: 280px;
+  pointer-events: none;
   background:
     radial-gradient(
       60% 80% at 12% 0%,
-      hsl(var(--primary) / 0.16),
+      hsl(var(--primary) / 16%),
       transparent 70%
     ),
     radial-gradient(
       45% 60% at 88% 10%,
-      hsl(var(--primary) / 0.08),
+      hsl(var(--primary) / 8%),
       transparent 65%
     );
   mask-image: linear-gradient(to bottom, #000 40%, transparent);
@@ -477,37 +511,37 @@ async function loadMore() {
   position: relative;
   z-index: 1;
   max-width: 760px;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 
 .inbox-hero {
   display: flex;
+  gap: 16px;
   align-items: flex-end;
   justify-content: space-between;
-  gap: 16px;
   margin-bottom: 20px;
 }
 
 .hero-kicker {
   display: inline-flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
   margin: 0 0 8px;
-  color: hsl(var(--primary));
   font-size: 12px;
   font-weight: 600;
-  letter-spacing: 0.08em;
+  color: hsl(var(--primary));
   text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
 
 .hero-title {
   margin: 0;
   font-size: clamp(34px, 5vw, 44px);
   font-weight: 700;
-  letter-spacing: -0.04em;
   line-height: 1.05;
   color: hsl(var(--foreground));
+  letter-spacing: -0.04em;
 }
 
 .hero-sub {
@@ -519,24 +553,24 @@ async function loadMore() {
 
 .hero-actions {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   padding-bottom: 4px;
 }
 
 .ghost-btn {
   display: inline-flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
   height: 36px;
   padding: 0 12px;
-  border: 1px solid hsl(var(--border) / 0.8);
-  border-radius: 999px;
-  background: hsl(var(--card, var(--background)) / 0.7);
-  backdrop-filter: blur(8px);
-  color: hsl(var(--foreground));
   font-size: 13px;
+  color: hsl(var(--foreground));
   cursor: pointer;
+  background: hsl(var(--card, var(--background)) / 70%);
+  border: 1px solid hsl(var(--border) / 80%);
+  border-radius: 999px;
+  backdrop-filter: blur(8px);
   transition:
     background 0.2s var(--ease),
     border-color 0.2s var(--ease),
@@ -544,19 +578,19 @@ async function loadMore() {
 }
 
 .ghost-btn:hover:not(:disabled) {
-  background: hsl(var(--muted) / 0.45);
-  border-color: hsl(var(--foreground) / 0.18);
+  background: hsl(var(--muted) / 45%);
+  border-color: hsl(var(--foreground) / 18%);
 }
 
 .ghost-btn.on {
-  border-color: hsl(var(--primary) / 0.4);
-  background: hsl(var(--primary) / 0.1);
   color: hsl(var(--primary));
+  background: hsl(var(--primary) / 10%);
+  border-color: hsl(var(--primary) / 40%);
 }
 
 .ghost-btn:disabled {
-  opacity: 0.35;
   cursor: not-allowed;
+  opacity: 0.35;
 }
 
 .search-bar {
@@ -569,55 +603,55 @@ async function loadMore() {
   width: 100%;
   height: 44px;
   padding: 0 40px 0 42px;
-  border: 1px solid hsl(var(--border) / 0.7);
-  border-radius: 14px;
-  background: hsl(var(--card, var(--background)) / 0.85);
-  color: hsl(var(--foreground));
   font-size: 14px;
+  color: hsl(var(--foreground));
   outline: none;
-  box-shadow: 0 10px 30px hsl(var(--foreground) / 0.03);
+  background: hsl(var(--card, var(--background)) / 85%);
+  border: 1px solid hsl(var(--border) / 70%);
+  border-radius: 14px;
+  box-shadow: 0 10px 30px hsl(var(--foreground) / 3%);
 }
 
 .search-bar input:focus {
-  border-color: hsl(var(--primary) / 0.45);
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
+  border-color: hsl(var(--primary) / 45%);
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 12%);
 }
 
 .search-ico {
   position: absolute;
-  left: 14px;
   top: 50%;
+  left: 14px;
   width: 16px;
   height: 16px;
-  transform: translateY(-50%);
   color: hsl(var(--muted-foreground));
+  transform: translateY(-50%);
 }
 
 .clear-btn {
   position: absolute;
-  right: 10px;
   top: 50%;
-  transform: translateY(-50%);
+  right: 10px;
   display: grid;
   place-items: center;
   width: 26px;
   height: 26px;
-  border: none;
-  border-radius: 50%;
-  background: hsl(var(--muted) / 0.7);
   color: hsl(var(--muted-foreground));
   cursor: pointer;
+  background: hsl(var(--muted) / 70%);
+  border: none;
+  border-radius: 50%;
+  transform: translateY(-50%);
 }
 
 .seg {
   display: flex;
   gap: 4px;
-  overflow-x: auto;
-  margin-bottom: 22px;
   padding: 4px;
-  border-radius: 14px;
-  background: hsl(var(--muted) / 0.35);
+  margin-bottom: 22px;
+  overflow-x: auto;
   scrollbar-width: none;
+  background: hsl(var(--muted) / 35%);
+  border-radius: 14px;
 }
 
 .seg::-webkit-scrollbar {
@@ -626,18 +660,18 @@ async function loadMore() {
 
 .seg-item {
   position: relative;
-  flex-shrink: 0;
   display: inline-flex;
-  align-items: center;
+  flex-shrink: 0;
   gap: 6px;
+  align-items: center;
   height: 34px;
   padding: 0 14px;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  background: transparent;
   border: none;
   border-radius: 10px;
-  background: transparent;
-  color: hsl(var(--muted-foreground));
-  font-size: 13px;
-  cursor: pointer;
   transition:
     background 0.2s var(--ease),
     color 0.2s var(--ease),
@@ -645,23 +679,23 @@ async function loadMore() {
 }
 
 .seg-item.active {
-  background: hsl(var(--card, var(--background)));
-  color: hsl(var(--foreground));
   font-weight: 600;
-  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.06);
+  color: hsl(var(--foreground));
+  background: hsl(var(--card, var(--background)));
+  box-shadow: 0 1px 2px hsl(var(--foreground) / 6%);
 }
 
 .seg-badge {
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
-  border-radius: 9px;
-  background: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
   font-size: 11px;
   font-weight: 650;
   line-height: 18px;
+  color: hsl(var(--primary-foreground));
   text-align: center;
+  background: hsl(var(--primary));
+  border-radius: 9px;
 }
 
 .day-group + .day-group {
@@ -673,92 +707,96 @@ async function loadMore() {
   position: sticky;
   top: 0;
   z-index: 2;
-  margin: 0 0 10px;
   padding: 6px 4px;
+  margin: 0 0 10px;
   font-size: 12px;
   font-weight: 650;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
   color: hsl(var(--muted-foreground));
-  background: hsl(var(--background) / 0.82);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background: hsl(var(--background) / 82%);
   backdrop-filter: blur(8px);
 }
 
 .day-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
-.msg {
+/* 错峰入场动画挂在 li 上，与 GlassCard 自身的悬停上浮互不覆盖 */
+.msg-item {
   --i: 0;
+
+  animation: rise 0.45s var(--ease) both;
+  animation-delay: calc(var(--i) * 35ms);
+}
+
+.msg-grid {
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr) auto;
   gap: 14px;
   align-items: center;
   padding: 14px 14px 14px 12px;
-  border: 1px solid transparent;
-  border-radius: 18px;
-  background: hsl(var(--card, var(--background)) / 0.55);
-  cursor: pointer;
-  outline: none;
-  animation: rise 0.45s var(--ease) both;
-  animation-delay: calc(var(--i) * 35ms);
-  transition:
-    background 0.2s var(--ease),
-    border-color 0.2s var(--ease),
-    transform 0.2s var(--ease);
 }
 
-.msg:hover,
-.msg:focus-visible {
-  background: hsl(var(--card, var(--background)));
-  border-color: hsl(var(--border) / 0.9);
-  transform: translateY(-1px);
-}
-
-.msg:active {
+/*
+ * 以下覆盖 GlassCard 默认态时统一带 .day-list 前缀：
+ * 父子组件 scoped 样式的加载顺序不固定，抬高权重才能稳定压过 .glass-card--hoverable:hover
+ */
+.day-list .msg:active {
   transform: translateY(0);
 }
 
-.msg.unread {
-  background: hsl(var(--primary) / 0.06);
-  border-color: hsl(var(--primary) / 0.12);
+/* 未读：玻璃底叠一层主题色薄染，比已读卡片更「亮」一档 */
+.day-list .msg.unread {
+  background: linear-gradient(
+    150deg,
+    hsl(var(--primary) / 10%),
+    hsl(var(--card) / 52%)
+  );
+  border-color: hsl(var(--primary) / 22%);
 }
 
-.msg.unread:hover,
-.msg.unread:focus-visible {
-  background: hsl(var(--primary) / 0.09);
-  border-color: hsl(var(--primary) / 0.22);
+.day-list .msg.unread:hover,
+.day-list .msg.unread:focus-visible {
+  border-color: hsl(var(--primary) / 40%);
 }
 
-/* 重要且未读：按消息类型色发光；已读后取消 */
-.msg.priority.unread {
-  border-color: hsl(var(--notice-glow, 38 92% 50%) / 0.45);
+/* 重要且未读：薄染与外发光都按消息类型色（--notice-glow）走，保留顶部内高光维持玻璃质感；已读后取消 */
+.day-list .msg.priority.unread {
+  background: linear-gradient(
+    150deg,
+    hsl(var(--notice-glow, 38 92% 50%) / 10%),
+    hsl(var(--card) / 52%)
+  );
+  border-color: hsl(var(--notice-glow, 38 92% 50%) / 45%);
   box-shadow:
-    0 0 0 1px hsl(var(--notice-glow, 38 92% 50%) / 0.18),
-    0 0 18px hsl(var(--notice-glow, 38 92% 50%) / 0.22);
+    inset 0 1px 0 hsl(var(--glass-specular) / 55%),
+    0 0 0 1px hsl(var(--notice-glow, 38 92% 50%) / 18%),
+    0 0 18px hsl(var(--notice-glow, 38 92% 50%) / 22%);
 }
 
-.msg.priority.unread:hover,
-.msg.priority.unread:focus-visible {
-  border-color: hsl(var(--notice-glow, 38 92% 50%) / 0.6);
+.day-list .msg.priority.unread:hover,
+.day-list .msg.priority.unread:focus-visible {
+  border-color: hsl(var(--notice-glow, 38 92% 50%) / 60%);
   box-shadow:
-    0 0 0 1px hsl(var(--notice-glow, 38 92% 50%) / 0.28),
-    0 0 22px hsl(var(--notice-glow, 38 92% 50%) / 0.3);
+    inset 0 1px 0 hsl(var(--glass-specular) / 70%),
+    0 0 0 1px hsl(var(--notice-glow, 38 92% 50%) / 28%),
+    0 0 22px hsl(var(--notice-glow, 38 92% 50%) / 30%);
 }
 
 .avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 16px;
   display: grid;
   place-items: center;
+  width: 48px;
+  height: 48px;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.04);
+  border-radius: 16px;
+  box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 4%);
 }
 
 .avatar-img {
@@ -767,28 +805,34 @@ async function loadMore() {
   object-fit: cover;
 }
 
+/* Canvas 图标铺满头像位，移动端头像缩到 44px 时跟着缩放 */
+.avatar :deep(.notice-canvas-icon) {
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .content {
   min-width: 0;
 }
 
 .row-top {
   display: flex;
+  gap: 12px;
   align-items: baseline;
   justify-content: space-between;
-  gap: 12px;
 }
 
 .title {
-  margin: 0;
-  min-width: 0;
   flex: 1;
-  font-size: 15px;
-  font-weight: 500;
-  letter-spacing: -0.015em;
-  line-height: 1.35;
-  color: hsl(var(--foreground));
+  min-width: 0;
+  margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: hsl(var(--foreground));
+  letter-spacing: -0.015em;
   white-space: nowrap;
 }
 
@@ -799,19 +843,19 @@ async function loadMore() {
 .time {
   flex-shrink: 0;
   font-size: 12px;
-  color: hsl(var(--muted-foreground));
   font-variant-numeric: tabular-nums;
+  color: hsl(var(--muted-foreground));
 }
 
 .preview {
+  display: -webkit-box;
   margin: 5px 0 0;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
   font-size: 13px;
   line-height: 1.45;
   color: hsl(var(--muted-foreground));
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
 .meta {
@@ -823,44 +867,46 @@ async function loadMore() {
 
 .type-tag,
 .prio-tag {
+  padding: 2px 8px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.02em;
-  padding: 2px 8px;
+  background: hsl(var(--muted) / 55%);
   border-radius: 999px;
-  background: hsl(var(--muted) / 0.55);
 }
 
 .prio-tag {
   color: hsl(var(--warning, 38 92% 40%));
-  background: hsl(var(--warning, 38 92% 50%) / 0.12);
+  background: hsl(var(--warning, 38 92% 50%) / 12%);
 }
 
 .aside {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
   gap: 8px;
+  align-items: flex-end;
   min-width: 72px;
 }
 
 .dot {
   width: 9px;
   height: 9px;
-  border-radius: 50%;
   background: hsl(var(--primary));
-  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px hsl(var(--primary) / 12%);
 }
 
 .mark {
-  border: none;
-  background: transparent;
-  color: hsl(var(--muted-foreground));
-  font-size: 12px;
   padding: 0;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
   cursor: pointer;
+  background: transparent;
+  border: none;
   opacity: 0;
-  transition: opacity 0.15s ease, color 0.15s ease;
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease;
 }
 
 .msg:hover .mark,
@@ -874,17 +920,19 @@ async function loadMore() {
 
 .go {
   display: inline-flex;
-  align-items: center;
   gap: 3px;
+  align-items: center;
   height: 28px;
   padding: 0 10px;
-  border-radius: 999px;
-  background: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
   font-size: 12px;
   font-weight: 600;
+  color: hsl(var(--primary-foreground));
   letter-spacing: -0.01em;
-  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
+  background: hsl(var(--primary));
+  border-radius: 999px;
+  transition:
+    transform 0.2s var(--ease),
+    opacity 0.2s var(--ease);
 }
 
 .msg:hover .go {
@@ -893,22 +941,22 @@ async function loadMore() {
 
 .empty-state {
   display: grid;
-  place-items: center;
   gap: 8px;
+  place-items: center;
   padding: 72px 20px;
-  text-align: center;
   color: hsl(var(--muted-foreground));
+  text-align: center;
 }
 
 .empty-ico {
+  display: grid;
+  place-items: center;
   width: 64px;
   height: 64px;
   margin-bottom: 8px;
+  color: hsl(var(--foreground) / 55%);
+  background: hsl(var(--muted) / 45%);
   border-radius: 22px;
-  display: grid;
-  place-items: center;
-  background: hsl(var(--muted) / 0.45);
-  color: hsl(var(--foreground) / 0.55);
 }
 
 .empty-title {
@@ -919,12 +967,12 @@ async function loadMore() {
 }
 
 .empty-desc {
+  max-width: 260px;
   margin: 0;
   font-size: 13px;
-  max-width: 260px;
 }
 
-/* ===== 骨架屏：与 .msg 同布局同圆角，闪烁动画走主题 muted 色 ===== */
+/* ===== 骨架屏：与 .msg-grid 同布局、同为玻璃卡壳，闪烁动画走主题 muted 色 ===== */
 .skeleton-list {
   display: flex;
   flex-direction: column;
@@ -933,26 +981,28 @@ async function loadMore() {
 
 .skeleton-row {
   --i: 0;
+
+  animation: rise 0.45s var(--ease) both;
+  animation-delay: calc(var(--i) * 50ms);
+}
+
+.skeleton-grid {
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr);
   gap: 14px;
   align-items: center;
   padding: 14px 14px 14px 12px;
-  border-radius: 18px;
-  background: hsl(var(--card, var(--background)) / 0.55);
-  animation: rise 0.45s var(--ease) both;
-  animation-delay: calc(var(--i) * 50ms);
 }
 
 .sk {
-  border-radius: 10px;
   background: linear-gradient(
     90deg,
-    hsl(var(--muted) / 0.5) 25%,
-    hsl(var(--muted) / 0.3) 50%,
-    hsl(var(--muted) / 0.5) 75%
+    hsl(var(--muted) / 50%) 25%,
+    hsl(var(--muted) / 30%) 50%,
+    hsl(var(--muted) / 50%) 75%
   );
   background-size: 200% 100%;
+  border-radius: 10px;
   animation: shimmer 1.4s ease-in-out infinite;
 }
 
@@ -982,6 +1032,7 @@ async function loadMore() {
   0% {
     background-position: 200% 0;
   }
+
   100% {
     background-position: -200% 0;
   }
@@ -994,18 +1045,18 @@ async function loadMore() {
 }
 
 .more-btn {
-  border: none;
-  background: transparent;
-  color: hsl(var(--muted-foreground));
-  font-size: 13px;
   padding: 10px 16px;
-  border-radius: 999px;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
   cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: 999px;
 }
 
 .more-btn:hover {
   color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.08);
+  background: hsl(var(--primary) / 8%);
 }
 
 @keyframes rise {
@@ -1013,6 +1064,7 @@ async function loadMore() {
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -1020,13 +1072,14 @@ async function loadMore() {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .msg,
+  .msg-item,
   .search-bar,
   .skeleton-row,
   .sk {
     animation: none;
   }
-  .msg:hover,
+
+  .day-list .msg:hover,
   .msg:hover .go {
     transform: none;
   }
@@ -1042,18 +1095,18 @@ async function loadMore() {
     align-items: flex-start;
   }
 
-  .msg {
-    grid-template-columns: 44px minmax(0, 1fr);
+  .msg-grid {
     grid-template-areas:
       'avatar content'
       'avatar aside';
+    grid-template-columns: 44px minmax(0, 1fr);
   }
 
   .avatar {
+    grid-area: avatar;
     width: 44px;
     height: 44px;
     border-radius: 14px;
-    grid-area: avatar;
   }
 
   .content {
@@ -1061,8 +1114,8 @@ async function loadMore() {
   }
 
   .aside {
-    grid-area: aside;
     flex-direction: row;
+    grid-area: aside;
     align-items: center;
     justify-content: flex-start;
     min-width: 0;
diff --git a/apps/web-antd/src/views/system/ai/generation/components/detail-modal.vue b/apps/web-antd/src/views/system/ai/generation/components/detail-modal.vue
index 700b8fa5..d0782f76 100644
--- a/apps/web-antd/src/views/system/ai/generation/components/detail-modal.vue
+++ b/apps/web-antd/src/views/system/ai/generation/components/detail-modal.vue
@@ -7,7 +7,17 @@ import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Button, Descriptions, Image, message, Spin, Tabs, Tag } from 'ant-design-vue';
+import {
+  Button,
+  Descriptions,
+  Image,
+  message,
+  Spin,
+  Tabs,
+  Tag,
+} from 'ant-design-vue';
+
+import { GlassTag } from '#/components/glass-tag';
 
 import { getAiGenerationDetail } from '../api';
 import GenerationFlowTimeline from './generation-flow-timeline.vue';
@@ -55,9 +65,7 @@ const ocrImageUrls = computed(() => {
 
 const isOcrScene = computed(() => {
   const scene = String(detail.value?.scene || '');
-  return (
-    scene === 'prescription_image_ocr' || scene === 'transfer_image_ocr'
-  );
+  return scene === 'prescription_image_ocr' || scene === 'transfer_image_ocr';
 });
 
 /** 识图结果结构化预览字段 */
@@ -148,7 +156,8 @@ const processedResultJson = computed(() => {
 const [Modal, modalApi] = useVbenModal({
   title: '生成记录详情',
   class: 'w-[min(1280px,96vw)]',
-  contentClass: 'detail-modal-body',
+  // Vben 内容区自带 overflow-y-auto，这里只限高；内部不再套第二层滚动
+  contentClass: 'detail-modal-body !max-h-[min(78vh,820px)]',
   showConfirmButton: false,
   cancelText: '关闭',
   async onOpenChange(isOpen) {
@@ -324,7 +333,7 @@ function onArchiveClick() {
 <template>
   <Modal>
     <Spin :spinning="loading">
-      <div class="detail-scroll">
+      <div class="detail-body">
         <Descriptions bordered size="small" :column="3" class="text-sm">
           <Descriptions.Item label="ID">
             {{ detail.id || '—' }}
@@ -534,7 +543,9 @@ function onArchiveClick() {
                     </Tag>
                   </Descriptions.Item>
                   <Descriptions.Item
-                    v-if="ocrResult.patient_name || ocrResult.mode === 'transfer'"
+                    v-if="
+                      ocrResult.patient_name || ocrResult.mode === 'transfer'
+                    "
                     label="姓名"
                   >
                     {{ ocrResult.patient_name || '—' }}
@@ -572,8 +583,8 @@ function onArchiveClick() {
                     {{ ocrResult.day_dosage || '—' }} 次
                   </Descriptions.Item>
                   <Descriptions.Item label="药味">
-                    已对照 {{ ocrResult.matched.length }} /
-                    未对照 {{ ocrResult.unmatched.length }}
+                    已对照 {{ ocrResult.matched.length }} / 未对照
+                    {{ ocrResult.unmatched.length }}
                   </Descriptions.Item>
                 </Descriptions>
 
@@ -584,12 +595,12 @@ function onArchiveClick() {
                   <div class="preview-section-title">
                     已对照（{{ ocrResult.matched.length }}）
                   </div>
-                  <!-- 紧凑一行多列：AI名+克数 → 对照药名 -->
+                  <!-- 紧凑一行多列：AI名+克数 → 对照药名（GlassTag 统一玻璃芯片） -->
                   <div class="preview-drug-grid">
-                    <div
+                    <GlassTag
                       v-for="(m, mi) in ocrResult.matched"
                       :key="'m' + mi"
-                      class="preview-drug-chip is-matched"
+                      tone="primary"
                       :title="
                         selectedCandidateName(m)
                           ? `${m.ai_name || ''} → ${selectedCandidateName(m)}`
@@ -600,15 +611,15 @@ function onArchiveClick() {
                       <span class="chip-dose">
                         {{ m.dose || '' }}{{ m.unit || '' }}
                       </span>
-                      <span
-                        v-if="selectedCandidateName(m)"
-                        class="chip-arrow"
-                      >→</span>
+                      <span v-if="selectedCandidateName(m)" class="chip-arrow"
+                        >→</span
+                      >
                       <span
                         v-if="selectedCandidateName(m)"
                         class="chip-match"
-                      >{{ selectedCandidateName(m) }}</span>
-                    </div>
+                        >{{ selectedCandidateName(m) }}</span
+                      >
+                    </GlassTag>
                   </div>
                 </div>
 
@@ -620,22 +631,19 @@ function onArchiveClick() {
                     未对照（{{ ocrResult.unmatched.length }}）
                   </div>
                   <div class="preview-drug-grid">
-                    <div
+                    <GlassTag
                       v-for="(u, ui) in ocrResult.unmatched"
                       :key="'u' + ui"
-                      class="preview-drug-chip is-unmatched"
+                      tone="destructive"
                     >
                       <span class="chip-ai">{{ u.ai_name || '—' }}</span>
                       <span class="chip-dose">
                         {{ u.dose || '' }}{{ u.unit || '' }}
                       </span>
-                      <span
-                        v-if="unmatchedTokensText(u)"
-                        class="chip-tokens"
-                      >
+                      <span v-if="unmatchedTokensText(u)" class="chip-tokens">
                         tok：{{ unmatchedTokensText(u) }}
                       </span>
-                    </div>
+                    </GlassTag>
                   </div>
                 </div>
 
@@ -705,10 +713,9 @@ function onArchiveClick() {
 </template>
 
 <style scoped>
-.detail-scroll {
-  max-height: min(72vh, 780px);
+/* 不在内部再开 overflow，滚动交给 Vben Modal content（避免双滚动条又滚不动） */
+.detail-body {
   padding-right: 4px;
-  overflow: auto;
 }
 
 .json-panel {
@@ -726,6 +733,7 @@ function onArchiveClick() {
   border-bottom: 1px solid hsl(var(--border));
 }
 
+/* JSON 块限高：内容过长时在块内滚动，避免把详情顶得太高 */
 .json-pre {
   max-height: 220px;
   padding: 8px 10px;
@@ -746,8 +754,8 @@ function onArchiveClick() {
 
 .ocr-thumb {
   overflow: hidden;
-  object-fit: cover;
   cursor: pointer;
+  object-fit: cover;
   border: 1px solid hsl(var(--border));
   border-radius: 6px;
   box-shadow: 0 0 6px hsl(var(--primary) / 18%);
@@ -785,30 +793,6 @@ function onArchiveClick() {
   gap: 6px;
 }
 
-.preview-drug-chip {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  gap: 4px;
-  align-items: center;
-  max-width: 100%;
-  padding: 3px 8px;
-  font-size: 12px;
-  line-height: 1.4;
-  background: hsl(var(--card, var(--background)));
-  border: 1px solid hsl(var(--border));
-  border-radius: 6px;
-}
-
-.preview-drug-chip.is-matched {
-  border-color: hsl(var(--primary) / 30%);
-  box-shadow: 0 0 4px hsl(var(--primary) / 14%);
-}
-
-.preview-drug-chip.is-unmatched {
-  border-color: hsl(0 84% 60% / 40%);
-  box-shadow: 0 0 4px hsl(0 84% 60% / 14%);
-}
-
 .chip-ai {
   font-weight: 500;
   color: hsl(var(--foreground));
@@ -820,9 +804,6 @@ function onArchiveClick() {
 }
 
 .chip-tokens {
-  display: block;
-  width: 100%;
-  margin-top: 2px;
   font-size: 11px;
   color: hsl(var(--muted-foreground));
   overflow-wrap: anywhere;
diff --git a/apps/web-antd/src/views/system/ai/generation/index.vue b/apps/web-antd/src/views/system/ai/generation/index.vue
index 992cee06..80be47d8 100644
--- a/apps/web-antd/src/views/system/ai/generation/index.vue
+++ b/apps/web-antd/src/views/system/ai/generation/index.vue
@@ -345,272 +345,290 @@ onMounted(async () => {
     <DetailModalComp @review="openReview" @archive="openArchive" />
     <ReviewModalComp @success="onActionSuccess" />
     <ArchiveModalComp @success="onActionSuccess" />
-    <div class="mb-3">
-      <Row :gutter="12">
-        <Col :xs="12" :sm="8" :md="4">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              总 Tokens
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ stats.total_tokens }}
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="4">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              Prompt
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ stats.prompt_tokens }}
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="4">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              Completion
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ stats.completion_tokens }}
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="4">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              平均耗时
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ formatDuration(stats.avg_duration_ms) }}
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="4">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              成功率
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ stats.success_rate }}%
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="4">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              请求数
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ stats.success_count }}/{{ stats.total_count }}
-              <span
-                class="ml-1 text-xs font-normal text-[hsl(var(--muted-foreground))]"
+    <!-- 摘要/搜索固定，列表/卡片只留一个滚动层，避免页面与内容区双滚动条 -->
+    <div class="flex h-full min-h-0 flex-col overflow-hidden">
+      <div class="mb-3 shrink-0">
+        <Row :gutter="12">
+          <Col :xs="12" :sm="8" :md="4">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                总 Tokens
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.total_tokens }}
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="4">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                Prompt
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.prompt_tokens }}
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="4">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                Completion
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.completion_tokens }}
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="4">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                平均耗时
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ formatDuration(stats.avg_duration_ms) }}
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="4">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                成功率
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.success_rate }}%
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="4">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                请求数
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.success_count }}/{{ stats.total_count }}
+                <span
+                  class="ml-1 text-xs font-normal text-[hsl(var(--muted-foreground))]"
+                >
+                  失败 {{ stats.fail_count }}
+                </span>
+              </div>
+            </Card>
+          </Col>
+        </Row>
+        <Row :gutter="12" class="mt-3">
+          <Col :xs="12" :sm="8" :md="5">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                采纳率
+                <span class="ml-1 opacity-70">已采纳/成功数</span>
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.adoption_rate }}%
+                <span
+                  class="ml-1 text-xs font-normal text-[hsl(var(--muted-foreground))]"
+                >
+                  {{ stats.adopted_count }}/{{ stats.success_count }}
+                </span>
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="5">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                直接采纳率
+                <span class="ml-1 opacity-70">未改原稿直接用</span>
+              </div>
+              <div
+                class="mt-1 text-lg font-semibold text-[hsl(var(--primary))]"
               >
-                失败 {{ stats.fail_count }}
-              </span>
-            </div>
-          </Card>
-        </Col>
-      </Row>
-      <Row :gutter="12" class="mt-3">
-        <Col :xs="12" :sm="8" :md="5">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              采纳率
-              <span class="ml-1 opacity-70">已采纳/成功数</span>
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ stats.adoption_rate }}%
-              <span
-                class="ml-1 text-xs font-normal text-[hsl(var(--muted-foreground))]"
-              >
-                {{ stats.adopted_count }}/{{ stats.success_count }}
-              </span>
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="5">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              直接采纳率
-              <span class="ml-1 opacity-70">未改原稿直接用</span>
-            </div>
-            <div class="mt-1 text-lg font-semibold text-[hsl(var(--primary))]">
-              {{ stats.direct_rate }}%
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="5">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              修改率
-              <span class="ml-1 opacity-70">采纳但改过原稿</span>
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ stats.modified_rate }}%
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="5">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              药名未匹配率
-              <span class="ml-1 opacity-70">越低越好</span>
-            </div>
-            <div class="mt-1 text-lg font-semibold">
-              {{ stats.unmatched_rate }}%
-            </div>
-          </Card>
-        </Col>
-        <Col :xs="12" :sm="8" :md="4">
-          <Card size="small">
-            <div class="text-xs text-[hsl(var(--muted-foreground))]">
-              人均重生成
-              <span class="ml-1 opacity-70">>1 需关注</span>
-            </div>
-            <div class="mt-1 text-lg font-semibold">{{ stats.avg_regen }}</div>
-          </Card>
-        </Col>
-      </Row>
-    </div>
+                {{ stats.direct_rate }}%
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="5">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                修改率
+                <span class="ml-1 opacity-70">采纳但改过原稿</span>
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.modified_rate }}%
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="5">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                药名未匹配率
+                <span class="ml-1 opacity-70">越低越好</span>
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.unmatched_rate }}%
+              </div>
+            </Card>
+          </Col>
+          <Col :xs="12" :sm="8" :md="4">
+            <Card size="small">
+              <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                人均重生成
+                <span class="ml-1 opacity-70">>1 需关注</span>
+              </div>
+              <div class="mt-1 text-lg font-semibold">
+                {{ stats.avg_regen }}
+              </div>
+            </Card>
+          </Col>
+        </Row>
+      </div>
 
-    <!-- 双视图共用搜索，避免包一层 div 破坏 Grid height:auto -->
-    <div
-      class="mb-3 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
-    >
-      <SearchForm />
-    </div>
-    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
-      <ViewModeSwitch v-model="viewMode" />
-      <Button
-        type="primary"
-        ghost
-        :loading="exporting"
-        @click="handleExportJsonl"
+      <!-- 双视图共用搜索 -->
+      <div
+        class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
       >
-        导出训练 JSONL
-      </Button>
-    </div>
+        <SearchForm />
+      </div>
+      <div
+        class="mb-3 flex shrink-0 flex-wrap items-center justify-between gap-2"
+      >
+        <ViewModeSwitch v-model="viewMode" />
+        <Button
+          type="primary"
+          ghost
+          :loading="exporting"
+          @click="handleExportJsonl"
+        >
+          导出训练 JSONL
+        </Button>
+      </div>
 
-    <Grid v-if="viewMode === 'list'">
-      <template #status="{ row }">
-        <Tag :color="statusColor(Number(row.status))">
-          {{ row.status_txt || row.status }}
-        </Tag>
-      </template>
-      <template #via_agent="{ row }">
-        <Tag :color="Number(row.via_agent) === 1 ? 'gold' : 'default'">
-          {{
-            row.via_agent_txt ||
-            (Number(row.via_agent) === 1 ? 'Agent' : '直连')
-          }}
-        </Tag>
-      </template>
-      <template #cache="{ row }">
-        <Tag :color="Number(row.is_cache_hit) === 1 ? 'processing' : 'default'">
-          {{
-            row.cache_txt ||
-            (Number(row.is_cache_hit) === 1 ? '命中缓存' : '未命中')
-          }}
-        </Tag>
-      </template>
-      <template #tokens="{ row }">
-        <span :title="`P ${row.prompt_tokens} / C ${row.completion_tokens}`">
-          {{ row.total_tokens || 0 }}
-        </span>
-      </template>
-      <template #duration="{ row }">
-        {{ formatDuration(Number(row.duration_ms || 0)) }}
-      </template>
-      <template #steps="{ row }">
-        <span v-if="Number(row.step_count) > 0">{{ row.step_count }} 步</span>
-        <span v-else class="text-xs text-[hsl(var(--muted-foreground))]">—</span>
-      </template>
-      <template #match="{ row }">
-        <span
-          v-if="Number(row.match_drug_total) > 0"
-          :class="
-            Number(row.match_drug_unmatched) > 0
-              ? 'text-[hsl(var(--destructive,var(--warning)))]'
-              : ''
-          "
-        >
-          未匹配 {{ row.match_drug_unmatched || 0 }}/{{ row.match_drug_total }}
-        </span>
-        <span v-else class="text-xs text-[hsl(var(--muted-foreground))]">—</span>
-      </template>
-      <template #adopted="{ row }">
-        <Tag
-          v-if="Number(row.is_adopted) === 1"
-          :color="
-            Number(row.is_modified_final) === 1 ? 'processing' : 'success'
-          "
-        >
-          {{ row.adopted_txt }}
-        </Tag>
-        <span v-else class="text-xs text-[hsl(var(--muted-foreground))]">未采纳</span>
-      </template>
-      <template #correct="{ row }">
-        <Tag v-if="Number(row.is_correct) === 1" color="success">正确</Tag>
-        <Tag v-else-if="Number(row.is_correct) === 2" color="error">不正确</Tag>
-        <span v-else class="text-xs text-[hsl(var(--muted-foreground))]">未评</span>
-      </template>
-      <template #score="{ row }">
-        <span v-if="Number(row.quality_score) > 0">{{
-          row.quality_score
-        }}</span>
-        <span v-else class="text-xs text-[hsl(var(--muted-foreground))]">—</span>
-      </template>
-      <template #archived="{ row }">
-        <Tag v-if="Number(row.is_archived) === 1" color="success">已归档</Tag>
-        <span v-else class="text-xs text-[hsl(var(--muted-foreground))]">未归档</span>
-      </template>
-      <template #action="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              type: 'link',
-              onClick: () => openDetail(row),
-            },
-            {
-              label: '打分',
-              type: 'link',
-              ifShow: Number(row.status) === 1,
-              onClick: () => openReview(row),
-            },
-            {
-              label: '归档',
-              type: 'link',
-              ifShow:
-                Number(row.status) === 1 &&
-                Number(row.is_correct) !== 0 &&
-                Number(row.quality_score) > 0,
-              onClick: () => openArchive(row),
-            },
-          ]"
+      <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
+        <template #status="{ row }">
+          <Tag :color="statusColor(Number(row.status))">
+            {{ row.status_txt || row.status }}
+          </Tag>
+        </template>
+        <template #via_agent="{ row }">
+          <Tag :color="Number(row.via_agent) === 1 ? 'gold' : 'default'">
+            {{
+              row.via_agent_txt ||
+              (Number(row.via_agent) === 1 ? 'Agent' : '直连')
+            }}
+          </Tag>
+        </template>
+        <template #cache="{ row }">
+          <Tag
+            :color="Number(row.is_cache_hit) === 1 ? 'processing' : 'default'"
+          >
+            {{
+              row.cache_txt ||
+              (Number(row.is_cache_hit) === 1 ? '命中缓存' : '未命中')
+            }}
+          </Tag>
+        </template>
+        <template #tokens="{ row }">
+          <span :title="`P ${row.prompt_tokens} / C ${row.completion_tokens}`">
+            {{ row.total_tokens || 0 }}
+          </span>
+        </template>
+        <template #duration="{ row }">
+          {{ formatDuration(Number(row.duration_ms || 0)) }}
+        </template>
+        <template #steps="{ row }">
+          <span v-if="Number(row.step_count) > 0">{{ row.step_count }} 步</span>
+          <span v-else class="text-xs text-[hsl(var(--muted-foreground))]"
+            >—</span
+          >
+        </template>
+        <template #match="{ row }">
+          <span
+            v-if="Number(row.match_drug_total) > 0"
+            :class="
+              Number(row.match_drug_unmatched) > 0
+                ? 'text-[hsl(var(--destructive,var(--warning)))]'
+                : ''
+            "
+          >
+            未匹配 {{ row.match_drug_unmatched || 0 }}/{{
+              row.match_drug_total
+            }}
+          </span>
+          <span v-else class="text-xs text-[hsl(var(--muted-foreground))]"
+            >—</span
+          >
+        </template>
+        <template #adopted="{ row }">
+          <Tag
+            v-if="Number(row.is_adopted) === 1"
+            :color="
+              Number(row.is_modified_final) === 1 ? 'processing' : 'success'
+            "
+          >
+            {{ row.adopted_txt }}
+          </Tag>
+          <span v-else class="text-xs text-[hsl(var(--muted-foreground))]"
+            >未采纳</span
+          >
+        </template>
+        <template #correct="{ row }">
+          <Tag v-if="Number(row.is_correct) === 1" color="success">正确</Tag>
+          <Tag v-else-if="Number(row.is_correct) === 2" color="error"
+            >不正确</Tag
+          >
+          <span v-else class="text-xs text-[hsl(var(--muted-foreground))]"
+            >未评</span
+          >
+        </template>
+        <template #score="{ row }">
+          <span v-if="Number(row.quality_score) > 0">{{
+            row.quality_score
+          }}</span>
+          <span v-else class="text-xs text-[hsl(var(--muted-foreground))]"
+            >—</span
+          >
+        </template>
+        <template #archived="{ row }">
+          <Tag v-if="Number(row.is_archived) === 1" color="success">已归档</Tag>
+          <span v-else class="text-xs text-[hsl(var(--muted-foreground))]"
+            >未归档</span
+          >
+        </template>
+        <template #action="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                type: 'link',
+                onClick: () => openDetail(row),
+              },
+              {
+                label: '打分',
+                type: 'link',
+                ifShow: Number(row.status) === 1,
+                onClick: () => openReview(row),
+              },
+              {
+                label: '归档',
+                type: 'link',
+                ifShow:
+                  Number(row.status) === 1 &&
+                  Number(row.is_correct) !== 0 &&
+                  Number(row.quality_score) > 0,
+                onClick: () => openArchive(row),
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+
+      <div v-else class="min-h-0 flex-1 overflow-y-auto">
+        <GenerationCardList
+          ref="cardListRef"
+          :filters="cardFilters"
+          @detail="openDetail"
+          @review="openReview"
+          @archive="openArchive"
         />
-      </template>
-    </Grid>
-
-    <div v-else class="gen-card-wrap">
-      <GenerationCardList
-        ref="cardListRef"
-        :filters="cardFilters"
-        @detail="openDetail"
-        @review="openReview"
-        @archive="openArchive"
-      />
+      </div>
     </div>
   </Page>
 </template>
-
-<style scoped>
-/* 卡片区撑满摘要+搜索下方剩余高度，内部自行滚动 */
-.gen-card-wrap {
-  height: calc(100% - 12px);
-  min-height: 420px;
-  overflow: auto;
-}
-</style>
diff --git a/apps/web-antd/src/views/system/ai/image-ocr-record/components/ImageOcrCardList.vue b/apps/web-antd/src/views/system/ai/image-ocr-record/components/ImageOcrCardList.vue
new file mode 100644
index 00000000..634f0601
--- /dev/null
+++ b/apps/web-antd/src/views/system/ai/image-ocr-record/components/ImageOcrCardList.vue
@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+/**
+ * 识图记录卡片视图
+ * 拉数/分页交给 GlassCardList；行操作由父级 buildRowActions 注入，与列表同源
+ */
+import type { ActionItem } from '#/components/table-action';
+
+import { ref } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { GlassCard, GlassCardList } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
+
+import { getAiGenerationList } from '../../generation/api';
+import { formatDurationMs } from '../../generation/utils/format';
+
+defineOptions({ name: 'ImageOcrCardList' });
+
+const props = defineProps<{
+  buildRowActions: (row: Record<string, any>) => ActionItem[];
+  /** 已 normalize 的筛选（不含 page） */
+  formValues?: Record<string, any>;
+}>();
+
+const glassListRef = ref<null | {
+  refreshKeepPage: () => Promise<void>;
+  reload: () => Promise<void>;
+}>(null);
+
+function statusColor(status: number) {
+  if (status === 1) return 'success';
+  if (status === 2) return 'error';
+  return 'processing';
+}
+
+function statusText(status: number) {
+  if (status === 1) return '成功';
+  if (status === 2) return '失败';
+  return '进行中';
+}
+
+/** 按状态选边框微光色 */
+function cardTone(row: Record<string, any>) {
+  const s = Number(row.status);
+  if (s === 1) return 'success';
+  if (s === 2) return 'destructive';
+  return 'warning';
+}
+
+/** 是否传方识图：卡片才展示患者姓名/手机 */
+function isTransferOcr(row: Record<string, any>) {
+  return (
+    String(row.ocr_mode || '') === 'transfer' ||
+    String(row.scene || '') === 'transfer_image_ocr'
+  );
+}
+
+/** 传方患者一行：姓名 + 手机，都空则 — */
+function patientLine(row: Record<string, any>) {
+  const name = String(row.patient_name || '').trim();
+  const mobile = String(row.patient_mobile || '').trim();
+  if (!name && !mobile) return '—';
+  if (name && mobile) return `${name} ${mobile}`;
+  return name || mobile;
+}
+
+/** 味数：优先 drug_count，回落 match_drug_total */
+function herbCount(row: Record<string, any>) {
+  const n = Number(row.drug_count || 0);
+  if (n > 0) return n;
+  return Number(row.match_drug_total || 0);
+}
+
+async function reload() {
+  await glassListRef.value?.reload();
+}
+
+async function refreshKeepPage() {
+  await glassListRef.value?.refreshKeepPage();
+}
+
+defineExpose({ reload, refreshKeepPage });
+</script>
+
+<template>
+  <GlassCardList
+    ref="glassListRef"
+    :fetcher="getAiGenerationList"
+    :form-values="props.formValues"
+    :min-card-width="320"
+    empty-text="暂无识图记录"
+  >
+    <template #card="{ row }">
+      <GlassCard
+        hoverable
+        icon="lucide:scan-eye"
+        :tone="cardTone(row)"
+        padding="md"
+      >
+        <template #title>
+          <span :title="row.name">{{ row.name || `记录 #${row.id}` }}</span>
+        </template>
+        <template #subtitle>
+          #{{ row.id }} · {{ row.scene_txt || row.scene || '—' }} ·
+          {{ row.created_at || '—' }}
+        </template>
+        <template #extra>
+          <Tag :color="statusColor(Number(row.status))">
+            {{ row.status_txt || statusText(Number(row.status)) }}
+          </Tag>
+        </template>
+
+        <dl class="ocr-card__kv">
+          <div
+            v-if="isTransferOcr(row)"
+            class="ocr-card__kv-item ocr-card__kv-span"
+          >
+            <dt>传方患者</dt>
+            <dd :title="patientLine(row)">{{ patientLine(row) }}</dd>
+          </div>
+          <div class="ocr-card__kv-item">
+            <dt>上传医生</dt>
+            <dd :title="row.doctor_name || '—'">
+              {{ row.doctor_name || '—' }}
+            </dd>
+          </div>
+          <div class="ocr-card__kv-item">
+            <dt>门店</dt>
+            <dd :title="row.store_name || '—'">
+              {{ row.store_name || '—' }}
+            </dd>
+          </div>
+          <div class="ocr-card__kv-item">
+            <dt>味数</dt>
+            <dd>
+              <template v-if="herbCount(row) > 0"
+                >{{ herbCount(row) }} 味</template
+              >
+              <template v-else>—</template>
+            </dd>
+          </div>
+          <div class="ocr-card__kv-item">
+            <dt>供应商 / 模型</dt>
+            <dd :title="`${row.provider || '—'} / ${row.model || '—'}`">
+              {{ row.provider || '—' }} / {{ row.model || '—' }}
+            </dd>
+          </div>
+          <div class="ocr-card__kv-item">
+            <dt>Tokens</dt>
+            <dd
+              :title="`P ${row.prompt_tokens || 0} / C ${row.completion_tokens || 0}`"
+            >
+              {{ row.total_tokens || 0 }}
+            </dd>
+          </div>
+          <div class="ocr-card__kv-item">
+            <dt>耗时</dt>
+            <dd>{{ formatDurationMs(Number(row.duration_ms || 0)) || '—' }}</dd>
+          </div>
+          <div class="ocr-card__kv-item">
+            <dt>药名匹配</dt>
+            <dd
+              :class="{
+                'text-[hsl(var(--destructive))]':
+                  Number(row.match_drug_unmatched) > 0,
+              }"
+            >
+              <template v-if="Number(row.match_drug_total) > 0">
+                未匹配 {{ row.match_drug_unmatched || 0 }}/{{
+                  row.match_drug_total
+                }}
+              </template>
+              <template v-else>—</template>
+            </dd>
+          </div>
+        </dl>
+
+        <div
+          v-if="row.error_msg"
+          class="mt-2 line-clamp-2 rounded border border-[hsl(var(--destructive)/30%)] bg-[hsl(var(--destructive)/8%)] px-2 py-1 text-xs text-[hsl(var(--destructive))]"
+          :title="row.error_msg"
+        >
+          错误：{{ row.error_msg }}
+        </div>
+
+        <template #footer>
+          <CardActions :max-visible="2" :actions="props.buildRowActions(row)" />
+        </template>
+      </GlassCard>
+    </template>
+  </GlassCardList>
+</template>
+
+<style scoped>
+.ocr-card__kv {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+  margin: 0;
+}
+
+.ocr-card__kv-item dt {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.ocr-card__kv-item dd {
+  margin: 2px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+/* 传方患者跨两列，姓名+手机一行展示更完整 */
+.ocr-card__kv-span {
+  grid-column: 1 / -1;
+}
+</style>
diff --git a/apps/web-antd/src/views/system/ai/image-ocr-record/index.vue b/apps/web-antd/src/views/system/ai/image-ocr-record/index.vue
index fa8f36f4..24114c27 100644
--- a/apps/web-antd/src/views/system/ai/image-ocr-record/index.vue
+++ b/apps/web-antd/src/views/system/ai/image-ocr-record/index.vue
@@ -1,25 +1,93 @@
 <script lang="ts" setup>
 /**
  * 识图记录：独立菜单页，只看 prescription_image_ocr / transfer_image_ocr
+ * 抽出搜索 + 列表/卡片双视图；卡片统一 GlassCard + CardActions
  * 数据复用 xk_ai_generation + ai-generation/list；详情复用 AI 生成记录弹窗
  */
+import { computed, ref, watch } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { Tag } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import type { ActionItem } from '#/components/table-action';
 import { TableAction } from '#/components/table-action';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
 
 import DetailModal from '../generation/components/detail-modal.vue';
+import { getAiGenerationList } from '../generation/api';
 import { formatDurationMs } from '../generation/utils/format';
-import { formOptions } from './config/search';
+import ImageOcrCardList from './components/ImageOcrCardList.vue';
+import { formOptions, normalizeImageOcrFilters } from './config/search';
 import { gridOptions as baseGridOptions } from './config/table';
 
 defineOptions({ name: 'AiImageOcrRecord' });
 
-const [Grid] = useVbenVxeGrid({
-  formOptions,
-  gridOptions: baseGridOptions,
+/** 列表/卡片双视图，localStorage 记忆偏好 */
+const viewMode = useViewMode('ai-image-ocr-record-view-mode');
+const cardListRef = ref<InstanceType<typeof ImageOcrCardList> | null>(null);
+
+/** 从 schema 取 defaultValue，保证首屏列表/卡片筛选口径一致 */
+function collectDefaultSearchValues(): Record<string, any> {
+  const values: Record<string, any> = {};
+  for (const item of formOptions.schema ?? []) {
+    if (item.fieldName && item.defaultValue !== undefined) {
+      values[item.fieldName] = item.defaultValue;
+    }
+  }
+  return values;
+}
+
+/** 双视图共用的原始表单值（未 normalize） */
+const searchValues = ref<Record<string, any>>(collectDefaultSearchValues());
+/** 卡片列表用已 normalize 的筛选，computed 避免模板每次新建对象导致死循环重拉 */
+const cardFilters = computed(() =>
+  normalizeImageOcrFilters(searchValues.value),
+);
+
+/**
+ * 顶部统一搜索：列表/卡片共用
+ * 抽出后 Grid 可直接挂在 Page 下，height:auto 才能撑满剩余高度
+ */
+const [SearchForm, searchFormApi] = useVbenForm({
+  ...formOptions,
+  handleSubmit: async (values) => {
+    searchValues.value = { ...values };
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    }
+  },
+  handleReset: async () => {
+    await searchFormApi.reset();
+    searchValues.value = collectDefaultSearchValues();
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    }
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    ...baseGridOptions,
+    toolbarConfig: {
+      ...baseGridOptions.toolbarConfig,
+      search: false,
+    },
+    proxyConfig: {
+      ...baseGridOptions.proxyConfig,
+      ajax: {
+        query: async ({ page }) => {
+          return await getAiGenerationList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...normalizeImageOcrFilters(searchValues.value),
+          });
+        },
+      },
+    },
+  },
 });
 
 const [DetailModalComp, detailModalApi] = useVbenModal({
@@ -32,6 +100,25 @@ function openDetail(row: any) {
   detailModalApi.open();
 }
 
+/** 列表/卡片行操作同源 */
+function buildRowActions(row: Record<string, any>): ActionItem[] {
+  return [
+    {
+      label: '详情',
+      type: 'link',
+      icon: 'lucide:eye',
+      onClick: () => openDetail(row),
+    },
+  ];
+}
+
+/** 切回列表时 Grid 被 v-if 重建，需主动拉数 */
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    gridApi.query();
+  }
+});
+
 function statusColor(status: number) {
   if (status === 1) return 'success';
   if (status === 2) return 'error';
@@ -48,42 +135,60 @@ function statusText(status: number) {
 <template>
   <Page auto-content-height>
     <DetailModalComp />
-    <Grid>
-      <template #status="{ row }">
-        <Tag :color="statusColor(Number(row.status))">
-          {{ statusText(Number(row.status)) }}
-        </Tag>
-      </template>
-      <template #tokens="{ row }">
-        {{ row.total_tokens || 0 }}
-      </template>
-      <template #duration="{ row }">
-        {{ formatDurationMs(Number(row.duration_ms || 0)) }}
-      </template>
-      <template #match="{ row }">
-        <span
-          v-if="Number(row.match_drug_total) > 0"
-          :class="
-            Number(row.match_drug_unmatched) > 0
-              ? 'text-[hsl(var(--destructive,var(--warning)))]'
-              : ''
-          "
-        >
-          未匹配 {{ row.match_drug_unmatched || 0 }}/{{ row.match_drug_total }}
-        </span>
-        <span v-else class="text-xs text-[hsl(var(--muted-foreground))]">—</span>
-      </template>
-      <template #action="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              type: 'link',
-              onClick: () => openDetail(row),
-            },
-          ]"
+    <!-- 搜索固定，列表/卡片只留一个滚动层，避免页面与内容区双滚动条 -->
+    <div class="flex h-full min-h-0 flex-col overflow-hidden">
+      <div
+        class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+      >
+        <SearchForm />
+      </div>
+      <div
+        class="mb-3 flex shrink-0 flex-wrap items-center justify-between gap-2"
+      >
+        <ViewModeSwitch v-model="viewMode" />
+      </div>
+
+      <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
+        <template #status="{ row }">
+          <Tag :color="statusColor(Number(row.status))">
+            {{ statusText(Number(row.status)) }}
+          </Tag>
+        </template>
+        <template #tokens="{ row }">
+          {{ row.total_tokens || 0 }}
+        </template>
+        <template #duration="{ row }">
+          {{ formatDurationMs(Number(row.duration_ms || 0)) }}
+        </template>
+        <template #match="{ row }">
+          <span
+            v-if="Number(row.match_drug_total) > 0"
+            :class="
+              Number(row.match_drug_unmatched) > 0
+                ? 'text-[hsl(var(--destructive,var(--warning)))]'
+                : ''
+            "
+          >
+            未匹配 {{ row.match_drug_unmatched || 0 }}/{{
+              row.match_drug_total
+            }}
+          </span>
+          <span v-else class="text-xs text-[hsl(var(--muted-foreground))]"
+            >—</span
+          >
+        </template>
+        <template #action="{ row }">
+          <TableAction :actions="buildRowActions(row)" />
+        </template>
+      </Grid>
+
+      <div v-else class="min-h-0 flex-1 overflow-y-auto">
+        <ImageOcrCardList
+          ref="cardListRef"
+          :form-values="cardFilters"
+          :build-row-actions="buildRowActions"
         />
-      </template>
-    </Grid>
+      </div>
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/ai/platform/components/model-modal.vue b/apps/web-antd/src/views/system/ai/platform/components/model-modal.vue
index 2744a3c4..c274c5ce 100644
--- a/apps/web-antd/src/views/system/ai/platform/components/model-modal.vue
+++ b/apps/web-antd/src/views/system/ai/platform/components/model-modal.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 /**
  * AI 厂商模型新增/编辑弹窗
+ * 按平台 code 动态显示厂商扩展参数（如小米 MiMo 思考开关）
  */
 import { ref } from 'vue';
 
@@ -12,9 +13,16 @@ import { useVbenForm } from '#/adapter/form';
 
 import { createAiModel, updateAiModel } from '../api/model';
 import { STATUS_OPTIONS } from '../config/constants';
+import {
+  THINKING_TYPE_OPTIONS,
+  defaultThinkingType,
+  supportsThinkingType,
+} from '../config/provider-capabilities';
 
 const isUpdate = ref(false);
+const platformCode = ref('');
 const onSuccess = ref<null | (() => void)>(null);
+
 const [Form, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-12',
   commonConfig: {
@@ -41,8 +49,8 @@ const [Form, formApi] = useVbenForm({
       label: '模型编码',
       rules: 'required',
       formItemClass: 'col-span-6',
-      help: '调用 API 的 model 参数，如 lite / deepseek-chat',
-      componentProps: { placeholder: 'deepseek-chat' },
+      help: '调用 API 的 model 参数，如 lite / deepseek-chat / mimo-v2.6-flash',
+      componentProps: { placeholder: 'mimo-v2.6-flash' },
     },
     {
       component: 'VbenInput',
@@ -88,10 +96,41 @@ const [Form, formApi] = useVbenForm({
       componentProps: { type: 'textarea', rows: 2, placeholder: '模型简介' },
       defaultValue: '',
     },
+    {
+      component: 'VbenSelect',
+      fieldName: 'thinking_type',
+      label: '思考模式',
+      formItemClass: 'col-span-12',
+      help: '对应官方 thinking.type；病历/出方建议关闭以保证 JSON 稳定',
+      componentProps: { options: [...THINKING_TYPE_OPTIONS] },
+      defaultValue: 'disabled',
+      // 由 updateSchema 按厂商能力显隐
+      dependencies: {
+        show: () => supportsThinkingType(platformCode.value),
+        triggerFields: ['code'],
+      },
+    },
   ],
   showDefaultActions: false,
 });
 
+/** 按厂商刷新思考字段显隐与默认值 */
+function syncThinkingSchema(code: string) {
+  platformCode.value = String(code || '')
+    .trim()
+    .toLowerCase();
+  const show = supportsThinkingType(platformCode.value);
+  formApi.updateSchema([
+    {
+      fieldName: 'thinking_type',
+      dependencies: {
+        show: () => show,
+        triggerFields: ['code'],
+      },
+    },
+  ]);
+}
+
 const [Modal, modalApi] = useVbenModal({
   fullscreenButton: false,
   draggable: true,
@@ -104,8 +143,19 @@ const [Modal, modalApi] = useVbenModal({
     const values = await formApi.getValues();
     modalApi.setState({ confirmLoading: true });
     try {
+      const payload: Record<string, any> = { ...values };
+      // 厂商扩展折进 extra_json，避免散落独立列
+      if (supportsThinkingType(platformCode.value)) {
+        payload.extra_json = {
+          thinking_type:
+            payload.thinking_type || defaultThinkingType(platformCode.value),
+        };
+      } else {
+        payload.extra_json = {};
+      }
+      delete payload.thinking_type;
       const api = isUpdate.value ? updateAiModel : createAiModel;
-      await api(values);
+      await api(payload);
       message.success('保存成功');
       onSuccess.value?.();
       modalApi.close();
@@ -115,22 +165,34 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formApi.resetForm();
+      formApi.reset();
       onSuccess.value = null;
+      platformCode.value = '';
       return;
     }
     const data = modalApi.getData<Record<string, any>>() || {};
     isUpdate.value = !!data.update;
-    onSuccess.value = typeof data.onSuccess === 'function' ? data.onSuccess : null;
+    onSuccess.value =
+      typeof data.onSuccess === 'function' ? data.onSuccess : null;
+    const code = String(data.platform_code || data.values?.platform_code || '');
+    syncThinkingSchema(code);
     if (data.values && data.update) {
-      formApi.setValues({ ...data.values });
+      const extra = data.values.extra_json || {};
+      formApi.setValues({
+        ...data.values,
+        thinking_type:
+          data.values.thinking_type ||
+          extra.thinking_type ||
+          defaultThinkingType(code),
+      });
     } else {
-      formApi.resetForm();
+      formApi.reset();
       formApi.setValues({
         platform_id: data.platform_id || data.values?.platform_id || 0,
         sort: 0,
         status: 1,
         is_default: 0,
+        thinking_type: defaultThinkingType(code),
       });
     }
   },
@@ -138,7 +200,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="`${isUpdate ? '编辑' : '新增'}模型`" class="w-[560px]">
+  <Modal :title="`${isUpdate ? '编辑' : '新增'}模型`" class="w-[60%]">
     <Form />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/system/ai/platform/components/platform-detail.vue b/apps/web-antd/src/views/system/ai/platform/components/platform-detail.vue
index cc21bbda..375cecd1 100644
--- a/apps/web-antd/src/views/system/ai/platform/components/platform-detail.vue
+++ b/apps/web-antd/src/views/system/ai/platform/components/platform-detail.vue
@@ -2,6 +2,7 @@
 /**
  * AI 平台详情抽屉（二级页）
  * Tabs：概览 | Key消耗 | 模型消耗 | 请求记录 | Key管理 | 模型管理
+ * Key/模型列表统一 GlassCard + CardActions，与平台一级页一致
  */
 import { computed, ref } from 'vue';
 
@@ -11,7 +12,6 @@ import {
   Button,
   Card,
   Col,
-  Popconfirm,
   Row,
   Spin,
   Table,
@@ -20,14 +20,19 @@ import {
   message,
 } from 'ant-design-vue';
 
+import { GlassCard } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
+
 import KeyModal from '../../api-key/components/modal.vue';
-import {
-  deleteAiApiKey,
-  setAiApiKeyDefault,
-} from '../../api-key/api';
+import { deleteAiApiKey, setAiApiKeyDefault } from '../../api-key/api';
 import { getAiGenerationList } from '../../generation/api';
 import { getAiPlatformDetailBoard, setAiPlatformActive } from '../api';
 import { deleteAiModel, setAiModelDefault } from '../api/model';
+import {
+  resolveThinkingType,
+  supportsThinkingType,
+  thinkingTypeLabel,
+} from '../config/provider-capabilities';
 import ModelModal from './model-modal.vue';
 
 defineOptions({ name: 'AiPlatformDetail' });
@@ -38,6 +43,7 @@ interface ModelCard {
   code: string;
   name: string;
   description: string;
+  extra_json?: Record<string, any>;
   is_default: number;
   status: number;
 }
@@ -122,7 +128,9 @@ async function loadDetail() {
     const data = res?.data || res || {};
     platform.value = data.platform || {};
     overview.value = data.overview || {};
-    usageByKey.value = Array.isArray(data.usage_by_key) ? data.usage_by_key : [];
+    usageByKey.value = Array.isArray(data.usage_by_key)
+      ? data.usage_by_key
+      : [];
     usageByModel.value = Array.isArray(data.usage_by_model)
       ? data.usage_by_model
       : [];
@@ -181,16 +189,92 @@ function formatDuration(ms: number) {
   return `${(n / 1000).toFixed(1)} s`;
 }
 
+const platformCode = computed(() => String(platform.value?.code || ''));
+
 function openModelModal(row?: ModelCard) {
+  const extra = row?.extra_json || {};
   modelModalApi.setData({
-    values: row || {},
+    values: {
+      ...(row || {}),
+      thinking_type: resolveThinkingType(platformCode.value, extra),
+    },
     update: !!row?.id,
     platform_id: platformId.value,
+    platform_code: platformCode.value,
     onSuccess: reloadAll,
   });
   modelModalApi.open();
 }
 
+/** 密钥卡底部操作 */
+function keyActions(k: KeyCard) {
+  return [
+    ...(k.is_default !== 1
+      ? [
+          {
+            label: '设为默认',
+            icon: 'lucide:check-circle-2',
+            onClick: () => handleSetDefaultKey(k.id),
+          },
+        ]
+      : []),
+    {
+      label: '编辑',
+      icon: 'lucide:pencil',
+      onClick: () => openKeyModal(k),
+    },
+    {
+      label: '删除',
+      icon: 'lucide:trash-2',
+      danger: true,
+      popConfirm: {
+        title: '确认删除该密钥？',
+        confirm: () => handleDeleteKey(k.id),
+      },
+    },
+  ];
+}
+
+/** 模型卡底部操作 */
+function modelActions(m: ModelCard) {
+  return [
+    ...(m.is_default !== 1
+      ? [
+          {
+            label: '设为默认',
+            icon: 'lucide:check-circle-2',
+            onClick: () => handleSetDefaultModel(m.id),
+          },
+        ]
+      : []),
+    {
+      label: '编辑',
+      icon: 'lucide:pencil',
+      onClick: () => openModelModal(m),
+    },
+    {
+      label: '删除',
+      icon: 'lucide:trash-2',
+      danger: true,
+      popConfirm: {
+        title: '确认删除该模型？',
+        confirm: () => handleDeleteModel(m.id),
+      },
+    },
+  ];
+}
+
+/** 模型卡副标题：编码 + 思考开关摘要（仅厂商支持时） */
+function modelSubtitle(m: ModelCard) {
+  const parts = [m.code || '—'];
+  if (supportsThinkingType(platformCode.value)) {
+    parts.push(
+      thinkingTypeLabel(resolveThinkingType(platformCode.value, m.extra_json)),
+    );
+  }
+  return parts.join(' · ');
+}
+
 function openKeyModal(row?: KeyCard) {
   keyModalApi.setData({
     values: row || { platform_id: platformId.value },
@@ -234,8 +318,18 @@ async function handleSetDefaultKey(id: number) {
 
 const usageKeyColumns = [
   { title: '密钥', dataIndex: 'api_key_name', key: 'api_key_name' },
-  { title: '请求数', dataIndex: 'request_count', key: 'request_count', width: 90 },
-  { title: 'Tokens', dataIndex: 'total_tokens', key: 'total_tokens', width: 110 },
+  {
+    title: '请求数',
+    dataIndex: 'request_count',
+    key: 'request_count',
+    width: 90,
+  },
+  {
+    title: 'Tokens',
+    dataIndex: 'total_tokens',
+    key: 'total_tokens',
+    width: 110,
+  },
   {
     title: '平均耗时',
     dataIndex: 'avg_duration_ms',
@@ -247,8 +341,18 @@ const usageKeyColumns = [
 
 const usageModelColumns = [
   { title: '模型', dataIndex: 'model', key: 'model' },
-  { title: '请求数', dataIndex: 'request_count', key: 'request_count', width: 90 },
-  { title: 'Tokens', dataIndex: 'total_tokens', key: 'total_tokens', width: 110 },
+  {
+    title: '请求数',
+    dataIndex: 'request_count',
+    key: 'request_count',
+    width: 90,
+  },
+  {
+    title: 'Tokens',
+    dataIndex: 'total_tokens',
+    key: 'total_tokens',
+    width: 110,
+  },
   {
     title: '平均耗时',
     dataIndex: 'avg_duration_ms',
@@ -263,8 +367,19 @@ const requestColumns = [
   { title: '场景', dataIndex: 'scene_txt', key: 'scene_txt', width: 80 },
   { title: '名称', dataIndex: 'name', key: 'name', ellipsis: true },
   { title: '状态', dataIndex: 'status_txt', key: 'status_txt', width: 80 },
-  { title: '模型', dataIndex: 'model', key: 'model', width: 120, ellipsis: true },
-  { title: 'Tokens', dataIndex: 'total_tokens', key: 'total_tokens', width: 90 },
+  {
+    title: '模型',
+    dataIndex: 'model',
+    key: 'model',
+    width: 120,
+    ellipsis: true,
+  },
+  {
+    title: 'Tokens',
+    dataIndex: 'total_tokens',
+    key: 'total_tokens',
+    width: 90,
+  },
   {
     title: '耗时',
     dataIndex: 'duration_ms',
@@ -304,24 +419,38 @@ const requestColumns = [
           </div>
         </div>
 
-        <Tabs :active-key="activeTab" class="ai-plat-tabs min-h-0 flex-1" @change="onTabChange">
+        <Tabs
+          :active-key="activeTab"
+          class="ai-plat-tabs min-h-0 flex-1"
+          @change="onTabChange"
+        >
           <Tabs.TabPane key="overview" tab="概览">
             <Row :gutter="12">
               <Col :span="8">
                 <Card size="small">
-                  <div class="text-xs text-[hsl(var(--muted-foreground))]">密钥数</div>
-                  <div class="mt-1 text-lg font-semibold">{{ overview.key_count || 0 }}</div>
+                  <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                    密钥数
+                  </div>
+                  <div class="mt-1 text-lg font-semibold">
+                    {{ overview.key_count || 0 }}
+                  </div>
                 </Card>
               </Col>
               <Col :span="8">
                 <Card size="small">
-                  <div class="text-xs text-[hsl(var(--muted-foreground))]">模型数</div>
-                  <div class="mt-1 text-lg font-semibold">{{ overview.model_count || 0 }}</div>
+                  <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                    模型数
+                  </div>
+                  <div class="mt-1 text-lg font-semibold">
+                    {{ overview.model_count || 0 }}
+                  </div>
                 </Card>
               </Col>
               <Col :span="8">
                 <Card size="small">
-                  <div class="text-xs text-[hsl(var(--muted-foreground))]">默认模型</div>
+                  <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                    默认模型
+                  </div>
                   <div class="mt-1 truncate text-lg font-semibold">
                     {{ platform.default_model || '—' }}
                   </div>
@@ -329,21 +458,31 @@ const requestColumns = [
               </Col>
               <Col :span="8" class="mt-3">
                 <Card size="small">
-                  <div class="text-xs text-[hsl(var(--muted-foreground))]">总 Tokens</div>
-                  <div class="mt-1 text-lg font-semibold">{{ overview.total_tokens || 0 }}</div>
-                </Card>
-              </Col>
-              <Col :span="8" class="mt-3">
-                <Card size="small">
-                  <div class="text-xs text-[hsl(var(--muted-foreground))]">成功/失败</div>
+                  <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                    总 Tokens
+                  </div>
                   <div class="mt-1 text-lg font-semibold">
-                    {{ overview.success_count || 0 }}/{{ overview.fail_count || 0 }}
+                    {{ overview.total_tokens || 0 }}
                   </div>
                 </Card>
               </Col>
               <Col :span="8" class="mt-3">
                 <Card size="small">
-                  <div class="text-xs text-[hsl(var(--muted-foreground))]">平均耗时</div>
+                  <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                    成功/失败
+                  </div>
+                  <div class="mt-1 text-lg font-semibold">
+                    {{ overview.success_count || 0 }}/{{
+                      overview.fail_count || 0
+                    }}
+                  </div>
+                </Card>
+              </Col>
+              <Col :span="8" class="mt-3">
+                <Card size="small">
+                  <div class="text-xs text-[hsl(var(--muted-foreground))]">
+                    平均耗时
+                  </div>
                   <div class="mt-1 text-lg font-semibold">
                     {{ formatDuration(Number(overview.avg_duration_ms || 0)) }}
                   </div>
@@ -399,7 +538,9 @@ const requestColumns = [
 
           <Tabs.TabPane key="keys" tab="Key管理">
             <div class="mb-2 flex justify-end">
-              <Button type="primary" size="small" @click="openKeyModal()">新增密钥</Button>
+              <Button type="primary" size="small" @click="openKeyModal()"
+                >新增密钥</Button
+              >
             </div>
             <div
               v-if="!keys.length"
@@ -408,43 +549,46 @@ const requestColumns = [
               暂无密钥
             </div>
             <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
-              <div
+              <GlassCard
                 v-for="k in keys"
                 :key="k.id"
-                class="rounded-lg border border-[hsl(var(--border))] p-3"
+                :title="k.name"
+                :subtitle="k.api_key_mask || '—'"
+                :tone="
+                  k.is_default === 1
+                    ? 'primary'
+                    : k.status === 1
+                      ? 'success'
+                      : 'warning'
+                "
+                padding="md"
               >
-                <div class="flex flex-wrap items-center gap-2">
-                  <span class="font-medium">{{ k.name }}</span>
-                  <Tag v-if="k.is_default === 1" color="gold">默认</Tag>
-                  <Tag :color="k.status === 1 ? 'success' : 'default'">
-                    {{ k.status === 1 ? '启用' : '禁用' }}
-                  </Tag>
+                <template #extra>
+                  <div class="flex flex-wrap justify-end gap-1">
+                    <Tag v-if="k.is_default === 1" color="gold">默认</Tag>
+                    <Tag :color="k.status === 1 ? 'success' : 'default'">
+                      {{ k.status === 1 ? '启用' : '禁用' }}
+                    </Tag>
+                  </div>
+                </template>
+                <div
+                  v-if="k.remark"
+                  class="line-clamp-2 text-xs text-[hsl(var(--muted-foreground))]"
+                >
+                  {{ k.remark }}
                 </div>
-                <div class="mt-1 font-mono text-xs text-[hsl(var(--muted-foreground))]">
-                  {{ k.api_key_mask || '—' }}
-                </div>
-                <div class="mt-3 flex flex-wrap gap-2">
-                  <Button
-                    v-if="k.is_default !== 1"
-                    size="small"
-                    type="primary"
-                    ghost
-                    @click="handleSetDefaultKey(k.id)"
-                  >
-                    设为默认
-                  </Button>
-                  <Button size="small" @click="openKeyModal(k)">编辑</Button>
-                  <Popconfirm title="确认删除该密钥？" @confirm="handleDeleteKey(k.id)">
-                    <Button size="small" danger>删除</Button>
-                  </Popconfirm>
-                </div>
-              </div>
+                <template #footer>
+                  <CardActions :max-visible="3" :actions="keyActions(k)" />
+                </template>
+              </GlassCard>
             </div>
           </Tabs.TabPane>
 
           <Tabs.TabPane key="models" tab="模型管理">
             <div class="mb-2 flex justify-end">
-              <Button type="primary" size="small" @click="openModelModal()">新增模型</Button>
+              <Button type="primary" size="small" @click="openModelModal()"
+                >新增模型</Button
+              >
             </div>
             <div
               v-if="!models.length"
@@ -453,35 +597,37 @@ const requestColumns = [
               暂无模型
             </div>
             <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
-              <div
+              <GlassCard
                 v-for="m in models"
                 :key="m.id"
-                class="rounded-lg border border-[hsl(var(--border))] p-3"
+                :title="m.name"
+                :subtitle="modelSubtitle(m)"
+                :tone="
+                  m.is_default === 1
+                    ? 'primary'
+                    : m.status === 1
+                      ? 'success'
+                      : 'warning'
+                "
+                padding="md"
               >
-                <div class="flex flex-wrap items-center gap-2">
-                  <span class="font-medium">{{ m.name }}</span>
-                  <Tag v-if="m.is_default === 1" color="gold">默认</Tag>
-                  <Tag :color="m.status === 1 ? 'success' : 'default'">
-                    {{ m.status === 1 ? '启用' : '禁用' }}
-                  </Tag>
+                <template #extra>
+                  <div class="flex flex-wrap justify-end gap-1">
+                    <Tag v-if="m.is_default === 1" color="gold">默认</Tag>
+                    <Tag :color="m.status === 1 ? 'success' : 'default'">
+                      {{ m.status === 1 ? '启用' : '禁用' }}
+                    </Tag>
+                  </div>
+                </template>
+                <div
+                  class="line-clamp-2 text-xs text-[hsl(var(--muted-foreground))]"
+                >
+                  {{ m.description || '暂无说明' }}
                 </div>
-                <div class="mt-1 text-xs text-[hsl(var(--muted-foreground))]">{{ m.code }}</div>
-                <div class="mt-3 flex flex-wrap gap-2">
-                  <Button
-                    v-if="m.is_default !== 1"
-                    size="small"
-                    type="primary"
-                    ghost
-                    @click="handleSetDefaultModel(m.id)"
-                  >
-                    设为默认
-                  </Button>
-                  <Button size="small" @click="openModelModal(m)">编辑</Button>
-                  <Popconfirm title="确认删除该模型？" @confirm="handleDeleteModel(m.id)">
-                    <Button size="small" danger>删除</Button>
-                  </Popconfirm>
-                </div>
-              </div>
+                <template #footer>
+                  <CardActions :max-visible="3" :actions="modelActions(m)" />
+                </template>
+              </GlassCard>
             </div>
           </Tabs.TabPane>
         </Tabs>
diff --git a/apps/web-antd/src/views/system/ai/platform/config/form.ts b/apps/web-antd/src/views/system/ai/platform/config/form.ts
index b90eae0a..9fb31a5e 100644
--- a/apps/web-antd/src/views/system/ai/platform/config/form.ts
+++ b/apps/web-antd/src/views/system/ai/platform/config/form.ts
@@ -23,8 +23,8 @@ export const modalFormProps: VbenFormProps = {
       label: '平台编码',
       rules: 'required',
       formItemClass: 'col-span-6',
-      help: '小写蛇形，如 spark / deepseek，须与 Agent 工厂一致',
-      componentProps: { placeholder: 'spark' },
+      help: '小写蛇形，如 spark / deepseek / xiaomimimo，须与 Agent 工厂一致',
+      componentProps: { placeholder: 'xiaomimimo' },
     },
     {
       component: 'VbenInput',
diff --git a/apps/web-antd/src/views/system/ai/platform/config/provider-capabilities.ts b/apps/web-antd/src/views/system/ai/platform/config/provider-capabilities.ts
new file mode 100644
index 00000000..f79690fa
--- /dev/null
+++ b/apps/web-antd/src/views/system/ai/platform/config/provider-capabilities.ts
@@ -0,0 +1,61 @@
+/**
+ * AI 厂商可配参数能力表（与 PHP AiProviderCapability 对齐）
+ * UI 按 provider code 决定模型弹窗 / 系统配置是否展示扩展字段
+ */
+
+export const THINKING_TYPE_OPTIONS = [
+  { label: '关闭思考（推荐：病历/出方）', value: 'disabled' },
+  { label: '开启思考', value: 'enabled' },
+] as const;
+
+export type ThinkingType = 'disabled' | 'enabled';
+
+/** 单个厂商允许配置的扩展键 */
+export type ProviderCapabilityMap = {
+  thinking_type?: ThinkingType[];
+};
+
+const CAPABILITIES: Record<string, ProviderCapabilityMap> = {
+  xiaomimimo: {
+    thinking_type: ['disabled', 'enabled'],
+  },
+  deepseek: {},
+  spark: {},
+};
+
+/** 取厂商能力；未知厂商视为无扩展参数 */
+export function getProviderCapabilities(
+  providerCode: string,
+): ProviderCapabilityMap {
+  const code = String(providerCode || '')
+    .trim()
+    .toLowerCase();
+  return CAPABILITIES[code] || {};
+}
+
+/** 是否支持思考开关 */
+export function supportsThinkingType(providerCode: string): boolean {
+  return !!getProviderCapabilities(providerCode).thinking_type?.length;
+}
+
+/** 默认思考开关（病历出方要稳 JSON） */
+export function defaultThinkingType(providerCode: string): ThinkingType {
+  return supportsThinkingType(providerCode) ? 'disabled' : 'disabled';
+}
+
+/** 从模型 extra_json 读思考类型，缺省按厂商默认 */
+export function resolveThinkingType(
+  providerCode: string,
+  extra: Record<string, any> | null | undefined,
+): ThinkingType {
+  if (!supportsThinkingType(providerCode)) return 'disabled';
+  const v = String(extra?.thinking_type || '')
+    .trim()
+    .toLowerCase();
+  return v === 'enabled' ? 'enabled' : 'disabled';
+}
+
+/** 卡片副标题用：思考：开/关 */
+export function thinkingTypeLabel(type: ThinkingType | string): string {
+  return type === 'enabled' ? '思考：开' : '思考：关';
+}
diff --git a/apps/web-antd/src/views/system/ai/platform/index.vue b/apps/web-antd/src/views/system/ai/platform/index.vue
index 7d2a856b..f9d2032e 100644
--- a/apps/web-antd/src/views/system/ai/platform/index.vue
+++ b/apps/web-antd/src/views/system/ai/platform/index.vue
@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 /**
  * AI 平台管理（一级仅平台卡片）
- * 点击平台打开详情抽屉（二级页）：概览 / 消耗 / 请求 / Key·模型管理
+ * 卡片统一 GlassCard + CardActions；点击卡片打开详情抽屉
  */
 import { onMounted, ref, watch } from 'vue';
 
 import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 
-import { Button, Input, Popconfirm, Spin, Tag, message } from 'ant-design-vue';
+import { Button, Input, Spin, Tag, message } from 'ant-design-vue';
+
+import { GlassCard } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
 
 import {
   deleteAiPlatform,
@@ -101,6 +104,47 @@ async function handleSetActivePlatform(id: number) {
   await loadBoard();
 }
 
+/** 卡片主题色：当前选用强调 primary，禁用用 muted 感的 warning */
+function platformTone(p: PlatformBoard) {
+  if (p.is_active === 1) return 'primary';
+  if (p.status !== 1) return 'warning';
+  return 'success';
+}
+
+/** 底部操作：设为当前 / 编辑 / 详情 / 删除 */
+function platformActions(p: PlatformBoard) {
+  return [
+    ...(p.is_active !== 1
+      ? [
+          {
+            label: '设为当前',
+            icon: 'lucide:check-circle-2',
+            onClick: () => handleSetActivePlatform(p.id),
+          },
+        ]
+      : []),
+    {
+      label: '编辑',
+      icon: 'lucide:pencil',
+      onClick: () => openPlatformModal(p),
+    },
+    {
+      label: '详情',
+      icon: 'lucide:eye',
+      onClick: () => openPlatformDetail(p),
+    },
+    {
+      label: '删除',
+      icon: 'lucide:trash-2',
+      danger: true,
+      popConfirm: {
+        title: '确认删除该平台？',
+        confirm: () => handleDeletePlatform(p.id),
+      },
+    },
+  ];
+}
+
 onMounted(() => {
   void loadBoard();
 });
@@ -134,66 +178,67 @@ onMounted(() => {
           >
             暂无平台，请先新增
           </div>
-          <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
-            <div
+          <div
+            v-else
+            class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3"
+          >
+            <GlassCard
               v-for="p in platforms"
               :key="p.id"
-              class="ai-board-card"
-              :class="{ 'ai-board-card--current': p.is_active === 1 }"
+              hoverable
+              clickable
+              :active="p.is_active === 1"
+              :tone="platformTone(p)"
+              padding="md"
               @click="openPlatformDetail(p)"
             >
-              <div class="flex items-start gap-3">
-                <div class="ai-board-logo">
-                  <img
-                    v-if="p.logo"
-                    :src="p.logo"
-                    :alt="p.name"
-                    class="h-full w-full object-contain"
-                  />
-                  <span v-else class="ai-board-logo-fallback">
-                    {{ (p.name || p.code || '?').slice(0, 1) }}
-                  </span>
-                </div>
-                <div class="min-w-0 flex-1">
-                  <div class="flex flex-wrap items-center gap-2">
-                    <span class="font-medium text-[hsl(var(--foreground))]">
-                      {{ p.name }}
+              <template #title>
+                <span class="inline-flex min-w-0 items-center gap-2">
+                  <span
+                    class="ai-board-logo"
+                    :class="{ 'ai-board-logo--empty': !p.logo }"
+                  >
+                    <img
+                      v-if="p.logo"
+                      :src="p.logo"
+                      :alt="p.name"
+                      class="h-full w-full object-contain"
+                    />
+                    <span v-else class="ai-board-logo-fallback">
+                      {{ (p.name || p.code || '?').slice(0, 1) }}
                     </span>
-                    <Tag v-if="p.is_active === 1" color="processing">当前选用</Tag>
-                    <Tag :color="p.status === 1 ? 'success' : 'default'">
-                      {{ p.status === 1 ? '启用' : '禁用' }}
-                    </Tag>
-                  </div>
-                  <div class="mt-1 text-xs text-[hsl(var(--muted-foreground))]">
-                    {{ p.code }} · 默认 {{ p.default_model || '—' }}
-                  </div>
-                  <div class="mt-1 line-clamp-2 text-xs text-[hsl(var(--muted-foreground))]">
-                    {{ p.description || p.api_url }}
-                  </div>
-                  <div class="mt-1 text-xs text-[hsl(var(--muted-foreground))]">
-                    模型 {{ p.models?.length || 0 }} · 密钥 {{ p.keys?.length || 0 }}
-                  </div>
+                  </span>
+                  <span class="truncate">{{ p.name }}</span>
+                </span>
+              </template>
+              <template #subtitle>
+                {{ p.code }} · 默认 {{ p.default_model || '—' }}
+              </template>
+              <template #extra>
+                <div class="flex flex-wrap justify-end gap-1" @click.stop>
+                  <Tag v-if="p.is_active === 1" color="processing"
+                    >当前选用</Tag
+                  >
+                  <Tag :color="p.status === 1 ? 'success' : 'default'">
+                    {{ p.status === 1 ? '启用' : '禁用' }}
+                  </Tag>
                 </div>
+              </template>
+
+              <div
+                class="line-clamp-2 text-xs text-[hsl(var(--muted-foreground))]"
+              >
+                {{ p.description || p.api_url || '暂无说明' }}
               </div>
-              <div class="mt-3 flex flex-wrap gap-2" @click.stop>
-                <Button
-                  v-if="p.is_active !== 1"
-                  size="small"
-                  type="primary"
-                  ghost
-                  @click="handleSetActivePlatform(p.id)"
-                >
-                  设为当前
-                </Button>
-                <Button size="small" @click="openPlatformModal(p)">编辑</Button>
-                <Button size="small" type="link" @click="openPlatformDetail(p)">
-                  详情
-                </Button>
-                <Popconfirm title="确认删除该平台？" @confirm="handleDeletePlatform(p.id)">
-                  <Button size="small" danger>删除</Button>
-                </Popconfirm>
+              <div class="mt-2 text-xs text-[hsl(var(--muted-foreground))]">
+                模型 {{ p.models?.length || 0 }} · 密钥
+                {{ p.keys?.length || 0 }}
               </div>
-            </div>
+
+              <template #footer>
+                <CardActions :max-visible="3" :actions="platformActions(p)" />
+              </template>
+            </GlassCard>
           </div>
         </div>
       </div>
@@ -202,39 +247,26 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.ai-board-card {
-  cursor: pointer;
-  border: 1px solid hsl(var(--border));
-  border-radius: 10px;
-  padding: 14px 16px;
-  background: hsl(var(--card));
-  color: hsl(var(--foreground));
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease,
-    background-color 0.15s ease;
-}
-.ai-board-card:hover {
-  border-color: hsl(var(--primary) / 0.55);
-}
-.ai-board-card--current {
-  border-color: hsl(var(--primary) / 0.75);
-}
 .ai-board-logo {
-  display: flex;
-  height: 44px;
-  width: 44px;
+  display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 3px;
   overflow: hidden;
-  border-radius: 10px;
+  background: hsl(var(--muted) / 55%);
   border: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.55);
-  padding: 5px;
+  border-radius: 8px;
 }
+
+.ai-board-logo--empty {
+  padding: 0;
+}
+
 .ai-board-logo-fallback {
-  font-size: 15px;
+  font-size: 12px;
   font-weight: 600;
   color: hsl(var(--muted-foreground));
 }
diff --git a/apps/web-antd/src/views/system/delivery-warehouse-order/components/modal.vue b/apps/web-antd/src/views/system/delivery-warehouse-order/components/modal.vue
index cde27650..686fec14 100644
--- a/apps/web-antd/src/views/system/delivery-warehouse-order/components/modal.vue
+++ b/apps/web-antd/src/views/system/delivery-warehouse-order/components/modal.vue
@@ -2,6 +2,7 @@
 /**
  * 配送仓库发货弹窗（左右分栏）
  * 左：收件信息默认展示、可改/取消；右：物流发货
+ * 收件口径：姓名/地址可选，手机号必填；未修改收件则只提交发货
  * 收件表单 v-show 常驻，避免加载中 setValues 卡死
  */
 import { computed, ref } from 'vue';
@@ -50,14 +51,13 @@ const fullAddressText = computed(() => {
 });
 
 function pickReceiverFromOrder(data: Record<string, any> = {}) {
-  const addr = data?.address && typeof data.address === 'object' ? data.address : {};
+  const addr =
+    data?.address && typeof data.address === 'object' ? data.address : {};
   return {
     express_name: String(data?.express_name || addr.name || ''),
     express_mobile: String(data?.express_mobile || addr.mobile || ''),
     express_region: String(data?.express_region || addr.region || ''),
-    express_address: String(
-      data?.express_address || addr.detail_address || '',
-    ),
+    express_address: String(data?.express_address || addr.detail_address || ''),
   };
 }
 
@@ -154,21 +154,24 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.close();
   },
   onConfirm: async () => {
+    // 收件口径：地址/姓名可选；仅手机号必填。未改收件则按当前展示值发货
     if (receiverEditing.value) {
       const re = await receiverFormApi.validate();
       if (!re.valid) return;
       await syncReceiverViewFromForm();
       receiverEditing.value = false;
-    } else {
-      const re = await receiverFormApi.validate();
-      if (!re.valid) {
-        receiverEditing.value = true;
-        return;
-      }
+    }
+    const mobile = String(receiverView.value.express_mobile || '').trim();
+    if (!mobile) {
+      message.warning('请填写收件手机号');
+      receiverEditing.value = true;
+      await receiverFormApi.setValues({ ...receiverView.value });
+      return;
     }
     const se = await shipFormApi.validate();
     if (!se.valid) return;
-    const receiver = await receiverFormApi.getValues();
+    // 以展示态为准（已与表单同步），避免未编辑时表单空值覆盖
+    const receiver = { ...receiverView.value };
     const ship = await shipFormApi.getValues();
     const payload: Record<string, any> = {
       ...ship,
@@ -293,7 +296,9 @@ const [Modal, modalApi] = useVbenModal({
               <span class="receiver-view__label">地址</span>
               <span class="receiver-view__value">{{ fullAddressText }}</span>
             </div>
-            <p class="receiver-view__hint">点击此处可修改收件信息</p>
+            <p class="receiver-view__hint">
+              地址可选；无修改则只发货。手机号必填，点击可修改
+            </p>
           </template>
         </div>
         <div v-show="receiverEditing" class="receiver-edit">
@@ -315,79 +320,92 @@ const [Modal, modalApi] = useVbenModal({
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
-  min-height: 420px;
   height: 100%;
+  min-height: 420px;
 }
+
 .ship-pane {
   display: flex;
   flex-direction: column;
   min-height: 0;
   padding: 16px;
-  border-radius: 10px;
-  border: 1px solid hsl(var(--border));
   background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--border));
+  border-radius: 10px;
   box-shadow: 0 0 6px hsl(var(--primary) / 10%);
 }
+
 .ship-pane--receiver {
   border-color: hsl(var(--primary) / 28%);
   box-shadow: 0 0 8px hsl(var(--primary) / 14%);
 }
+
 .ship-pane__head {
   display: flex;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
   margin-bottom: 12px;
 }
+
 .ship-pane__title {
   margin: 0;
   font-size: 15px;
   font-weight: 600;
   color: hsl(var(--foreground));
 }
+
 .ship-pane__actions {
   display: flex;
-  align-items: center;
-  gap: 4px;
   flex-shrink: 0;
+  gap: 4px;
+  align-items: center;
 }
+
 .receiver-view {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: 14px;
   padding: 8px 4px;
   cursor: pointer;
-  border-radius: 8px;
   outline: none;
+  border-radius: 8px;
   transition: background 0.15s ease;
 }
+
 .receiver-view.is-loading {
-  cursor: wait;
   pointer-events: none;
+  cursor: wait;
 }
+
 .receiver-view:hover,
 .receiver-view:focus-visible {
-  background: hsl(var(--primary) / 0.06);
+  background: hsl(var(--primary) / 6%);
 }
+
 .receiver-view__row {
   display: flex;
-  align-items: baseline;
   gap: 12px;
+  align-items: baseline;
 }
+
 .receiver-view__row--block {
   flex-direction: column;
   gap: 6px;
 }
+
 .receiver-view__label {
   flex-shrink: 0;
   width: 52px;
   font-size: 13px;
   color: hsl(var(--muted-foreground));
 }
+
 .receiver-view__row--block .receiver-view__label {
   width: auto;
 }
+
 .receiver-view__value {
   flex: 1;
   font-size: 15px;
@@ -395,25 +413,29 @@ const [Modal, modalApi] = useVbenModal({
   color: hsl(var(--foreground));
   word-break: break-all;
 }
+
 .receiver-view__hint {
   margin: auto 0 0;
   font-size: 12px;
   color: hsl(var(--muted-foreground));
 }
+
 .receiver-edit {
   flex: 1;
   min-height: 0;
   overflow: auto;
 }
+
 .receiver-loading {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   min-height: 120px;
   font-size: 13px;
   color: hsl(var(--muted-foreground));
 }
+
 @media (max-width: 768px) {
   .ship-layout {
     grid-template-columns: 1fr;
diff --git a/apps/web-antd/src/views/system/delivery-warehouse-order/config/form.ts b/apps/web-antd/src/views/system/delivery-warehouse-order/config/form.ts
index 309945e8..93f342cc 100644
--- a/apps/web-antd/src/views/system/delivery-warehouse-order/config/form.ts
+++ b/apps/web-antd/src/views/system/delivery-warehouse-order/config/form.ts
@@ -12,19 +12,19 @@ export const receiverFormProps: VbenFormProps = {
   wrapperClass: 'grid-cols-12',
   schema: [
     {
+      // 收件人可选：无地址/无姓名仍可发货，仅手机号必填
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入收件人',
+        placeholder: '选填，可不填',
         maxlength: 50,
       },
       fieldName: 'express_name',
       label: '收件人',
-      rules: 'required',
     },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入收件手机号',
+        placeholder: '请输入收件手机号（必填）',
         maxlength: 11,
       },
       fieldName: 'express_mobile',
@@ -34,23 +34,23 @@ export const receiverFormProps: VbenFormProps = {
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '省市区，可与详细地址合并填写',
+        placeholder: '选填，省市区可与详细地址合并',
         maxlength: 100,
       },
       fieldName: 'express_region',
       label: '所在地区',
     },
     {
+      // 详细地址可选：未填或未修改时只做发货，不拦单
       component: 'Textarea',
       componentProps: {
-        placeholder: '请输入详细地址',
+        placeholder: '选填，可不填；未修改则按原信息发货',
         rows: 3,
         maxlength: 255,
         showCount: true,
       },
       fieldName: 'express_address',
       label: '详细地址',
-      rules: 'required',
     },
   ],
   showDefaultActions: false,
diff --git a/apps/web-antd/src/views/system/file-gallery/components/file-detail-drawer.vue b/apps/web-antd/src/views/system/file-gallery/components/file-detail-drawer.vue
index 58b95604..8fa4e2e5 100644
--- a/apps/web-antd/src/views/system/file-gallery/components/file-detail-drawer.vue
+++ b/apps/web-antd/src/views/system/file-gallery/components/file-detail-drawer.vue
@@ -1,15 +1,21 @@
 <script lang="ts" setup>
+/**
+ * 素材详情抽屉：预览 + 基础信息 + 扫描得到的引用位置
+ */
 import { ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { Button, Descriptions, Image, Spin } from 'ant-design-vue';
+import { Button, Descriptions, Empty, Image, Spin, Tag } from 'ant-design-vue';
 
+import type {
+  FileGalleryDetail,
+  FileGalleryRefLoc,
+} from '#/api/core/file-gallery';
+import { getFileGalleryDetail } from '#/api/core/file-gallery';
 import FilePreviewModal from '#/components/file-preview/FilePreviewModal.vue';
 import MIcon from '#/components/icon/icon.vue';
 import { XgVideoPlayer } from '#/components/video-player';
-import type { FileGalleryDetail } from '#/api/core/file-gallery';
-import { getFileGalleryDetail } from '#/api/core/file-gallery';
 import {
   resolveGalleryItemIcon,
   shouldShowImageThumb,
@@ -32,7 +38,7 @@ function showImagePreview(item: FileGalleryDetail) {
 }
 
 const [Drawer, drawerApi] = useVbenDrawer({
-  class: 'w-[520px]',
+  class: 'w-[560px]',
   showConfirmButton: false,
   showCancelButton: false,
   destroyOnClose: true,
@@ -79,7 +85,10 @@ async function loadDetail() {
   loading.value = true;
   try {
     const res = await getFileGalleryDetail(data.id);
-    detail.value = ((res as any)?.data ?? res) as FileGalleryDetail;
+    // xk-api jok：业务数据在 result
+    detail.value = ((res as any)?.result ??
+      (res as any)?.data ??
+      res) as FileGalleryDetail;
   } finally {
     loading.value = false;
   }
@@ -92,7 +101,11 @@ defineExpose({
 
 <template>
   <Drawer title="文件详情">
-    <FilePreviewModal v-model:open="previewOpen" :files="previewFiles" title="素材预览" />
+    <FilePreviewModal
+      v-model:open="previewOpen"
+      :files="previewFiles"
+      title="素材预览"
+    />
     <Spin :spinning="loading">
       <template v-if="detail">
         <div class="preview-wrap">
@@ -122,26 +135,84 @@ defineExpose({
           </div>
           <div v-else class="fallback-preview">
             <MIcon :icon="detailIcon(detail)" size="48" />
-            <a :href="detail.url" target="_blank" rel="noopener noreferrer">下载/打开文件</a>
+            <a :href="detail.url" target="_blank" rel="noopener noreferrer">
+              下载/打开文件
+            </a>
           </div>
         </div>
         <Descriptions bordered :column="1" size="small" class="mt-4">
-          <Descriptions.Item label="文件名">{{ detail.file_name || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="文件名">
+            {{ detail.file_name || '-' }}
+          </Descriptions.Item>
           <Descriptions.Item label="分类">
             <span class="type-row">
               <MIcon :icon="detailIcon(detail)" size="14" />
               {{ detail.type_text || '-' }}
             </span>
           </Descriptions.Item>
-          <Descriptions.Item label="大小">{{ detail.file_size_text || '-' }}</Descriptions.Item>
-          <Descriptions.Item label="来源">{{ detail.source_text || detail.source }}</Descriptions.Item>
-          <Descriptions.Item label="上传时间">{{ detail.created_at || '-' }}</Descriptions.Item>
-          <Descriptions.Item label="原始名">{{ detail.original_name || '-' }}</Descriptions.Item>
-          <Descriptions.Item label="OSS路径">{{ detail.object_key || '-' }}</Descriptions.Item>
+          <Descriptions.Item label="大小">
+            {{ detail.file_size_text || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="来源">
+            {{ detail.source_text || detail.source }}
+          </Descriptions.Item>
+          <Descriptions.Item label="引用次数">
+            {{ detail.ref_count ?? 0 }}
+          </Descriptions.Item>
+          <Descriptions.Item label="上传时间">
+            {{ detail.created_at || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="原始名">
+            {{ detail.original_name || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="OSS路径">
+            {{ detail.object_key || '-' }}
+          </Descriptions.Item>
           <Descriptions.Item label="访问地址">
-            <a :href="detail.url" target="_blank" rel="noopener noreferrer">{{ detail.url }}</a>
+            <a :href="detail.url" target="_blank" rel="noopener noreferrer">
+              {{ detail.url }}
+            </a>
           </Descriptions.Item>
         </Descriptions>
+
+        <div class="ref-section">
+          <div class="ref-title">引用位置</div>
+          <div class="ref-hint">
+            来自最近一次「扫描引用」；重新扫描后更新。仅记录到表/字段级。
+          </div>
+          <Empty
+            v-if="!(detail.ref_locs && detail.ref_locs.length)"
+            :description="
+              (detail.ref_count || 0) > 0
+                ? '有引用次数但无位置明细，请重新扫描一次'
+                : '暂无业务引用（或尚未扫描）'
+            "
+            :image-style="{ height: '48px' }"
+          />
+          <div v-else class="ref-list">
+            <div
+              v-for="(loc, idx) in detail.ref_locs as FileGalleryRefLoc[]"
+              :key="`${loc.label}-${idx}`"
+              class="ref-row"
+            >
+              <Tag :color="loc.connection === 'old_mysql' ? 'orange' : 'blue'">
+                {{ loc.connection_text || '新库' }}
+              </Tag>
+              <div class="ref-main">
+                <div class="ref-label" :title="loc.label">
+                  <template v-if="loc.table_comment || loc.column_comment">
+                    {{ loc.table_comment || loc.table }}
+                    ·
+                    {{ loc.column_comment || loc.column }}
+                  </template>
+                  <template v-else>{{ loc.label }}</template>
+                </div>
+                <div class="ref-code">{{ loc.table }}.{{ loc.column }}</div>
+              </div>
+              <span class="ref-count">×{{ loc.count || 0 }}</span>
+            </div>
+          </div>
+        </div>
       </template>
     </Spin>
   </Drawer>
@@ -157,8 +228,8 @@ defineExpose({
 .media-player {
   width: 100%;
   max-width: 100%;
-  border-radius: 8px;
   background: #000;
+  border-radius: 8px;
 }
 
 .media-player.audio {
@@ -169,14 +240,14 @@ defineExpose({
 .fallback-preview {
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 12px;
-  padding: 24px;
+  align-items: center;
   width: 100%;
-  border-radius: 8px;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.25);
+  padding: 24px;
   color: hsl(var(--foreground));
+  background: hsl(var(--muted) / 25%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
 }
 
 .btn-row {
@@ -186,8 +257,79 @@ defineExpose({
 
 .type-row {
   display: inline-flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
   color: hsl(var(--foreground));
 }
+
+.ref-section {
+  margin-top: 16px;
+}
+
+.ref-title {
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.ref-hint {
+  margin-bottom: 10px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: hsl(var(--muted-foreground));
+}
+
+.ref-list {
+  max-height: 280px;
+  padding: 8px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  background: hsl(var(--muted) / 20%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.ref-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 8px 4px;
+  border-bottom: 1px solid hsl(var(--border) / 50%);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.ref-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.ref-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  line-height: 1.4;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.ref-code {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+}
+
+.ref-count {
+  flex-shrink: 0;
+  padding-top: 2px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
 </style>
diff --git a/apps/web-antd/src/views/system/file-gallery/components/folder-sidebar.vue b/apps/web-antd/src/views/system/file-gallery/components/folder-sidebar.vue
index db9be598..22be19ea 100644
--- a/apps/web-antd/src/views/system/file-gallery/components/folder-sidebar.vue
+++ b/apps/web-antd/src/views/system/file-gallery/components/folder-sidebar.vue
@@ -291,7 +291,10 @@ onMounted(() => {
   flex-shrink: 0;
   flex-direction: column;
   width: 228px;
-  max-height: calc(100vh - 240px);
+
+  /* 高度跟父级 gallery-shell（视口剩余）走，列表区内部滚动 */
+  height: 100%;
+  max-height: 100%;
   padding: 12px;
   overflow: hidden;
   background: hsl(var(--card, var(--background)));
diff --git a/apps/web-antd/src/views/system/file-gallery/index.vue b/apps/web-antd/src/views/system/file-gallery/index.vue
index ec39f144..9f35a32a 100644
--- a/apps/web-antd/src/views/system/file-gallery/index.vue
+++ b/apps/web-antd/src/views/system/file-gallery/index.vue
@@ -2,6 +2,7 @@
 import type {
   FileGalleryItem,
   FileGalleryStats,
+  FileRefScanTableItem,
 } from '#/api/core/file-gallery';
 import type { ContextMenuItem } from '#/components/context-menu';
 import type { FileGallerySidebarTab } from '#/composables/use-file-gallery-filter';
@@ -15,16 +16,18 @@ import { ref, watch } from 'vue';
 import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
   DeleteOutlined,
   EditOutlined,
   EyeOutlined,
   FolderAddOutlined,
   FolderOutlined,
+  LoadingOutlined,
   QrcodeOutlined,
 } from '@ant-design/icons-vue';
 import {
   Button,
-  Card,
   Checkbox,
   Empty,
   Input,
@@ -34,10 +37,11 @@ import {
   Pagination,
   Progress,
   Radio,
+  Segmented,
   Select,
   Spin,
-  Switch,
   Tabs,
+  Tag,
 } from 'ant-design-vue';
 
 import {
@@ -50,11 +54,13 @@ import {
   markFileQrcode,
   moveFileGalleryType,
   planFileGalleryOssSync,
+  planFileGalleryScanRefs,
   renameFileGalleryItem,
   scanFileGalleryRefs,
   syncFileGalleryFromOss,
 } from '#/api/core/file-gallery';
 import { showContextMenu } from '#/components/context-menu';
+import { GlassCard } from '#/components/glass-card';
 import MIcon from '#/components/icon/icon.vue';
 import { useFileGalleryFilter } from '#/composables/use-file-gallery-filter';
 import { useFileGroupCache } from '#/composables/use-file-group-cache';
@@ -72,6 +78,8 @@ type SelectMode = '' | 'delete' | 'move';
 
 /** OSS 同步断点：刷新/中断后可从日期组 + marker 继续 */
 const SYNC_CHECKPOINT_KEY = 'file-gallery-oss-sync-checkpoint';
+/** 引用扫描断点：存 job_id，服务端 Cache 保留任务态 */
+const SCAN_CHECKPOINT_KEY = 'file-gallery-ref-scan-checkpoint';
 
 interface OssSyncCheckpoint {
   mode: 'incremental' | 'full';
@@ -87,17 +95,74 @@ interface OssSyncCheckpoint {
   updatedAt: number;
 }
 
+/** 引用扫描断点：job_id + 表计划快照，中断后可继续 */
+interface RefScanCheckpoint {
+  job_id: string;
+  batch_size: number;
+  phase: string;
+  progress: number;
+  processed: number;
+  total: number;
+  plan_tables: FileRefScanTableItem[];
+  current_table: string;
+  updatedAt: number;
+}
+
 const loading = ref(false);
 const archiving = ref(false);
 const syncing = ref(false);
 const scanning = ref(false);
+/** 引用扫描弹窗 */
+const scanOpen = ref(false);
+/** 扫完后为 true：弹窗不自动关，确定按钮变成「关闭」方便看结果 */
+const scanFinished = ref(false);
+/** 扫完摘要文案（留在弹窗内，避免只靠 toast） */
+const scanResultSummary = ref('');
+/** 有断点时：resume=继续 / fresh=重新开始 */
+const scanStartMode = ref<'resume' | 'fresh'>('fresh');
+const scanCheckpoint = ref<RefScanCheckpoint | null>(null);
+const scanBatchSize = ref(15);
+const scanProgress = ref({
+  percent: 0,
+  phase: '',
+  processed: 0,
+  total: 0,
+  currentTable: '',
+  tableCount: 0,
+  doneCount: 0,
+  scanningCount: 0,
+  pendingCount: 0,
+  /** 已抽出的命中 key 数（含完整路径 + bn:文件名） */
+  hitKeyCount: 0,
+  /** 有抽出内容的单元格次数 */
+  hitCellCount: 0,
+  /** 累计耗时毫秒 */
+  elapsedMs: 0,
+});
+/** 本批正在检查的列/文件（弹窗右侧实时列表） */
+type ScanCheckingItem = {
+  kind?: string;
+  label?: string;
+  extra?: string;
+  ref_count?: number | null;
+  object_key?: string;
+  id?: number;
+};
+const checkingList = ref<ScanCheckingItem[]>([]);
+/** 将扫/已扫表计划（含 pending|scanning|done） */
+const planTables = ref<FileRefScanTableItem[]>([]);
+const planLoading = ref(false);
+const planColumnTotal = ref(0);
 const renameOpen = ref(false);
 const renameValue = ref('');
 const renameTarget = ref<FileGalleryItem | null>(null);
 /** OSS 同步：模态框配置模式/每批条数，前端按日期组自动连续拉取 */
 const syncOpen = ref(false);
-const syncMode = ref<'incremental' | 'full'>('incremental');
+/** 默认全量；增量依赖后端落库的上次同步日期 */
+const syncMode = ref<'incremental' | 'full'>('full');
 const syncBatchSize = ref(200);
+/** 后端已保存的上次同步日期 YYYYMMDD，弹窗提示用 */
+const lastOssSyncDate = ref('');
 /** 有断点时：resume=继续 / fresh=重新开始 */
 const syncStartMode = ref<'resume' | 'fresh'>('fresh');
 const syncCheckpoint = ref<OssSyncCheckpoint | null>(null);
@@ -129,7 +194,7 @@ const {
   activeFolderId,
   sidebarTab,
   keyword,
-  unrefOnly,
+  refFilter,
   tabs,
   groupTabs,
   groupOptions,
@@ -137,12 +202,19 @@ const {
   setActiveGroupId,
   setActiveFolderId,
   setSidebarTab,
-  setUnrefOnly,
+  setRefFilter,
   buildListParams,
   fileTypes,
   typesLoading,
 } = useFileGalleryFilter('file-management-active-type');
 
+/** 引用筛选 Segmented 选项 */
+const REF_FILTER_OPTIONS = [
+  { label: '全部', value: 'all' },
+  { label: '有引用', value: 'referenced' },
+  { label: '未引用', value: 'unreferenced' },
+];
+
 const { loadGroupOptions: refreshGroupOptionsForMenu } = useFileGroupCache();
 
 const [DetailDrawer, detailDrawerApi] = useVbenDrawer({
@@ -158,6 +230,7 @@ function unwrap(res: any) {
 async function loadStats() {
   const res = await getFileGalleryStats();
   stats.value = unwrap(res) as FileGalleryStats;
+  lastOssSyncDate.value = String(stats.value?.oss_last_sync_date || '');
 }
 
 async function load() {
@@ -239,7 +312,7 @@ function openSyncModal() {
     };
   } else {
     syncStartMode.value = 'fresh';
-    syncMode.value = 'incremental';
+    syncMode.value = 'full';
     syncBatchSize.value = 200;
     syncProgress.value = {
       batches: 0,
@@ -253,11 +326,28 @@ function openSyncModal() {
       percent: 0,
     };
   }
+  // 上次同步日期已在 loadStats 写入 lastOssSyncDate
   syncOpen.value = true;
 }
 
+/** 从日期前缀列表取最大 YYYYMMDD，finalize 时落库为下次增量起点 */
+function maxUploadDateFromPrefixes(prefixes: string[]): string {
+  let max = '';
+  for (const prefix of prefixes) {
+    const m = String(prefix).match(/xk_upload_(\d{8})/);
+    if (m?.[1] && m[1] > max) {
+      max = m[1];
+    }
+  }
+  return max;
+}
+
 /** 计算进度：按日期组推进，组内批次数作轻微细分 */
-function calcSyncPercent(groupIndex: number, groupTotal: number, groupDone: boolean) {
+function calcSyncPercent(
+  groupIndex: number,
+  groupTotal: number,
+  groupDone: boolean,
+) {
   if (groupTotal <= 0) {
     return groupDone ? 100 : 0;
   }
@@ -356,10 +446,20 @@ async function runOssSyncGroups(
     }
   }
 
-  const finalRes = await syncFileGalleryFromOss({ finalize: 1 });
-  const finalData = unwrap(finalRes) as { folder_created?: number };
+  const lastSyncDate = maxUploadDateFromPrefixes(prefixes);
+  const finalRes = await syncFileGalleryFromOss({
+    finalize: 1,
+    last_sync_date: lastSyncDate || undefined,
+  });
+  const finalData = unwrap(finalRes) as {
+    folder_created?: number;
+    last_sync_date?: string;
+  };
   syncProgress.value.folderCreated = finalData?.folder_created ?? 0;
   syncProgress.value.percent = 100;
+  if (finalData?.last_sync_date) {
+    lastOssSyncDate.value = finalData.last_sync_date;
+  }
   clearSyncCheckpoint();
 }
 
@@ -473,16 +573,376 @@ async function handleArchive() {
   }
 }
 
-/** 扫描业务表引用，刷新未引用/可回收统计 */
-async function handleScanRefs() {
-  scanning.value = true;
+function loadScanCheckpoint(): RefScanCheckpoint | null {
   try {
-    const res = await scanFileGalleryRefs();
-    const data = unwrap(res);
-    message.success(
-      `扫描完成：新库 ${data?.mysql_columns ?? 0} 列（失败 ${data?.mysql_failed ?? 0}），老库 ${data?.old_mysql_columns ?? 0} 列（失败 ${data?.old_mysql_failed ?? 0}）；文件 ${data?.scanned_files ?? 0}，有引用 ${data?.referenced ?? 0}，未引用 ${data?.unreferenced ?? 0}`,
+    const raw = localStorage.getItem(SCAN_CHECKPOINT_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as RefScanCheckpoint;
+    if (!parsed?.job_id) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+function saveScanCheckpoint(checkpoint: RefScanCheckpoint) {
+  localStorage.setItem(SCAN_CHECKPOINT_KEY, JSON.stringify(checkpoint));
+  scanCheckpoint.value = checkpoint;
+}
+
+function clearScanCheckpoint() {
+  localStorage.removeItem(SCAN_CHECKPOINT_KEY);
+  scanCheckpoint.value = null;
+}
+
+/** 库连接文案：mysql=新库，old_mysql=老库 */
+function scanConnLabel(connection: string) {
+  return connection === 'old_mysql' ? '老库' : '新库';
+}
+
+/** 表状态文案 */
+function scanStatusLabel(status?: string) {
+  if (status === 'done') return '已完成';
+  if (status === 'scanning') return '扫描中';
+  return '未开始';
+}
+
+/** 从 plan_tables 汇总三态数量 */
+function summarizePlanTables(tables: FileRefScanTableItem[]) {
+  let doneCount = 0;
+  let scanningCount = 0;
+  let pendingCount = 0;
+  for (const row of tables) {
+    if (row.status === 'done') doneCount++;
+    else if (row.status === 'scanning') scanningCount++;
+    else pendingCount++;
+  }
+  return { doneCount, scanningCount, pendingCount };
+}
+
+/** 应用一批扫描结果到弹窗进度与表列表 */
+function applyScanPlanUpdate(data: {
+  progress?: number;
+  phase?: string;
+  processed?: number;
+  total?: number;
+  current_table?: string;
+  table_count?: number;
+  plan_tables?: FileRefScanTableItem[];
+  done_table_count?: number;
+  scanning_table_count?: number;
+  pending_table_count?: number;
+}) {
+  const tables = Array.isArray(data?.plan_tables) ? data.plan_tables : [];
+  if (tables.length) {
+    planTables.value = tables;
+  }
+  const summary = summarizePlanTables(planTables.value);
+  scanProgress.value = {
+    percent: Math.min(100, Number(data?.progress ?? 0)),
+    phase: String(data?.phase || ''),
+    processed: Number(data?.processed ?? 0),
+    total: Number(data?.total ?? 0),
+    currentTable: String(data?.current_table || ''),
+    tableCount: Number(data?.table_count ?? planTables.value.length),
+    doneCount: Number(data?.done_table_count ?? summary.doneCount),
+    scanningCount: Number(data?.scanning_table_count ?? summary.scanningCount),
+    pendingCount: Number(data?.pending_table_count ?? summary.pendingCount),
+    hitKeyCount: Number((data as any)?.hit_key_count ?? 0),
+    hitCellCount: Number((data as any)?.hit_cell_count ?? 0),
+    elapsedMs: Number((data as any)?.elapsed_ms ?? 0),
+  };
+  // 右侧「当前检查」列表：每批整表替换，避免无限堆积
+  const list = (data as any)?.checking_list;
+  if (Array.isArray(list)) {
+    checkingList.value = list as ScanCheckingItem[];
+  }
+}
+
+/** 打开弹窗时拉取「将扫表」预览（全部未开始） */
+async function loadScanPlanPreview() {
+  planLoading.value = true;
+  try {
+    const res = await planFileGalleryScanRefs();
+    const data = unwrap(res) as {
+      plan_tables?: FileRefScanTableItem[];
+      table_count?: number;
+      column_total?: number;
+    };
+    const tables = (
+      Array.isArray(data?.plan_tables) ? data.plan_tables : []
+    ).map((row) => ({
+      ...row,
+      status: (row.status || 'pending') as FileRefScanTableItem['status'],
+      failed: Number(row.failed || 0),
+    }));
+    planTables.value = tables;
+    planColumnTotal.value = Number(data?.column_total ?? 0);
+    const summary = summarizePlanTables(tables);
+    scanProgress.value = {
+      ...scanProgress.value,
+      tableCount: tables.length,
+      doneCount: summary.doneCount,
+      scanningCount: summary.scanningCount,
+      pendingCount: summary.pendingCount,
+    };
+  } catch (err) {
+    console.error(err);
+    message.error('加载待扫表清单失败');
+  } finally {
+    planLoading.value = false;
+  }
+}
+
+/** 弹窗内切换「重新开始」时重新拉将扫表预览 */
+watch(scanStartMode, (mode) => {
+  if (!scanOpen.value || scanning.value) return;
+  if (mode === 'fresh') {
+    void loadScanPlanPreview();
+  } else if (mode === 'resume' && scanCheckpoint.value?.plan_tables?.length) {
+    planTables.value = [...scanCheckpoint.value.plan_tables];
+    const summary = summarizePlanTables(planTables.value);
+    scanProgress.value = {
+      ...scanProgress.value,
+      percent: scanCheckpoint.value.progress || 0,
+      phase: scanCheckpoint.value.phase || '',
+      processed: scanCheckpoint.value.processed || 0,
+      total: scanCheckpoint.value.total || 0,
+      currentTable: scanCheckpoint.value.current_table || '',
+      tableCount: planTables.value.length,
+      doneCount: summary.doneCount,
+      scanningCount: summary.scanningCount,
+      pendingCount: summary.pendingCount,
+    };
+  }
+});
+
+/** 关闭扫描弹窗并清空「已完成」态 */
+function closeScanModal() {
+  scanOpen.value = false;
+  scanFinished.value = false;
+  scanResultSummary.value = '';
+}
+
+/**
+ * 弹窗确定：扫完后点「关闭」；未扫完则开始/续扫
+ * antd Modal 在 onOk resolve 后会自动关，扫完成功时 submitScanRefs 会 reject 占位错误以保留弹窗
+ */
+async function onScanModalOk() {
+  if (scanFinished.value) {
+    closeScanModal();
+    return;
+  }
+  await submitScanRefs();
+}
+
+/** 打开扫描引用弹窗；有未完成断点时默认「继续」 */
+function openScanModal() {
+  if (scanning.value) {
+    return;
+  }
+  scanFinished.value = false;
+  scanResultSummary.value = '';
+  const checkpoint = loadScanCheckpoint();
+  scanCheckpoint.value = checkpoint;
+  if (checkpoint) {
+    scanStartMode.value = 'resume';
+    scanBatchSize.value = checkpoint.batch_size || 15;
+    planTables.value = Array.isArray(checkpoint.plan_tables)
+      ? [...checkpoint.plan_tables]
+      : [];
+    const summary = summarizePlanTables(planTables.value);
+    checkingList.value = [];
+    scanProgress.value = {
+      percent: checkpoint.progress || 0,
+      phase: checkpoint.phase || '',
+      processed: checkpoint.processed || 0,
+      total: checkpoint.total || 0,
+      currentTable: checkpoint.current_table || '',
+      tableCount: planTables.value.length,
+      doneCount: summary.doneCount,
+      scanningCount: summary.scanningCount,
+      pendingCount: summary.pendingCount,
+      hitKeyCount: 0,
+      hitCellCount: 0,
+      elapsedMs: 0,
+    };
+  } else {
+    scanStartMode.value = 'fresh';
+    scanBatchSize.value = 15;
+    planTables.value = [];
+    planColumnTotal.value = 0;
+    checkingList.value = [];
+    scanProgress.value = {
+      percent: 0,
+      phase: '',
+      processed: 0,
+      total: 0,
+      currentTable: '',
+      tableCount: 0,
+      doneCount: 0,
+      scanningCount: 0,
+      pendingCount: 0,
+      hitKeyCount: 0,
+      hitCellCount: 0,
+      elapsedMs: 0,
+    };
+    // 新开任务：先拉将扫表清单，全部标记未开始
+    void loadScanPlanPreview();
+  }
+  scanOpen.value = true;
+}
+
+/**
+ * 分批扫描业务表引用：弹窗内循环请求直到 done
+ * 每批写断点（job_id）；中断/刷新后可继续；列表展示已扫表
+ */
+async function submitScanRefs() {
+  const batchSize = Math.max(
+    1,
+    Math.min(80, Number(scanBatchSize.value) || 15),
+  );
+  scanBatchSize.value = batchSize;
+  scanning.value = true;
+
+  const resume =
+    scanStartMode.value === 'resume' && scanCheckpoint.value !== null;
+  let jobId = resume ? String(scanCheckpoint.value?.job_id || '') : '';
+
+  try {
+    if (!resume) {
+      clearScanCheckpoint();
+      // 保留预览清单；开扫后用接口 plan_tables 覆盖状态
+      if (!planTables.value.length) {
+        await loadScanPlanPreview();
+      } else {
+        planTables.value = planTables.value.map((row) => ({
+          ...row,
+          status: 'pending',
+          done_columns: 0,
+          failed: 0,
+        }));
+      }
+      checkingList.value = [];
+      scanProgress.value = {
+        percent: 0,
+        phase: '',
+        processed: 0,
+        total: 0,
+        currentTable: '',
+        tableCount: planTables.value.length,
+        doneCount: 0,
+        scanningCount: 0,
+        pendingCount: planTables.value.length,
+        hitKeyCount: 0,
+        hitCellCount: 0,
+        elapsedMs: 0,
+      };
+    }
+
+    let data: {
+      job_id?: string;
+      done?: boolean;
+      progress?: number;
+      phase?: string;
+      processed?: number;
+      total?: number;
+      current_table?: string;
+      table_count?: number;
+      plan_tables?: FileRefScanTableItem[];
+      done_table_count?: number;
+      scanning_table_count?: number;
+      pending_table_count?: number;
+      mysql_columns?: number;
+      mysql_failed?: number;
+      old_mysql_columns?: number;
+      old_mysql_failed?: number;
+      scanned_files?: number;
+      referenced?: number;
+      unreferenced?: number;
+      hit_key_count?: number;
+      hit_cell_count?: number;
+      elapsed_ms?: number;
+    } | null = null;
+
+    for (let i = 0; i < 5000; i++) {
+      const res = await scanFileGalleryRefs({
+        job_id: jobId || undefined,
+        batch_size: batchSize,
+      });
+      data = unwrap(res);
+      jobId = String(data?.job_id || '');
+      if (!jobId) {
+        message.error('扫描任务创建失败');
+        throw new Error('scan_job_create_failed');
+      }
+
+      applyScanPlanUpdate(data || {});
+
+      if (data?.done) {
+        // 收尾：全部标为完成
+        planTables.value = planTables.value.map((row) => ({
+          ...row,
+          status: 'done',
+          done_columns: row.total_columns ?? row.columns,
+        }));
+        clearScanCheckpoint();
+        break;
+      }
+
+      // 进行中：落断点，刷新/中断后可继续
+      saveScanCheckpoint({
+        job_id: jobId,
+        batch_size: batchSize,
+        phase: String(data?.phase || ''),
+        progress: Number(data?.progress ?? 0),
+        processed: Number(data?.processed ?? 0),
+        total: Number(data?.total ?? 0),
+        plan_tables: planTables.value,
+        current_table: String(data?.current_table || ''),
+        updatedAt: Date.now(),
+      });
+    }
+
+    if (!data?.done) {
+      scanCheckpoint.value = loadScanCheckpoint();
+      message.error('扫描未完成，进度已保存，可选择「继续断点」');
+      // 抛错阻止 Modal 自动关闭，方便接着看已扫表 / 续扫
+      throw new Error('scan_incomplete');
+    }
+
+    const elapsedSec = Math.max(
+      0,
+      Math.round(Number(data?.elapsed_ms ?? 0) / 1000),
     );
-    await reloadAll();
+    const summaryText = `扫描完成：共 ${data?.table_count ?? planTables.value.length} 张表；新库 ${data?.mysql_columns ?? 0} 列（失败 ${data?.mysql_failed ?? 0}），老库 ${data?.old_mysql_columns ?? 0} 列（失败 ${data?.old_mysql_failed ?? 0}）；命中单元格 ${data?.hit_cell_count ?? 0}、命中键 ${data?.hit_key_count ?? 0}；文件 ${data?.scanned_files ?? 0}，有引用 ${data?.referenced ?? 0}，未引用 ${data?.unreferenced ?? 0}；耗时 ${elapsedSec}s`;
+    scanResultSummary.value = summaryText;
+    scanFinished.value = true;
+    message.success('扫描完成，可在弹窗内查看结果');
+    // 后台刷新列表/统计，弹窗留着让用户看左右明细
+    void reloadAll();
+    // 阻止 antd Modal 在 onOk resolve 后自动关闭
+    throw new Error('scan_done_keep_open');
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err || '');
+    // 扫完留窗：不当错误处理
+    if (msg === 'scan_done_keep_open') {
+      return;
+    }
+    console.error(err);
+    scanCheckpoint.value = loadScanCheckpoint();
+    // 任务过期时清掉无效断点，避免反复 resume 失败
+    if (msg === 'scan_incomplete') {
+      throw err;
+    }
+    if (msg.includes('过期') || msg.includes('不存在')) {
+      clearScanCheckpoint();
+      scanStartMode.value = 'fresh';
+      message.error('扫描断点已过期，请重新开始');
+    } else {
+      message.error('扫描中断，进度已保存，可选择「继续断点」');
+    }
+    throw err;
   } finally {
     scanning.value = false;
   }
@@ -734,8 +1194,14 @@ function onSearch(value: string) {
   }, 300);
 }
 
-function onUnrefChange(checked: boolean) {
-  setUnrefOnly(checked);
+/** 切换全部 / 有引用 / 未引用 */
+function onRefFilterChange(value: string | number) {
+  const v = String(value);
+  if (v === 'referenced' || v === 'unreferenced' || v === 'all') {
+    setRefFilter(v);
+  } else {
+    setRefFilter('all');
+  }
   page.value = 1;
   void load();
 }
@@ -773,184 +1239,486 @@ watch(typesLoading, (val) => {
 
 <template>
   <Page auto-content-height title="文件管理">
-    <div class="stats-row">
-      <div class="stat-card">
-        <div class="stat-label">素材总数</div>
-        <div class="stat-value">{{ stats?.total_count ?? '-' }}</div>
+    <!-- 整页纵向 flex：主区高度锁在视口剩余空间，卡片列表内部滚动 -->
+    <div class="file-gallery-page">
+      <!-- 顶部统计：统一 GlassCard，边框微光强调，不用左侧色条 -->
+      <div class="stats-row">
+        <GlassCard
+          title="素材总数"
+          icon="lucide:files"
+          padding="sm"
+          :specular="false"
+        >
+          <div class="stat-value">{{ stats?.total_count ?? '-' }}</div>
+        </GlassCard>
+        <GlassCard
+          title="占用容量"
+          icon="lucide:hard-drive"
+          padding="sm"
+          :specular="false"
+        >
+          <div class="stat-value">{{ stats?.total_size_text ?? '-' }}</div>
+        </GlassCard>
+        <GlassCard
+          title="未引用数量"
+          icon="lucide:unlink"
+          padding="sm"
+          :specular="false"
+        >
+          <div class="stat-value">{{ stats?.unref_count ?? '-' }}</div>
+          <div v-if="stats && !stats.has_scanned" class="stat-hint">
+            尚未扫描
+          </div>
+        </GlassCard>
+        <GlassCard
+          title="可回收容量"
+          icon="lucide:recycle"
+          padding="sm"
+          :specular="false"
+        >
+          <div class="stat-value">{{ stats?.recyclable_size_text ?? '-' }}</div>
+          <div v-if="stats && !stats.has_scanned" class="stat-hint">
+            尚未扫描
+          </div>
+        </GlassCard>
       </div>
-      <div class="stat-card">
-        <div class="stat-label">占用容量</div>
-        <div class="stat-value">{{ stats?.total_size_text ?? '-' }}</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">未引用数量</div>
-        <div class="stat-value">{{ stats?.unref_count ?? '-' }}</div>
-        <div v-if="stats && !stats.has_scanned" class="stat-hint">尚未扫描</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">可回收容量</div>
-        <div class="stat-value">{{ stats?.recyclable_size_text ?? '-' }}</div>
-        <div v-if="stats && !stats.has_scanned" class="stat-hint">尚未扫描</div>
-      </div>
-    </div>
 
-    <div class="gallery-shell">
-      <FolderSidebar
-        :group-tabs="groupTabs"
-        :sidebar-tab="sidebarTab"
-        :active-group-id="activeGroupId"
-        :active-folder-id="activeFolderId"
-        @update:sidebar-tab="onSidebarTabChange"
-        @select-group="onGroupSelect"
-        @select-folder="onFolderSelect"
-      />
+      <div class="gallery-shell">
+        <FolderSidebar
+          class="gallery-sidebar"
+          :group-tabs="groupTabs"
+          :sidebar-tab="sidebarTab"
+          :active-group-id="activeGroupId"
+          :active-folder-id="activeFolderId"
+          @update:sidebar-tab="onSidebarTabChange"
+          @select-group="onGroupSelect"
+          @select-folder="onFolderSelect"
+        />
 
-      <Card class="gallery-main">
-        <Tabs :active-key="String(activeType)" @change="onTabChange">
-          <Tabs.TabPane v-for="tab in tabs" :key="String(tab.value)">
-            <template #tab>
-              <span class="tab-label">
-                <MIcon v-if="tab.icon" :icon="tab.icon" size="14" />
-                {{ tab.label }}
-              </span>
-            </template>
-          </Tabs.TabPane>
-        </Tabs>
+        <!-- 右侧主区：Tabs/工具栏固定，卡片网格限高滚动 -->
+        <GlassCard class="gallery-main" padding="lg" :specular="false">
+          <div class="gallery-main-inner">
+            <Tabs :active-key="String(activeType)" @change="onTabChange">
+              <Tabs.TabPane v-for="tab in tabs" :key="String(tab.value)">
+                <template #tab>
+                  <span class="tab-label">
+                    <MIcon v-if="tab.icon" :icon="tab.icon" size="14" />
+                    {{ tab.label }}
+                  </span>
+                </template>
+              </Tabs.TabPane>
+            </Tabs>
 
-        <div v-if="selectMode" class="toolbar select-bar">
-          <span class="select-count">已选 {{ selectedIds.length }} 项</span>
-          <Button @click="selectCurrentPage">选择本页</Button>
-          <Button @click="exitSelectMode">取消</Button>
-          <Button
-            v-if="selectMode === 'delete'"
-            danger
-            type="primary"
-            @click="confirmBatchDelete"
-          >
-            确认删除
-          </Button>
-          <Button v-else type="primary" @click="openMoveModal">确认移动</Button>
-        </div>
-        <div v-else class="toolbar">
-          <Input.Search
-            v-model:value="keyword"
-            allow-clear
-            placeholder="按文件名搜索"
-            style="width: 240px"
-            @search="onSearch"
-            @change="(e) => onSearch(e.target.value ?? '')"
-          />
-          <span class="unref-switch">
-            只看无引用
-            <Switch
-              :checked="unrefOnly"
-              size="small"
-              @change="(v) => onUnrefChange(v === true)"
-            />
-          </span>
-          <Button :loading="scanning" @click="handleScanRefs">扫描引用</Button>
-          <Button @click="enterSelectMode('move')">
-            <FolderAddOutlined />
-            批量加入分类
-          </Button>
-          <Button danger @click="enterSelectMode('delete')">
-            <DeleteOutlined />
-            批量删除
-          </Button>
-          <Button :loading="syncing" @click="openSyncModal">从 OSS 同步</Button>
-          <Button type="primary" :loading="archiving" @click="handleArchive">
-            一键归档
-          </Button>
-          <Button :loading="loading" @click="reloadAll">刷新</Button>
-        </div>
+            <div v-if="selectMode" class="toolbar select-bar">
+              <span class="select-count">已选 {{ selectedIds.length }} 项</span>
+              <Button @click="selectCurrentPage">选择本页</Button>
+              <Button @click="exitSelectMode">取消</Button>
+              <Button
+                v-if="selectMode === 'delete'"
+                danger
+                type="primary"
+                @click="confirmBatchDelete"
+              >
+                确认删除
+              </Button>
+              <Button v-else type="primary" @click="openMoveModal"
+                >确认移动</Button
+              >
+            </div>
+            <div v-else class="toolbar">
+              <Input.Search
+                v-model:value="keyword"
+                allow-clear
+                placeholder="按文件名搜索"
+                style="width: 240px"
+                @search="onSearch"
+                @change="(e) => onSearch(e.target.value ?? '')"
+              />
+              <Segmented
+                :value="refFilter"
+                :options="REF_FILTER_OPTIONS"
+                size="small"
+                @change="onRefFilterChange"
+              />
+              <Button :loading="scanning" @click="openScanModal">
+                扫描引用
+              </Button>
+              <Button @click="enterSelectMode('move')">
+                <FolderAddOutlined />
+                批量加入分类
+              </Button>
+              <Button danger @click="enterSelectMode('delete')">
+                <DeleteOutlined />
+                批量删除
+              </Button>
+              <Button :loading="syncing" @click="openSyncModal"
+                >从 OSS 同步</Button
+              >
+              <Button
+                type="primary"
+                :loading="archiving"
+                @click="handleArchive"
+              >
+                一键归档
+              </Button>
+              <Button :loading="loading" @click="reloadAll">刷新</Button>
+            </div>
 
-        <Spin :spinning="loading">
-          <div v-if="items.length" class="gallery-grid">
-            <div
-              v-for="(item, index) in items"
-              :key="item.id"
-              class="gallery-card"
-              :class="{
-                selected: isSelected(item.id),
-                selecting: !!selectMode,
-              }"
-              :style="{ animationDelay: `${Math.min(index, 16) * 40}ms` }"
-              @click="openDetail(item)"
-              @contextmenu.prevent="onContextMenu($event, item)"
-            >
-              <div class="card-media">
-                <Checkbox
-                  v-if="selectMode"
-                  class="card-check"
-                  :checked="isSelected(item.id)"
-                  @click.stop
-                  @change="toggleSelect(item.id)"
+            <div class="gallery-scroll">
+              <Spin :spinning="loading">
+                <div v-if="items.length" class="gallery-grid">
+                  <!--
+                    素材瓦片：GlassCard clickable + active（多选勾中）
+                    错峰入场仍挂在外层 wrapper，避免覆盖 GlassCard 自身悬停上浮
+                  -->
+                  <div
+                    v-for="(item, index) in items"
+                    :key="item.id"
+                    class="gallery-tile-wrap"
+                    :class="{ selecting: !!selectMode }"
+                    :style="{ animationDelay: `${Math.min(index, 16) * 40}ms` }"
+                    @contextmenu.prevent="onContextMenu($event, item)"
+                  >
+                    <GlassCard
+                      clickable
+                      hoverable
+                      padding="sm"
+                      :specular="false"
+                      :active="isSelected(item.id)"
+                      @click="openDetail(item)"
+                    >
+                      <div class="card-media">
+                        <Checkbox
+                          v-if="selectMode"
+                          class="card-check"
+                          :checked="isSelected(item.id)"
+                          @click.stop
+                          @change="toggleSelect(item.id)"
+                        />
+                        <span v-if="item.is_qrcode" class="qr-badge"
+                          >二维码</span
+                        >
+                        <span
+                          v-if="
+                            (item.ref_count ?? 0) === 0 && stats?.has_scanned
+                          "
+                          class="unref-badge"
+                        >
+                          无引用
+                        </span>
+                        <img
+                          v-if="showImageThumb(item)"
+                          :src="item.url"
+                          alt=""
+                          class="gallery-thumb"
+                        />
+                        <div v-else class="gallery-file-icon">
+                          <MIcon :icon="itemIcon(item)" size="40" />
+                        </div>
+                        <div v-if="!selectMode" class="card-overlay">
+                          <Button size="small" @click.stop="openDetail(item)">
+                            <EyeOutlined />
+                            查看
+                          </Button>
+                          <Button
+                            size="small"
+                            danger
+                            @click.stop="handleDelete(item)"
+                          >
+                            <DeleteOutlined />
+                            删除
+                          </Button>
+                        </div>
+                      </div>
+                      <div class="gallery-meta">
+                        <div
+                          class="file-title"
+                          :title="item.file_name || item.original_name || ''"
+                        >
+                          <MIcon
+                            :icon="itemIcon(item)"
+                            size="12"
+                            class="meta-icon"
+                          />
+                          {{ item.file_name || item.original_name || '-' }}
+                        </div>
+                        <div class="file-sub">
+                          {{ item.type_text || '-' }} ·
+                          {{ item.file_size_text || '-' }}
+                        </div>
+                      </div>
+                    </GlassCard>
+                  </div>
+                </div>
+                <Empty
+                  v-else
+                  description="暂无文件，可点击「从 OSS 同步」导入"
                 />
-                <span v-if="item.is_qrcode" class="qr-badge">二维码</span>
-                <span
-                  v-if="(item.ref_count ?? 0) === 0 && stats?.has_scanned"
-                  class="unref-badge"
-                >
-                  无引用
-                </span>
-                <img
-                  v-if="showImageThumb(item)"
-                  :src="item.url"
-                  alt=""
-                  class="gallery-thumb"
-                />
-                <div v-else class="gallery-file-icon">
-                  <MIcon :icon="itemIcon(item)" size="40" />
-                </div>
-                <div v-if="!selectMode" class="card-overlay">
-                  <Button size="small" @click.stop="openDetail(item)">
-                    <EyeOutlined />
-                    查看
-                  </Button>
-                  <Button size="small" danger @click.stop="handleDelete(item)">
-                    <DeleteOutlined />
-                    删除
-                  </Button>
-                </div>
-              </div>
-              <div class="gallery-meta">
-                <div
-                  class="file-title"
-                  :title="item.file_name || item.original_name || ''"
-                >
-                  <MIcon :icon="itemIcon(item)" size="12" class="meta-icon" />
-                  {{ item.file_name || item.original_name || '-' }}
-                </div>
-                <div class="file-sub">
-                  {{ item.type_text || '-' }} · {{ item.file_size_text || '-' }}
-                </div>
-              </div>
+              </Spin>
+            </div>
+
+            <div v-if="total > 0" class="gallery-pagination">
+              <Pagination
+                :current="page"
+                :page-size="pageSize"
+                :page-size-options="pageSizeOptions"
+                :total="total"
+                show-size-changer
+                :show-total="(t) => `共 ${t} 条`"
+                @change="onPageChange"
+                @show-size-change="onShowSizeChange"
+              />
             </div>
           </div>
-          <Empty v-else description="暂无文件，可点击「从 OSS 同步」导入" />
-        </Spin>
-
-        <div v-if="total > 0" class="gallery-pagination">
-          <Pagination
-            :current="page"
-            :page-size="pageSize"
-            :page-size-options="pageSizeOptions"
-            :total="total"
-            show-size-changer
-            :show-total="(t) => `共 ${t} 条`"
-            @change="onPageChange"
-            @show-size-change="onShowSizeChange"
-          />
-        </div>
-      </Card>
+        </GlassCard>
+      </div>
     </div>
 
     <DetailDrawer />
 
+    <Modal
+      v-model:open="scanOpen"
+      title="扫描引用"
+      :ok-text="
+        scanFinished
+          ? '关闭'
+          : scanStartMode === 'resume' && scanCheckpoint
+            ? '继续断点'
+            : '开始扫描'
+      "
+      cancel-text="取消"
+      :confirm-loading="scanning"
+      :ok-button-props="{ disabled: scanning }"
+      :cancel-button-props="{ disabled: scanning }"
+      :mask-closable="!scanning"
+      :keyboard="!scanning"
+      :closable="!scanning"
+      width="960px"
+      @ok="onScanModalOk"
+      @cancel="closeScanModal"
+    >
+      <div class="scan-form">
+        <div
+          v-if="scanFinished && scanResultSummary"
+          class="scan-result-banner"
+        >
+          {{ scanResultSummary }}
+        </div>
+
+        <div v-if="scanCheckpoint && !scanFinished" class="sync-checkpoint">
+          <div class="sync-label">检测到未完成扫描</div>
+          <Radio.Group v-model:value="scanStartMode" :disabled="scanning">
+            <Radio value="resume">继续断点</Radio>
+            <Radio value="fresh">重新开始</Radio>
+          </Radio.Group>
+          <div class="sync-hint">
+            断点进度 {{ scanCheckpoint.progress }}%
+            <template v-if="scanCheckpoint.phase">
+              · 阶段
+              {{ scanCheckpoint.phase === 'apply' ? '回写引用' : '扫表' }}
+            </template>
+            · 计划 {{ scanCheckpoint.plan_tables?.length || 0 }} 张表
+            <template v-if="scanCheckpoint.current_table">
+              · 上次停在 {{ scanCheckpoint.current_table }}
+            </template>
+          </div>
+        </div>
+
+        <div class="sync-label">每批列数</div>
+        <InputNumber
+          v-model:value="scanBatchSize"
+          :min="1"
+          :max="80"
+          :disabled="
+            scanning ||
+            scanFinished ||
+            (scanStartMode === 'resume' && !!scanCheckpoint)
+          "
+          class="sync-batch-input"
+          placeholder="默认 15"
+        />
+        <div class="sync-hint">
+          左侧为待扫表；右侧为本批正在检查的列/文件。扫描结束后弹窗不会自动关闭，可对照结果后点「关闭」。
+        </div>
+
+        <div
+          v-if="scanning || scanProgress.percent > 0 || scanFinished"
+          class="sync-progress"
+        >
+          <Progress
+            :percent="scanProgress.percent"
+            :status="scanning ? 'active' : 'success'"
+            size="small"
+          />
+          <div class="sync-progress-text">
+            <template v-if="scanProgress.phase === 'apply'">
+              回写文件引用
+              {{ scanProgress.processed }}/{{ scanProgress.total }}
+            </template>
+            <template v-else-if="scanProgress.total > 0">
+              扫列 {{ scanProgress.processed }}/{{ scanProgress.total }}
+            </template>
+            <template v-else>准备中…</template>
+            · 完成 {{ scanProgress.doneCount }} / 扫描中
+            {{ scanProgress.scanningCount }} / 未开始
+            {{ scanProgress.pendingCount }}
+            · 命中格 {{ scanProgress.hitCellCount }} / 键
+            {{ scanProgress.hitKeyCount }}
+            <template v-if="scanProgress.elapsedMs > 0">
+              · 已耗时 {{ Math.round(scanProgress.elapsedMs / 1000) }}s
+            </template>
+            <template v-if="scanProgress.currentTable">
+              · 当前 {{ scanProgress.currentTable }}
+            </template>
+          </div>
+        </div>
+
+        <div class="scan-split">
+          <div class="scan-split-pane">
+            <div class="sync-label scan-table-label">
+              将扫描的表
+              <span v-if="planTables.length" class="scan-table-count">
+                （{{ planTables.length }} 张
+                <template v-if="planColumnTotal">
+                  · {{ planColumnTotal }} 列
+                </template>
+                ）
+              </span>
+              <span class="scan-status-legend">
+                <ClockCircleOutlined class="scan-status-icon is-pending" />
+                未开始
+                <LoadingOutlined class="scan-status-icon is-scanning" /> 扫描中
+                <CheckCircleOutlined class="scan-status-icon is-done" /> 已完成
+              </span>
+            </div>
+            <Spin :spinning="planLoading">
+              <div class="scan-table-list">
+                <Empty
+                  v-if="!planTables.length && !planLoading"
+                  description="暂无待扫表，或清单加载失败"
+                />
+                <div
+                  v-for="row in planTables"
+                  :key="`${row.connection}|${row.table}`"
+                  class="scan-table-row"
+                  :class="{
+                    'is-scanning': row.status === 'scanning',
+                    'is-done': row.status === 'done',
+                    'is-pending': !row.status || row.status === 'pending',
+                  }"
+                >
+                  <span
+                    class="scan-status-icon-wrap"
+                    :title="scanStatusLabel(row.status)"
+                  >
+                    <LoadingOutlined
+                      v-if="row.status === 'scanning'"
+                      class="scan-status-icon is-scanning scan-status-spin"
+                    />
+                    <CheckCircleOutlined
+                      v-else-if="row.status === 'done'"
+                      class="scan-status-icon is-done"
+                    />
+                    <ClockCircleOutlined
+                      v-else
+                      class="scan-status-icon is-pending"
+                    />
+                  </span>
+                  <Tag
+                    :color="row.connection === 'old_mysql' ? 'orange' : 'blue'"
+                  >
+                    {{ scanConnLabel(row.connection) }}
+                  </Tag>
+                  <span class="scan-table-name" :title="row.table">{{
+                    row.table
+                  }}</span>
+                  <span class="scan-table-meta">
+                    <template
+                      v-if="row.status === 'scanning' || row.status === 'done'"
+                    >
+                      {{ row.done_columns ?? 0 }}/{{
+                        row.total_columns ?? row.columns
+                      }}
+                      列
+                    </template>
+                    <template v-else>
+                      {{ row.total_columns ?? row.columns }} 列 · 未开始
+                    </template>
+                    <template v-if="(row.failed || 0) > 0">
+                      · 失败 {{ row.failed }}
+                    </template>
+                  </span>
+                </div>
+              </div>
+            </Spin>
+          </div>
+
+          <div class="scan-split-pane">
+            <div class="sync-label scan-table-label">
+              当前检查
+              <span class="scan-table-count">
+                <template v-if="scanProgress.phase === 'apply'">
+                  （本批素材文件）
+                </template>
+                <template v-else> （本批列 / 命中文件名） </template>
+                {{ checkingList.length ? `· ${checkingList.length}` : '' }}
+              </span>
+            </div>
+            <div class="scan-checking-list">
+              <Empty
+                v-if="!checkingList.length"
+                :description="
+                  scanning ? '本批暂无明细…' : '开始扫描后这里会实时列出'
+                "
+              />
+              <div
+                v-for="(item, idx) in checkingList"
+                :key="`${item.kind || 'x'}-${item.id || idx}-${item.label}`"
+                class="scan-checking-row"
+                :class="{
+                  'is-hit': item.kind === 'hit' || (item.ref_count || 0) > 0,
+                  'is-miss':
+                    item.kind === 'file' && Number(item.ref_count || 0) === 0,
+                  'is-fail': item.extra === '失败',
+                }"
+              >
+                <Tag
+                  v-if="item.kind === 'column'"
+                  color="processing"
+                  class="scan-checking-tag"
+                >
+                  列
+                </Tag>
+                <Tag
+                  v-else-if="item.kind === 'hit'"
+                  color="success"
+                  class="scan-checking-tag"
+                >
+                  命中
+                </Tag>
+                <Tag v-else color="default" class="scan-checking-tag">文件</Tag>
+                <span
+                  class="scan-checking-name"
+                  :title="item.object_key || item.label"
+                >
+                  {{ item.label || '-' }}
+                </span>
+                <span v-if="item.extra" class="scan-checking-extra">{{
+                  item.extra
+                }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+
     <Modal
       v-model:open="syncOpen"
       title="从 OSS 同步"
-      :ok-text="syncStartMode === 'resume' && syncCheckpoint ? '继续断点' : '开始同步'"
+      :ok-text="
+        syncStartMode === 'resume' && syncCheckpoint ? '继续断点' : '开始同步'
+      "
       cancel-text="取消"
       :confirm-loading="syncing"
       :ok-button-props="{ disabled: syncing }"
@@ -968,14 +1736,15 @@ watch(typesLoading, (val) => {
           </Radio.Group>
           <div class="sync-hint">
             断点：第
-            {{ syncCheckpoint.groupIndex + 1 }}/{{ syncCheckpoint.prefixes.length }}
+            {{ syncCheckpoint.groupIndex + 1 }}/{{
+              syncCheckpoint.prefixes.length
+            }}
             组
             <span v-if="syncCheckpoint.prefixes[syncCheckpoint.groupIndex]">
               （{{
-                String(syncCheckpoint.prefixes[syncCheckpoint.groupIndex]).replace(
-                  /\/$/,
-                  '',
-                )
+                String(
+                  syncCheckpoint.prefixes[syncCheckpoint.groupIndex],
+                ).replace(/\/$/, '')
               }}）
             </span>
             · 已扫描 {{ syncCheckpoint.scanned }} · 已新增
@@ -985,15 +1754,22 @@ watch(typesLoading, (val) => {
         <div class="sync-label">同步模式</div>
         <Radio.Group
           v-model:value="syncMode"
-          :disabled="syncing || (syncStartMode === 'resume' && !!syncCheckpoint)"
+          :disabled="
+            syncing || (syncStartMode === 'resume' && !!syncCheckpoint)
+          "
         >
-          <Radio.Button value="incremental">增量（按日期）</Radio.Button>
           <Radio.Button value="full">全量扫描</Radio.Button>
+          <Radio.Button value="incremental"
+            >增量（按上次同步日期）</Radio.Button
+          >
         </Radio.Group>
         <div class="sync-hint">
-          增量：从库内最新
-          <code>xk_upload_YYYYMMDD</code>
-          日期起同步（含当日）。全量：扫描全部日期目录。
+          默认全量。增量从上次同步完成日期起（含当日）；完成后会保存日期供下次增量。
+          <template v-if="lastOssSyncDate">
+            当前上次同步：
+            <code>{{ lastOssSyncDate }}</code>
+          </template>
+          <template v-else>尚未同步过，选增量将等同全量。</template>
         </div>
         <div class="sync-label">每批文件数</div>
         <InputNumber
@@ -1016,7 +1792,9 @@ watch(typesLoading, (val) => {
           <div class="sync-progress-text">
             <template v-if="syncProgress.groupTotal > 0">
               日期组
-              {{ Math.min(syncProgress.groupIndex + 1, syncProgress.groupTotal) }}
+              {{
+                Math.min(syncProgress.groupIndex + 1, syncProgress.groupTotal)
+              }}
               /
               {{ syncProgress.groupTotal }}
               <span v-if="syncProgress.currentPrefix">
@@ -1068,12 +1846,220 @@ watch(typesLoading, (val) => {
   align-items: center;
 }
 
-.sync-form {
+.sync-form,
+.scan-form {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
+/* 扫完摘要：留在弹窗顶部，方便对照左右列表 */
+.scan-result-banner {
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: hsl(var(--foreground));
+  background: hsl(var(--primary) / 8%);
+  border: 1px solid hsl(var(--primary) / 30%);
+  border-radius: 8px;
+  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+}
+
+/* 左右分栏：左表清单，右当前检查的列/文件 */
+.scan-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+  align-items: stretch;
+}
+
+.scan-split-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.scan-table-label {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.scan-table-count {
+  font-size: 12px;
+  font-weight: normal;
+  color: hsl(var(--muted-foreground));
+}
+
+.scan-status-legend {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-left: auto;
+  font-size: 12px;
+  font-weight: normal;
+  color: hsl(var(--muted-foreground));
+}
+
+.scan-status-icon-wrap {
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  width: 16px;
+}
+
+.scan-status-icon {
+  font-size: 14px;
+
+  &.is-pending {
+    color: hsl(var(--muted-foreground));
+  }
+
+  &.is-scanning {
+    color: hsl(var(--primary));
+  }
+
+  &.is-done {
+    color: #30d158;
+  }
+
+  &.scan-status-spin {
+    animation: scan-spin 0.9s linear infinite;
+  }
+}
+
+@keyframes scan-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 将扫表列表：限高滚动；未开始 / 扫描中 / 已完成三态 */
+.scan-table-list {
+  min-height: 120px;
+  max-height: 320px;
+  padding: 8px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  background: hsl(var(--muted) / 25%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.scan-table-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 4px;
+  border-bottom: 1px solid hsl(var(--border) / 50%);
+  border-radius: 4px;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.is-scanning {
+    background: hsl(var(--primary) / 8%);
+  }
+
+  &.is-done {
+    opacity: 0.85;
+  }
+
+  &.is-pending {
+    opacity: 0.72;
+  }
+}
+
+.scan-table-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.scan-table-meta {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* 右侧「当前检查」列表 */
+.scan-checking-list {
+  min-height: 120px;
+  max-height: 320px;
+  padding: 8px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  background: hsl(var(--muted) / 25%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.scan-checking-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 5px 4px;
+  border-bottom: 1px solid hsl(var(--border) / 50%);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.is-hit {
+    background: hsl(var(--primary) / 8%);
+  }
+
+  &.is-miss {
+    opacity: 0.78;
+  }
+
+  &.is-fail {
+    background: hsl(var(--destructive, 0 84% 60%) / 10%);
+  }
+}
+
+.scan-checking-tag {
+  flex-shrink: 0;
+  margin-inline-end: 0;
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.scan-checking-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.scan-checking-extra {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+@media (max-width: 768px) {
+  .scan-split {
+    grid-template-columns: 1fr;
+  }
+}
+
 .sync-label {
   font-size: 13px;
   color: hsl(var(--foreground));
@@ -1094,9 +2080,9 @@ watch(typesLoading, (val) => {
   flex-direction: column;
   gap: 8px;
   padding: 10px 12px;
+  background: hsl(var(--primary) / 6%);
   border: 1px solid hsl(var(--primary) / 30%);
   border-radius: 8px;
-  background: hsl(var(--primary) / 0.06);
   box-shadow: 0 0 6px hsl(var(--primary) / 18%);
 }
 
@@ -1104,11 +2090,11 @@ watch(typesLoading, (val) => {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin-top: 8px;
   padding: 10px 12px;
+  margin-top: 8px;
+  background: hsl(var(--muted) / 25%);
   border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: hsl(var(--muted) / 0.25);
 }
 
 .sync-progress-text {
@@ -1117,25 +2103,21 @@ watch(typesLoading, (val) => {
   color: hsl(var(--foreground));
 }
 
+/* Page auto-content-height 下占满内容区，避免卡片列表撑破视口 */
+.file-gallery-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .stats-row {
   display: grid;
+  flex-shrink: 0;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
-  margin-bottom: 16px;
-}
-
-.stat-card {
-  padding: 14px 16px;
-  background: hsl(var(--card, var(--background)));
-  border: 1px solid hsl(var(--primary) / 30%);
-  border-radius: 8px;
-  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
-}
-
-.stat-label {
-  margin-bottom: 6px;
-  font-size: 13px;
-  color: hsl(var(--muted-foreground));
 }
 
 .stat-value {
@@ -1153,22 +2135,61 @@ watch(typesLoading, (val) => {
 
 .gallery-shell {
   display: flex;
+  flex: 1;
   gap: 16px;
-  align-items: flex-start;
+  align-items: stretch;
   min-height: 0;
+  overflow: hidden;
+}
+
+.gallery-sidebar {
+  flex-shrink: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: auto;
 }
 
 .gallery-main {
   flex: 1;
   min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* GlassCard body 变成纵向 flex，中间网格滚动、底部分页固定 */
+.gallery-main :deep(.glass-card__body) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.gallery-main-inner {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.gallery-scroll {
+  flex: 1;
+  min-height: 0;
+
+  /* 给悬停上浮留一点内边距，避免裁切阴影 */
+  padding: 4px 2px 8px;
+  overflow: auto;
 }
 
 .toolbar {
   display: flex;
+  flex-shrink: 0;
   flex-wrap: wrap;
   gap: 12px;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .select-bar {
@@ -1183,70 +2204,26 @@ watch(typesLoading, (val) => {
   color: hsl(var(--foreground));
 }
 
-.unref-switch {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 13px;
-  color: hsl(var(--foreground));
-}
-
 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
   gap: 16px;
 }
 
-.gallery-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 8px;
-  overflow: hidden;
-  color: hsl(var(--card-foreground));
-  cursor: pointer;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 12px;
-  transition:
-    transform 0.22s ease,
-    border-color 0.22s ease,
-    box-shadow 0.22s ease,
-    background-color 0.22s ease;
+/* 错峰入场挂在 wrapper；多选时关掉悬停上浮，避免勾选时卡片跳动 */
+.gallery-tile-wrap {
   animation: card-in 0.32s ease both;
 
-  &:hover {
-    border-color: hsl(var(--primary) / 40%);
-    box-shadow: 0 8px 20px hsl(var(--primary) / 14%);
-    transform: translateY(-3px);
-
-    .gallery-thumb {
-      transform: scale(1.06);
-    }
-
-    .card-overlay {
-      opacity: 1;
-    }
+  &:hover .gallery-thumb {
+    transform: scale(1.06);
   }
 
-  &.selected {
-    background: hsl(var(--primary) / 8%);
-    border-color: hsl(var(--primary) / 50%);
-    box-shadow: 0 0 8px hsl(var(--primary) / 22%);
+  &:hover .card-overlay {
+    opacity: 1;
   }
 
-  &.selecting:hover {
+  &.selecting:hover .gallery-thumb {
     transform: none;
-
-    .gallery-thumb {
-      transform: none;
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid hsl(var(--primary));
-    outline-offset: 2px;
   }
 }
 
@@ -1353,8 +2330,11 @@ watch(typesLoading, (val) => {
 
 .gallery-pagination {
   display: flex;
+  flex-shrink: 0;
   justify-content: center;
-  margin-top: 20px;
+  padding-top: 12px;
+  margin-top: 4px;
+  border-top: 1px solid hsl(var(--border) / 60%);
 }
 
 @keyframes card-in {
@@ -1370,11 +2350,10 @@ watch(typesLoading, (val) => {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .gallery-card {
-    transition: none;
+  .gallery-tile-wrap {
     animation: none;
 
-    &:hover {
+    &:hover .gallery-thumb {
       transform: none;
     }
 
diff --git a/apps/web-antd/src/views/system/hy-open-app/index.vue b/apps/web-antd/src/views/system/hy-open-app/index.vue
index fb0c5033..2c714014 100644
--- a/apps/web-antd/src/views/system/hy-open-app/index.vue
+++ b/apps/web-antd/src/views/system/hy-open-app/index.vue
@@ -14,11 +14,7 @@ import { Tag, message } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { TableAction } from '#/components/table-action';
 
-import {
-  deleteHyOpenApp,
-  getHyOpenAppList,
-  resetHyOpenAppSecret,
-} from './api';
+import { deleteHyOpenApp, getHyOpenAppList, resetHyOpenAppSecret } from './api';
 import FormModal from './components/modal.vue';
 import SecretModal from './components/secret-modal.vue';
 import { STATUS_OPTIONS } from './config/constants';
@@ -201,6 +197,7 @@ const handleDelete = async (ids: number[]) => {
       </template>
       <template #action="{ row }">
         <TableAction
+          :flex="false"
           :actions="[
             {
               label: '编辑',
diff --git a/apps/web-antd/src/views/system/menu/api/index.ts b/apps/web-antd/src/views/system/menu/api/index.ts
index eee8c38c..299ab537 100644
--- a/apps/web-antd/src/views/system/menu/api/index.ts
+++ b/apps/web-antd/src/views/system/menu/api/index.ts
@@ -1,4 +1,4 @@
-import {requestClient} from '#/api/request';
+import { requestClient } from '#/api/request';
 
 const prefix = 'menu/';
 
@@ -46,7 +46,10 @@ export async function getMenuTreeOptionSelect() {
  * 搜索菜单（支持按 title 模糊搜索）
  * @param data 搜索参数 { keyword: string, filter_by_user?: number }
  */
-export async function searchMenu(data: { keyword: string; filter_by_user?: number }) {
+export async function searchMenu(data: {
+  keyword: string;
+  filter_by_user?: number;
+}) {
   return requestClient.get<any>(`${prefix}search-menu`, { params: data });
 }
 
@@ -81,3 +84,51 @@ export async function updateMenu(data: Record<string, any>) {
 export async function deleteMenu(data: Record<string, any>) {
   return requestClient.post<any>(`${prefix}delete`, data);
 }
+
+/**
+ * 预览移动子菜单对角色授权的影响（不落库）
+ * @param data target_pid + menu_ids
+ */
+export async function previewMoveMenu(data: {
+  menu_ids: number[];
+  target_pid: number;
+}) {
+  return requestClient.post<any>(`${prefix}preview-move`, data);
+}
+
+/**
+ * 执行移动子菜单并同步角色授权
+ * @param data target_pid + menu_ids
+ */
+export async function moveMenu(data: {
+  menu_ids: number[];
+  target_pid: number;
+}) {
+  return requestClient.post<any>(`${prefix}move`, data);
+}
+
+/** 同级下一排序值 xk-api GET /menu/next-sort */
+export async function getMenuNextSort(pid: number) {
+  return requestClient.get<{ pid: number; sort: number }>(
+    `${prefix}next-sort`,
+    {
+      params: { pid },
+    },
+  );
+}
+
+/** 同级兄弟列表 xk-api GET /menu/list-siblings */
+export async function getMenuSiblings(pid: number) {
+  return requestClient.get<{ items: any[]; pid: number }>(
+    `${prefix}list-siblings`,
+    { params: { pid } },
+  );
+}
+
+/** 批量同级排序 xk-api POST /menu/sort-siblings */
+export async function sortMenuSiblings(data: {
+  items: { id: number; sort: number }[];
+  pid: number;
+}) {
+  return requestClient.post<any>(`${prefix}sort-siblings`, data);
+}
diff --git a/apps/web-antd/src/views/system/menu/components/MenuCardList.vue b/apps/web-antd/src/views/system/menu/components/MenuCardList.vue
new file mode 100644
index 00000000..e3c19dba
--- /dev/null
+++ b/apps/web-antd/src/views/system/menu/components/MenuCardList.vue
@@ -0,0 +1,568 @@
+<script lang="ts" setup>
+/**
+ * 菜单卡片看板（层级下钻）
+ * - 默认只展示当前层级的直接子菜单，点卡片/「进入」下钻，面包屑返回
+ * - 下钻路径写入 localStorage，刷新后恢复
+ * - 当前层级（栈顶父级）在导航工具栏可编辑/授权/移动/删除
+ * - 搜索：扁平列出命中项并高亮路径；可「定位到所在层级」切入浏览
+ */
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { Breadcrumb, Button, Empty, Tag } from 'ant-design-vue';
+
+import { CardActions } from '#/components/table-action';
+import { Icon } from '#/components/icon';
+
+import { MENU_TYPE_MAP } from '../config/constants';
+
+/** 下钻路径 id 列表本地记忆 */
+const DRILL_STORAGE_KEY = 'menu-card-drill-ids';
+
+function typeMeta(type: string | undefined) {
+  return MENU_TYPE_MAP[String(type || 'menu')] || MENU_TYPE_MAP.menu;
+}
+
+const props = defineProps<{
+  items: Record<string, any>[];
+  keyword?: string;
+  buildRowActions: (row: Record<string, any>) => {
+    actions: any[];
+    dropDownActions: any[];
+  };
+}>();
+
+interface TreeNode {
+  id: number;
+  pid: number;
+  title: string;
+  icon?: string;
+  path?: string;
+  raw: Record<string, any>;
+  children: TreeNode[];
+  pathTitles: string[];
+  hit: boolean;
+}
+
+/** 下钻栈：空=一级；栈顶=当前父级 */
+const drillStack = ref<TreeNode[]>([]);
+/** 搜索后点「定位」：临时按层级浏览，不再铺平命中列表 */
+const locatingFromSearch = ref(false);
+
+function readStoredDrillIds(): number[] {
+  try {
+    const raw = localStorage.getItem(DRILL_STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    if (!Array.isArray(parsed)) return [];
+    return parsed.map((id) => Number(id)).filter((id) => id > 0);
+  } catch {
+    return [];
+  }
+}
+
+/** 显式写入本地（下钻/返回时调用，避免 watch 异步把空栈写回去） */
+function persistDrillIds(ids: number[]) {
+  try {
+    localStorage.setItem(DRILL_STORAGE_KEY, JSON.stringify(ids));
+  } catch {
+    // ignore quota
+  }
+}
+
+function setDrillStack(nodes: TreeNode[], persist = true) {
+  drillStack.value = nodes;
+  if (persist) {
+    persistDrillIds(nodes.map((n) => n.id));
+  }
+}
+
+/** 当前浏览父级（栈顶）；根级为 null */
+const currentParent = computed(() => {
+  const stack = drillStack.value;
+  return stack.length ? stack[stack.length - 1]! : null;
+});
+
+const currentLevelActions = computed(() => {
+  const parent = currentParent.value;
+  if (!parent) return null;
+  return props.buildRowActions(parent.raw);
+});
+
+const kw = computed(() => String(props.keyword || '').trim());
+
+const treeRoots = computed(() => {
+  const keyword = kw.value.toLowerCase();
+  const map = new Map<number, TreeNode>();
+  for (const row of props.items || []) {
+    const id = Number(row.id);
+    map.set(id, {
+      id,
+      pid: Number(row.pid || 0),
+      title: String(row.title || ''),
+      icon: row.icon,
+      path: row.path,
+      raw: row,
+      children: [],
+      pathTitles: [],
+      hit: false,
+    });
+  }
+  for (const node of map.values()) {
+    if (node.pid > 0 && map.has(node.pid)) {
+      map.get(node.pid)!.children.push(node);
+    }
+  }
+  const roots: TreeNode[] = [];
+  const fill = (node: TreeNode, ancestors: string[]) => {
+    node.pathTitles = [...ancestors, node.title];
+    node.hit = keyword !== '' && node.title.toLowerCase().includes(keyword);
+    for (const child of node.children) {
+      fill(child, node.pathTitles);
+    }
+  };
+  for (const node of map.values()) {
+    if (node.pid === 0 || !map.has(node.pid)) {
+      roots.push(node);
+      fill(node, []);
+    }
+  }
+  return roots;
+});
+
+/** 找 root→target 的路径（含 target 自身） */
+function findNodePath(targetId: number): TreeNode[] | null {
+  const walk = (node: TreeNode, trail: TreeNode[]): TreeNode[] | null => {
+    const next = [...trail, node];
+    if (node.id === targetId) return next;
+    for (const child of node.children) {
+      const found = walk(child, next);
+      if (found) return found;
+    }
+    return null;
+  };
+  for (const root of treeRoots.value) {
+    const found = walk(root, []);
+    if (found) return found;
+  }
+  return null;
+}
+
+/** 扁平命中列表（搜索态） */
+const searchHits = computed(() => {
+  const hits: TreeNode[] = [];
+  const walk = (nodes: TreeNode[]) => {
+    for (const n of nodes) {
+      if (n.hit) hits.push(n);
+      if (n.children.length) walk(n.children);
+    }
+  };
+  walk(treeRoots.value);
+  return hits;
+});
+
+/**
+ * 当前展示卡片
+ * - 搜索且未定位：命中扁平列表
+ * - 否则：当前下钻层的直接子级
+ */
+const displayCards = computed(() => {
+  if (kw.value && !locatingFromSearch.value) {
+    return searchHits.value;
+  }
+  const parent = drillStack.value[drillStack.value.length - 1];
+  return parent ? parent.children : treeRoots.value;
+});
+
+const breadcrumbs = computed(() => [
+  { id: 0, title: '全部菜单' },
+  ...drillStack.value.map((n) => ({ id: n.id, title: n.title })),
+]);
+
+const showBrowseNav = computed(() => !kw.value || locatingFromSearch.value);
+
+/**
+ * 按本地记忆的 id 链恢复下钻栈（最长合法前缀）
+ * 树未就绪时不改 stack、更不写空数组盖掉 storage
+ */
+function restoreDrillFromStorage() {
+  const ids = readStoredDrillIds();
+  if (!treeRoots.value.length) {
+    return;
+  }
+  if (!ids.length) {
+    setDrillStack([], false);
+    return;
+  }
+  let restored: TreeNode[] | null = null;
+  for (let len = ids.length; len >= 1; len--) {
+    const path = findNodePath(ids[len - 1]!);
+    if (path && path.length === len && path.every((n, i) => n.id === ids[i])) {
+      restored = path;
+      break;
+    }
+  }
+  // 只改内存栈；storage 仅在路径被截断（节点不存在）时回写
+  setDrillStack(restored || [], false);
+  if (!restored || restored.length !== ids.length) {
+    persistDrillIds((restored || []).map((n) => n.id));
+  }
+}
+
+watch(
+  () => props.keyword,
+  (keyword) => {
+    locatingFromSearch.value = false;
+    if (!String(keyword || '').trim()) {
+      nextTick(() => restoreDrillFromStorage());
+    }
+  },
+);
+
+watch(
+  () => props.items,
+  () => {
+    locatingFromSearch.value = false;
+    if (!kw.value) {
+      // 等 treeRoots 基于新 items 算完再恢复
+      nextTick(() => restoreDrillFromStorage());
+    }
+  },
+  { immediate: true, deep: false },
+);
+
+/** 进入子级 */
+function enterNode(node: TreeNode) {
+  if (node.children.length === 0) return;
+  setDrillStack([...drillStack.value, node], true);
+}
+
+/** 点卡片主体：有子级则进入 */
+function onCardBodyClick(node: TreeNode) {
+  if (kw.value && !locatingFromSearch.value) {
+    locateNode(node);
+    return;
+  }
+  if (node.children.length > 0) {
+    enterNode(node);
+  }
+}
+
+/**
+ * 从搜索结果定位到所在层级
+ * - 有子级：进入该节点（看其子菜单）
+ * - 无子级：停在父级层，便于看到同级兄弟
+ */
+function locateNode(node: TreeNode) {
+  const path = findNodePath(node.id);
+  if (!path || path.length === 0) return;
+  locatingFromSearch.value = true;
+  if (node.children.length > 0) {
+    setDrillStack(path, true);
+  } else {
+    setDrillStack(path.slice(0, -1), true);
+  }
+}
+
+function backToSearchHits() {
+  // 只切回命中列表；保留下钻记忆，清空搜索后仍可还原
+  locatingFromSearch.value = false;
+}
+
+function goBreadcrumb(index: number) {
+  if (index <= 0) {
+    setDrillStack([], true);
+    return;
+  }
+  setDrillStack(drillStack.value.slice(0, index), true);
+}
+
+function childCountLabel(node: TreeNode) {
+  const n = node.children.length;
+  return n > 0 ? `${n} 个子菜单` : '叶子菜单';
+}
+</script>
+
+<template>
+  <div class="menu-card-board">
+    <div v-if="showBrowseNav" class="menu-card-nav">
+      <Breadcrumb>
+        <Breadcrumb.Item
+          v-for="(bc, idx) in breadcrumbs"
+          :key="`${bc.id}-${idx}`"
+        >
+          <a
+            v-if="idx < breadcrumbs.length - 1"
+            href="javascript:;"
+            @click.prevent="goBreadcrumb(idx)"
+          >
+            {{ bc.title }}
+          </a>
+          <span v-else>{{ bc.title }}</span>
+        </Breadcrumb.Item>
+      </Breadcrumb>
+      <div class="menu-card-nav__actions">
+        <!-- 当前层级（父级）操作：编辑/授权/移动/删除 -->
+        <template v-if="currentParent && currentLevelActions">
+          <span class="menu-card-nav__level-label">
+            当前：{{ currentParent.title }}
+          </span>
+          <CardActions
+            :actions="currentLevelActions.actions"
+            :drop-down-actions="currentLevelActions.dropDownActions"
+            :max-visible="3"
+          />
+        </template>
+        <Button
+          v-if="kw && locatingFromSearch"
+          type="link"
+          size="small"
+          @click="backToSearchHits"
+        >
+          回到搜索结果
+        </Button>
+        <Button
+          v-if="drillStack.length > 0"
+          type="link"
+          size="small"
+          @click="goBreadcrumb(drillStack.length - 1)"
+        >
+          返回上一级
+        </Button>
+      </div>
+    </div>
+    <div v-else class="menu-card-nav menu-card-nav--search">
+      <span class="menu-card-nav__hint">
+        搜索命中 {{ displayCards.length }} 项 · 点击卡片可定位到所在层级
+      </span>
+    </div>
+
+    <Empty v-if="displayCards.length === 0" description="暂无菜单" />
+    <div v-else class="menu-card-grid">
+      <div
+        v-for="card in displayCards"
+        :key="card.id"
+        class="menu-card"
+        :class="{
+          'is-hit': card.hit,
+          'is-clickable':
+            card.children.length > 0 || (!!kw && !locatingFromSearch),
+        }"
+      >
+        <div class="menu-card__head" @click="onCardBodyClick(card)">
+          <!-- icon 右侧放大，不挤左侧标题 -->
+          <div v-if="card.icon" class="menu-card__icon-wrap" aria-hidden="true">
+            <Icon :icon="card.icon" class="menu-card__icon" />
+          </div>
+          <div class="menu-card__content">
+            <div class="menu-card__title-row">
+              <span class="menu-card__title">{{ card.title }}</span>
+              <Tag v-if="card.hit" color="processing" class="!m-0">命中</Tag>
+              <Tag :color="typeMeta(card.raw.type).color" class="!m-0">
+                {{ typeMeta(card.raw.type).label }}
+              </Tag>
+              <Tag v-if="card.children.length > 0" color="default" class="!m-0">
+                {{ card.children.length }} 子级
+              </Tag>
+            </div>
+            <div v-if="card.hit && kw" class="menu-card__hit-path">
+              {{ card.pathTitles.join(' → ') }}
+            </div>
+            <div v-else-if="card.path" class="menu-card__path">
+              {{ card.path }}
+            </div>
+            <div class="menu-card__meta">{{ childCountLabel(card) }}</div>
+          </div>
+        </div>
+        <div class="menu-card__footer" @click.stop>
+          <Button
+            v-if="kw && !locatingFromSearch"
+            type="link"
+            size="small"
+            @click="locateNode(card)"
+          >
+            定位
+          </Button>
+          <Button
+            v-else-if="card.children.length > 0"
+            type="link"
+            size="small"
+            @click="enterNode(card)"
+          >
+            进入
+            <Icon icon="ant-design:right-outlined" class="ml-0.5" />
+          </Button>
+          <CardActions
+            :actions="buildRowActions(card.raw).actions"
+            :drop-down-actions="buildRowActions(card.raw).dropDownActions"
+            :max-visible="1"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.menu-card-board {
+  min-height: 200px;
+}
+
+.menu-card-nav {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  margin-bottom: 14px;
+  background: hsl(var(--muted) / 25%);
+  border: 1px solid hsl(var(--border));
+  border-radius: 10px;
+}
+
+.menu-card-nav--search {
+  justify-content: flex-start;
+}
+
+.menu-card-nav__actions {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.menu-card-nav__level-label {
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+}
+
+.menu-card-nav__hint {
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+}
+
+.menu-card-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 16px;
+}
+
+@media (min-width: 900px) {
+  .menu-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1400px) {
+  .menu-card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.menu-card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--primary) / 30%);
+  border-radius: 16px;
+  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+  transition:
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.menu-card.is-clickable .menu-card__head {
+  cursor: pointer;
+}
+
+.menu-card.is-clickable:hover {
+  border-color: hsl(var(--primary) / 45%);
+  box-shadow: 0 0 10px hsl(var(--primary) / 22%);
+}
+
+.menu-card.is-hit {
+  background: hsl(var(--primary) / 8%);
+  border-color: hsl(var(--primary) / 45%);
+}
+
+.menu-card__head {
+  position: relative;
+  flex: 1;
+  min-height: 88px;
+  padding: 14px 16px 10px;
+}
+
+.menu-card__icon-wrap {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  pointer-events: none;
+  background: hsl(var(--primary) / 8%);
+  border: 1px solid hsl(var(--primary) / 28%);
+  border-radius: 14px;
+  box-shadow: 0 0 6px hsl(var(--primary) / 14%);
+}
+
+.menu-card__icon {
+  font-size: 32px;
+  line-height: 1;
+  color: hsl(var(--primary));
+}
+
+.menu-card__content {
+  padding-right: 72px;
+}
+
+.menu-card__title-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.menu-card__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.menu-card__path {
+  margin-top: 6px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  word-break: break-all;
+}
+
+.menu-card__hit-path {
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: hsl(var(--primary));
+  word-break: break-all;
+}
+
+.menu-card__meta {
+  margin-top: 8px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.menu-card__footer {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px 12px 12px;
+  border-top: 1px solid hsl(var(--border));
+}
+</style>
diff --git a/apps/web-antd/src/views/system/menu/components/menu-kind-pick-card.vue b/apps/web-antd/src/views/system/menu/components/menu-kind-pick-card.vue
new file mode 100644
index 00000000..5962b2e2
--- /dev/null
+++ b/apps/web-antd/src/views/system/menu/components/menu-kind-pick-card.vue
@@ -0,0 +1,448 @@
+<script lang="ts" setup>
+/**
+ * 新建菜单「选类型」卡片：主题色粒子背景 + 右上角拟物 Canvas icon
+ * 文案占左侧，icon 绝对定位右上，不挤标题；prefers-reduced-motion 停动画
+ */
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  /** catalog | menu */
+  kind: 'catalog' | 'menu';
+  label: string;
+  desc: string;
+  active?: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [];
+  /** 双击：选中并进入下一步 */
+  confirm: [];
+}>();
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const particleRef = ref<HTMLCanvasElement | null>(null);
+let rafId = 0;
+let particleRaf = 0;
+let reduced = false;
+
+type Particle = {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  r: number;
+  a: number;
+};
+let particles: Particle[] = [];
+
+/** 读取主题色 hsl 通道，供 canvas 用 */
+function primaryChannels(): string {
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue('--primary')
+    .trim();
+  return raw || '160 84% 39%';
+}
+
+function resizeCanvas(el: HTMLCanvasElement, cssW: number, cssH: number) {
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  el.width = Math.max(1, Math.floor(cssW * dpr));
+  el.height = Math.max(1, Math.floor(cssH * dpr));
+  el.style.width = `${cssW}px`;
+  el.style.height = `${cssH}px`;
+  const ctx = el.getContext('2d');
+  if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  return ctx;
+}
+
+/** 初始化粒子（右上角区域略密，整体更轻） */
+function initParticles(w: number, h: number) {
+  const n = Math.max(10, Math.floor((w * h) / 10000));
+  particles = Array.from({ length: n }, () => ({
+    x: Math.random() * w,
+    y: Math.random() * h,
+    vx: (Math.random() - 0.5) * 0.28,
+    vy: (Math.random() - 0.5) * 0.28,
+    r: 0.7 + Math.random() * 1.4,
+    a: 0.12 + Math.random() * 0.28,
+  }));
+}
+
+/** 粒子层循环 */
+function loopParticles() {
+  const el = particleRef.value;
+  if (!el) return;
+  const rect = el.parentElement?.getBoundingClientRect();
+  const w = rect?.width || 220;
+  const h = rect?.height || 140;
+  const ctx = resizeCanvas(el, w, h);
+  if (!ctx) return;
+  if (particles.length === 0) initParticles(w, h);
+  const ch = primaryChannels();
+  ctx.clearRect(0, 0, w, h);
+  for (const p of particles) {
+    if (!reduced) {
+      p.x += p.vx;
+      p.y += p.vy;
+      if (p.x < 0 || p.x > w) p.vx *= -1;
+      if (p.y < 0 || p.y > h) p.vy *= -1;
+    }
+    ctx.beginPath();
+    ctx.fillStyle = `hsl(${ch} / ${p.a})`;
+    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  if (!reduced) {
+    particleRaf = requestAnimationFrame(loopParticles);
+  }
+}
+
+/** 圆角矩形路径 */
+function roundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+) {
+  const rr = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + rr, y);
+  ctx.arcTo(x + w, y, x + w, y + h, rr);
+  ctx.arcTo(x + w, y + h, x, y + h, rr);
+  ctx.arcTo(x, y + h, x, y, rr);
+  ctx.arcTo(x, y, x + w, y, rr);
+  ctx.closePath();
+}
+
+/**
+ * 拟物文件夹：立体阴影 + 渐变体 + 开合盖 + 内页纸
+ */
+function drawCatalog(
+  ctx: CanvasRenderingContext2D,
+  w: number,
+  h: number,
+  time: number,
+) {
+  const ch = primaryChannels();
+  const cx = w / 2;
+  const cy = h / 2 + 2;
+  const open = reduced
+    ? 0.42
+    : 0.28 + 0.22 * (0.5 + 0.5 * Math.sin(time * 0.002));
+  // 落影
+  ctx.save();
+  ctx.fillStyle = 'hsl(0 0% 0% / 0.12)';
+  ctx.beginPath();
+  ctx.ellipse(cx + 2, cy + 26, 30, 5, 0, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.restore();
+  // 内页纸（盖开时露出）
+  const paperLift = open * 10;
+  const paperGrad = ctx.createLinearGradient(cx - 22, cy - 8, cx + 22, cy + 16);
+  paperGrad.addColorStop(0, 'hsl(0 0% 98% / 0.95)');
+  paperGrad.addColorStop(1, 'hsl(0 0% 90% / 0.9)');
+  ctx.fillStyle = paperGrad;
+  roundRect(ctx, cx - 20, cy - 4 - paperLift, 40, 22, 2);
+  ctx.fill();
+  ctx.strokeStyle = 'hsl(0 0% 70% / 0.5)';
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  // 纸上细线
+  ctx.strokeStyle = `hsl(${ch} / 0.35)`;
+  for (let i = 0; i < 3; i++) {
+    const y = cy + 2 - paperLift + i * 5;
+    ctx.beginPath();
+    ctx.moveTo(cx - 14, y);
+    ctx.lineTo(cx + 12 - i * 3, y);
+    ctx.stroke();
+  }
+  // 文件夹本体渐变
+  const bodyGrad = ctx.createLinearGradient(cx - 32, cy - 4, cx + 32, cy + 24);
+  bodyGrad.addColorStop(0, `hsl(${ch} / 0.55)`);
+  bodyGrad.addColorStop(0.45, `hsl(${ch} / 0.72)`);
+  bodyGrad.addColorStop(1, `hsl(${ch} / 0.48)`);
+  ctx.fillStyle = bodyGrad;
+  roundRect(ctx, cx - 32, cy - 2, 64, 28, 4);
+  ctx.fill();
+  // 侧边高光
+  ctx.fillStyle = 'hsl(0 0% 100% / 0.18)';
+  ctx.fillRect(cx - 30, cy, 4, 22);
+  // 标签耳
+  const tabGrad = ctx.createLinearGradient(cx - 32, cy - 14, cx - 4, cy - 2);
+  tabGrad.addColorStop(0, `hsl(${ch} / 0.78)`);
+  tabGrad.addColorStop(1, `hsl(${ch} / 0.58)`);
+  ctx.fillStyle = tabGrad;
+  ctx.beginPath();
+  ctx.moveTo(cx - 32, cy - 2);
+  ctx.lineTo(cx - 32, cy - 12);
+  ctx.quadraticCurveTo(cx - 32, cy - 15, cx - 28, cy - 15);
+  ctx.lineTo(cx - 6, cy - 15);
+  ctx.quadraticCurveTo(cx - 2, cy - 15, cx - 1, cy - 10);
+  ctx.lineTo(cx - 1, cy - 2);
+  ctx.closePath();
+  ctx.fill();
+  // 开合盖（透视）
+  const lidY = cy - 2;
+  const lidTip = lidY - open * 16;
+  const lidGrad = ctx.createLinearGradient(cx - 34, lidTip, cx + 34, lidY);
+  lidGrad.addColorStop(0, `hsl(${ch} / 0.85)`);
+  lidGrad.addColorStop(1, `hsl(${ch} / 0.55)`);
+  ctx.fillStyle = lidGrad;
+  ctx.beginPath();
+  ctx.moveTo(cx - 34, lidY);
+  ctx.lineTo(cx - 18, lidTip);
+  ctx.lineTo(cx + 10, lidTip + open * 4);
+  ctx.lineTo(cx + 34, lidY);
+  ctx.closePath();
+  ctx.fill();
+  ctx.strokeStyle = `hsl(${ch} / 0.35)`;
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  // 盖沿高光
+  ctx.strokeStyle = 'hsl(0 0% 100% / 0.35)';
+  ctx.beginPath();
+  ctx.moveTo(cx - 30, lidY - 1);
+  ctx.lineTo(cx - 16, lidTip + 2);
+  ctx.stroke();
+}
+
+/**
+ * 拟物文档：纸张厚度 + 折角 + 阴影 + 指针微动
+ */
+function drawMenu(
+  ctx: CanvasRenderingContext2D,
+  w: number,
+  h: number,
+  time: number,
+) {
+  const ch = primaryChannels();
+  const cx = w / 2 - 4;
+  const cy = h / 2 + 2;
+  // 落影
+  ctx.fillStyle = 'hsl(0 0% 0% / 0.12)';
+  ctx.beginPath();
+  ctx.ellipse(cx + 4, cy + 28, 22, 4.5, 0, 0, Math.PI * 2);
+  ctx.fill();
+  // 底层纸（厚度）
+  ctx.fillStyle = `hsl(${ch} / 0.25)`;
+  roundRect(ctx, cx - 16, cy - 22, 36, 46, 3);
+  ctx.fill();
+  // 主纸渐变
+  const paperGrad = ctx.createLinearGradient(
+    cx - 18,
+    cy - 26,
+    cx + 18,
+    cy + 24,
+  );
+  paperGrad.addColorStop(0, 'hsl(0 0% 100% / 0.98)');
+  paperGrad.addColorStop(0.5, 'hsl(0 0% 97% / 0.96)');
+  paperGrad.addColorStop(1, 'hsl(0 0% 92% / 0.94)');
+  ctx.fillStyle = paperGrad;
+  ctx.beginPath();
+  ctx.moveTo(cx - 18, cy - 26);
+  ctx.lineTo(cx + 6, cy - 26);
+  ctx.lineTo(cx + 18, cy - 12);
+  ctx.lineTo(cx + 18, cy + 24);
+  ctx.lineTo(cx - 18, cy + 24);
+  ctx.closePath();
+  ctx.fill();
+  ctx.strokeStyle = `hsl(${ch} / 0.35)`;
+  ctx.lineWidth = 1.2;
+  ctx.stroke();
+  // 折角
+  const foldGrad = ctx.createLinearGradient(cx + 6, cy - 26, cx + 18, cy - 12);
+  foldGrad.addColorStop(0, `hsl(${ch} / 0.2)`);
+  foldGrad.addColorStop(1, `hsl(${ch} / 0.45)`);
+  ctx.fillStyle = foldGrad;
+  ctx.beginPath();
+  ctx.moveTo(cx + 6, cy - 26);
+  ctx.lineTo(cx + 18, cy - 12);
+  ctx.lineTo(cx + 6, cy - 12);
+  ctx.closePath();
+  ctx.fill();
+  ctx.strokeStyle = `hsl(${ch} / 0.3)`;
+  ctx.stroke();
+  // 正文线
+  ctx.strokeStyle = `hsl(${ch} / 0.4)`;
+  ctx.lineWidth = 1.5;
+  ctx.lineCap = 'round';
+  for (let i = 0; i < 4; i++) {
+    const y = cy - 6 + i * 7;
+    const right = i === 3 ? cx + 4 : cx + 12;
+    ctx.beginPath();
+    ctx.moveTo(cx - 10, y);
+    ctx.lineTo(right, y);
+    ctx.stroke();
+  }
+  // 左侧色条（像标签）
+  const barGrad = ctx.createLinearGradient(cx - 18, cy - 10, cx - 14, cy + 20);
+  barGrad.addColorStop(0, `hsl(${ch} / 0.85)`);
+  barGrad.addColorStop(1, `hsl(${ch} / 0.55)`);
+  ctx.fillStyle = barGrad;
+  ctx.fillRect(cx - 18, cy - 8, 3.5, 28);
+  // 指针（带体积）
+  const ox = reduced ? 2 : Math.sin(time * 0.0028) * 5;
+  const oy = reduced ? 0 : Math.cos(time * 0.0022) * 3.5;
+  const px = cx + 20 + ox;
+  const py = cy + 6 + oy;
+  ctx.fillStyle = 'hsl(0 0% 0% / 0.18)';
+  ctx.beginPath();
+  ctx.moveTo(px + 2, py + 2);
+  ctx.lineTo(px + 12, py + 16);
+  ctx.lineTo(px + 4, py + 14);
+  ctx.lineTo(px, py + 20);
+  ctx.closePath();
+  ctx.fill();
+  const tipGrad = ctx.createLinearGradient(px, py, px + 8, py + 18);
+  tipGrad.addColorStop(0, 'hsl(0 0% 100% / 0.95)');
+  tipGrad.addColorStop(1, `hsl(${ch} / 0.75)`);
+  ctx.fillStyle = tipGrad;
+  ctx.strokeStyle = `hsl(${ch} / 0.55)`;
+  ctx.lineWidth = 1.2;
+  ctx.beginPath();
+  ctx.moveTo(px, py);
+  ctx.lineTo(px + 11, py + 15);
+  ctx.lineTo(px + 3, py + 13);
+  ctx.lineTo(px - 1, py + 19);
+  ctx.closePath();
+  ctx.fill();
+  ctx.stroke();
+}
+
+function loopIcon() {
+  const el = canvasRef.value;
+  if (!el) return;
+  const w = 88;
+  const h = 80;
+  const ctx = resizeCanvas(el, w, h);
+  if (!ctx) return;
+  const time = performance.now();
+  ctx.clearRect(0, 0, w, h);
+  if (props.kind === 'catalog') {
+    drawCatalog(ctx, w, h, time);
+  } else {
+    drawMenu(ctx, w, h, time);
+  }
+  if (!reduced) {
+    rafId = requestAnimationFrame(loopIcon);
+  }
+}
+
+function start() {
+  reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  cancelAnimationFrame(rafId);
+  cancelAnimationFrame(particleRaf);
+  particles = [];
+  loopParticles();
+  loopIcon();
+}
+
+function stop() {
+  cancelAnimationFrame(rafId);
+  cancelAnimationFrame(particleRaf);
+}
+
+onMounted(() => {
+  start();
+  window.addEventListener('resize', start);
+});
+
+onBeforeUnmount(() => {
+  stop();
+  window.removeEventListener('resize', start);
+});
+
+watch(
+  () => props.kind,
+  () => {
+    stop();
+    start();
+  },
+);
+</script>
+
+<template>
+  <button
+    type="button"
+    class="kind-card"
+    :class="{ 'is-active': active }"
+    @click="emit('select')"
+    @dblclick="emit('confirm')"
+  >
+    <canvas ref="particleRef" class="kind-card__particles" aria-hidden="true" />
+    <!-- icon 绝对定位右上，不参与文案流式布局 -->
+    <canvas ref="canvasRef" class="kind-card__icon" aria-hidden="true" />
+    <div class="kind-card__body">
+      <div class="kind-card__title">{{ label }}</div>
+      <div class="kind-card__desc">{{ desc }}</div>
+    </div>
+  </button>
+</template>
+
+<style scoped>
+.kind-card {
+  position: relative;
+  min-height: 148px;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
+  background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--primary) / 28%);
+  border-radius: 14px;
+  box-shadow: 0 0 6px hsl(var(--primary) / 14%);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.kind-card:hover,
+.kind-card.is-active {
+  border-color: hsl(var(--primary) / 48%);
+  box-shadow: 0 0 10px hsl(var(--primary) / 20%);
+}
+
+.kind-card__particles {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0.85;
+}
+
+/* 右上角装饰区，文案用 padding-right 避让 */
+.kind-card__icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0.95;
+}
+
+.kind-card__body {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+  min-height: 148px;
+  padding: 18px 100px 20px 18px;
+}
+
+.kind-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.kind-card__desc {
+  font-size: 13px;
+  line-height: 1.55;
+  color: hsl(var(--muted-foreground));
+}
+</style>
diff --git a/apps/web-antd/src/views/system/menu/components/modal.vue b/apps/web-antd/src/views/system/menu/components/modal.vue
index 7507b85c..2f4edd00 100644
--- a/apps/web-antd/src/views/system/menu/components/modal.vue
+++ b/apps/web-antd/src/views/system/menu/components/modal.vue
@@ -1,61 +1,531 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+/**
+ * 菜单新增/编辑弹窗
+ * - 新增：pick 选类型 → form 填表 → sort 同级排序（可跳过）
+ * - 编辑：拉详情回填；保存后直接关闭
+ * - 切换父级 pid 时自动 next-sort 填入 sort
+ */
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import { createMenu, updateMenu } from '../api';
+import { Icon } from '#/components/icon';
+
+import {
+  createMenu,
+  getMenuInfo,
+  getMenuNextSort,
+  getMenuSiblings,
+  sortMenuSiblings,
+  updateMenu,
+} from '../api';
+import {
+  MENU_CREATE_KIND_OPTIONS,
+  MENU_TYPE_MAP,
+  isCatalogType,
+  menuKindFromType,
+} from '../config/constants';
 import { modalFormProps } from '../config/form';
-
-
+import MenuKindPickCard from './menu-kind-pick-card.vue';
 
 const isUpdate = ref(false);
 const gridApi = ref();
+/** pick | form | sort */
+const step = ref<'pick' | 'form' | 'sort'>('pick');
+const createKind = ref<'catalog' | 'menu'>('menu');
+/** 排序步：同级列表 */
+const siblingItems = ref<Record<string, any>[]>([]);
+const sortPid = ref(0);
+const highlightId = ref(0);
+/** 避免编辑回填 / 程序化改 pid 时误触发 next-sort */
+const skipPidNextSort = ref(false);
 
-const [Form, formApi] = useVbenForm(modalFormProps);
+/**
+ * 按当前 pid 同步目录的 component 可编辑状态
+ * 为什么：顶级必须 BasicLayout；二级可手动清空，避免嵌套多层布局壳
+ */
+async function syncCatalogComponentByPid(pid: number) {
+  const isTop = !(Number(pid) > 0);
+  const cur = await formApi.getValues();
+  const patch: Record<string, any> = {
+    type: 'catalog',
+    open_type: 'menu',
+    iframe_src: '',
+    link: '',
+  };
+  if (isTop) {
+    // 顶级必须布局壳
+    patch.component = 'BasicLayout';
+  } else if (cur.component == null) {
+    // 新建二级尚未设过：先给默认，用户可再手动清空
+    patch.component = 'BasicLayout';
+  }
+  // 二级且已是 '' / 自定义值：原样保留，不覆盖
+  await formApi.setValues(patch);
+  formApi.updateSchema([
+    {
+      fieldName: 'component',
+      componentProps: {
+        placeholder: isTop
+          ? '顶级目录固定 BasicLayout'
+          : '可手动清空；留空则不套布局组件',
+        disabled: isTop,
+      },
+    },
+  ]);
+}
+
+/**
+ * 按大类与打开方式同步 type，并清理互斥字段
+ */
+async function syncTypeFields(kind: 'catalog' | 'menu', openType = 'menu') {
+  if (kind === 'catalog') {
+    const cur = await formApi.getValues();
+    await syncCatalogComponentByPid(Number(cur.pid) || 0);
+    return;
+  }
+  const ot = openType || 'menu';
+  const patch: Record<string, any> = {
+    type: ot,
+    open_type: ot,
+  };
+  if (ot === 'menu') {
+    patch.iframe_src = '';
+    patch.link = '';
+    const cur = await formApi.getValues();
+    if (!cur.component || cur.component === 'BasicLayout') {
+      patch.component = '';
+    }
+    formApi.updateSchema([
+      {
+        fieldName: 'component',
+        componentProps: {
+          placeholder: '去掉 views/ 与 .vue，如 system/menu/index',
+          disabled: false,
+        },
+      },
+    ]);
+  } else if (ot === 'embedded') {
+    patch.component = '';
+    patch.link = '';
+  } else if (ot === 'link') {
+    patch.component = '';
+    patch.iframe_src = '';
+  }
+  await formApi.setValues(patch);
+}
+
+/** 父级变更时拉同级下一排序值（requestClient 已解包 result） */
+async function fillNextSort(pid: number) {
+  try {
+    const res = await getMenuNextSort(Number(pid) || 0);
+    await formApi.setValues({ sort: Number(res?.sort) || 0 });
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+const [Form, formApi] = useVbenForm({
+  ...modalFormProps,
+  handleValuesChange(values, fieldsChanged) {
+    if (
+      fieldsChanged?.includes('open_type') &&
+      createKind.value === 'menu' &&
+      step.value === 'form'
+    ) {
+      syncTypeFields('menu', String(values.open_type || 'menu'));
+    }
+    // 非编辑锁定场景：切父级自动填 sort = max+1
+    if (
+      fieldsChanged?.includes('pid') &&
+      step.value === 'form' &&
+      !skipPidNextSort.value
+    ) {
+      fillNextSort(Number(values.pid) || 0);
+    }
+    // 目录切换父级时：顶级锁 BasicLayout，二级解锁可清空
+    if (
+      fieldsChanged?.includes('pid') &&
+      step.value === 'form' &&
+      (createKind.value === 'catalog' || isCatalogType(values.type))
+    ) {
+      syncCatalogComponentByPid(Number(values.pid) || 0);
+    }
+  },
+});
+
+const modalTitle = computed(() => {
+  if (isUpdate.value) return '编辑菜单';
+  if (step.value === 'pick') return '新增菜单 · 选择类型';
+  if (step.value === 'sort') return '调整同级排序';
+  return createKind.value === 'catalog' ? '新增目录' : '新增菜单';
+});
+
+/** 底部按钮文案随步骤切换 */
+function applyFooterForStep(next: 'pick' | 'form' | 'sort', editing: boolean) {
+  if (editing) {
+    modalApi.setState({
+      showConfirmButton: true,
+      confirmText: '确定',
+      cancelText: '取消',
+    });
+    return;
+  }
+  if (next === 'pick') {
+    modalApi.setState({
+      showConfirmButton: true,
+      confirmText: '下一步',
+      cancelText: '取消',
+    });
+    return;
+  }
+  if (next === 'sort') {
+    modalApi.setState({
+      showConfirmButton: true,
+      confirmText: '完成',
+      cancelText: '跳过',
+    });
+    return;
+  }
+  modalApi.setState({
+    showConfirmButton: true,
+    confirmText: '确定',
+    cancelText: '上一步',
+  });
+}
+
+/** 选择类型后进入表单，并预填根级 sort */
+async function goToFormStep() {
+  step.value = 'form';
+  applyFooterForStep('form', false);
+  skipPidNextSort.value = true;
+  await formApi.reset();
+  await syncTypeFields(createKind.value, 'menu');
+  await fillNextSort(0);
+  skipPidNextSort.value = false;
+}
+
+/** 双击类型卡：选中该类型并直接进入下一步 */
+async function confirmPickKind(kind: 'catalog' | 'menu') {
+  createKind.value = kind;
+  await goToFormStep();
+}
+
+/** 进入同级排序步 */
+async function enterSortStep(pid: number, newId: number) {
+  sortPid.value = pid;
+  highlightId.value = newId;
+  step.value = 'sort';
+  applyFooterForStep('sort', false);
+  try {
+    const res = await getMenuSiblings(pid);
+    siblingItems.value = Array.isArray(res?.items) ? [...res.items] : [];
+  } catch (err) {
+    console.error(err);
+    siblingItems.value = [];
+  }
+}
+
+function moveSibling(index: number, dir: -1 | 1) {
+  const next = index + dir;
+  if (next < 0 || next >= siblingItems.value.length) return;
+  const list = [...siblingItems.value];
+  const tmp = list[index];
+  list[index] = list[next];
+  list[next] = tmp;
+  siblingItems.value = list;
+}
+
+async function submitSiblingSort() {
+  const items = siblingItems.value.map((row, i) => ({
+    id: Number(row.id),
+    sort: i,
+  }));
+  await sortMenuSiblings({ pid: sortPid.value, items });
+  message.success('排序已保存');
+  gridApi.value?.reload?.();
+  gridApi.value?.query?.();
+  modalApi.close();
+}
+
+function finishWithoutSort() {
+  gridApi.value?.reload?.();
+  gridApi.value?.query?.();
+  modalApi.close();
+}
+
+/** 用详情数据回填表单 */
+async function fillFromDetail(detail: Record<string, any>) {
+  skipPidNextSort.value = true;
+  const type = String(detail.type || 'menu');
+  const kind = menuKindFromType(type);
+  createKind.value = kind;
+  const openType = kind === 'catalog' ? 'menu' : type;
+  await formApi.setValues({
+    ...detail,
+    type,
+    open_type: openType,
+  });
+  await syncTypeFields(kind, openType);
+  skipPidNextSort.value = false;
+}
 
 const [Modal, modalApi] = useVbenModal({
   fullscreenButton: false,
   draggable: true,
   onCancel() {
+    if (!isUpdate.value && step.value === 'form') {
+      step.value = 'pick';
+      applyFooterForStep('pick', false);
+      return;
+    }
+    if (!isUpdate.value && step.value === 'sort') {
+      finishWithoutSort();
+      return;
+    }
     modalApi.close();
   },
   onConfirm: async () => {
+    if (!isUpdate.value && step.value === 'pick') {
+      await goToFormStep();
+      return;
+    }
+    if (!isUpdate.value && step.value === 'sort') {
+      modalApi.setState({ loading: true, confirmLoading: true });
+      try {
+        await submitSiblingSort();
+      } catch (err) {
+        console.error(err);
+      } finally {
+        modalApi.setState({ loading: false, confirmLoading: false });
+      }
+      return;
+    }
     const e = await formApi.validate();
     if (!e.valid) return;
-        const values = await formApi.getValues();
-        modalApi.setState({ loading: true, confirmLoading: true });
-        const submitApi = isUpdate.value ? updateMenu : createMenu;
-        submitApi(values)
-          .then(() => {
-            message.success('保存成功');
-            gridApi.value?.reload();
-            modalApi.close();
-          })
-          .finally(() => {
-            modalApi.setState({ loading: false, confirmLoading: false });
-          });
-      
-  },
-  onOpenChange(isOpen: boolean) {
-    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
-    if (isOpen) {
-      const { values, update } = modalApi.getData<Record<string, any>>();
-      if (values) {
-        isUpdate.value = update;
-        formApi.setValues(values);
+    const values = await formApi.getValues();
+    if (isCatalogType(values.type) || createKind.value === 'catalog') {
+      values.type = 'catalog';
+      const pid = Number(values.pid) || 0;
+      // 顶级目录强制 BasicLayout；二级目录保留用户手动值（可空）
+      if (pid === 0) {
+        values.component = 'BasicLayout';
+      } else {
+        values.component = String(values.component ?? '').trim();
       }
+    } else {
+      values.type = values.open_type || values.type || 'menu';
+    }
+    delete values.open_type;
+    modalApi.setState({ loading: true, confirmLoading: true });
+    try {
+      if (isUpdate.value) {
+        await updateMenu(values);
+        message.success('保存成功');
+        gridApi.value?.reload?.();
+        gridApi.value?.query?.();
+        modalApi.close();
+      } else {
+        const created = await createMenu(values);
+        // create 的 result 即 insertGetId
+        const newId = Number(created);
+        message.success('保存成功');
+        await enterSortStep(Number(values.pid) || 0, newId);
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      modalApi.setState({ loading: false, confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (!isOpen) {
+      step.value = 'pick';
+      createKind.value = 'menu';
+      siblingItems.value = [];
+      highlightId.value = 0;
+      formApi.reset();
+      return;
+    }
+    const data = modalApi.getData<Record<string, any>>() || {};
+    const { values, update } = data;
+    isUpdate.value = !!update;
+    if (update && values?.id) {
+      step.value = 'form';
+      applyFooterForStep('form', true);
+      modalApi.setState({ loading: true });
+      try {
+        const detail = await getMenuInfo(Number(values.id));
+        await fillFromDetail(detail || {});
+      } catch (err) {
+        console.error(err);
+        message.error('加载菜单详情失败');
+        modalApi.close();
+      } finally {
+        modalApi.setState({ loading: false });
+      }
+    } else {
+      step.value = 'pick';
+      createKind.value = 'menu';
+      formApi.reset();
+      applyFooterForStep('pick', false);
     }
   },
 });
+
+function typeLabel(type: string | undefined) {
+  return (MENU_TYPE_MAP[String(type || 'menu')] || MENU_TYPE_MAP.menu).label;
+}
 </script>
+
 <template>
-  <Modal
-    :title="`${isUpdate === true ? '编辑' : '新增'}菜单`"
-    class="w-[60%]"
-  >
-    <Form />
+  <Modal :title="modalTitle" class="w-[60%]">
+    <!-- 选类型：粒子 + Canvas 动效卡 -->
+    <div v-if="step === 'pick'" class="menu-pick">
+      <div class="menu-pick__hint">
+        单击选择类型，双击或点底部「下一步」进入填写
+      </div>
+      <div class="menu-pick__grid">
+        <MenuKindPickCard
+          v-for="opt in MENU_CREATE_KIND_OPTIONS"
+          :key="opt.value"
+          :kind="opt.value"
+          :label="opt.label"
+          :desc="opt.desc"
+          :active="createKind === opt.value"
+          @select="createKind = opt.value"
+          @confirm="confirmPickKind(opt.value)"
+        />
+      </div>
+    </div>
+    <!-- 同级排序 -->
+    <div v-else-if="step === 'sort'" class="menu-sort">
+      <div class="menu-sort__hint">
+        可调整同级菜单顺序；「完成」写入排序，「跳过」保持当前 sort
+      </div>
+      <ul class="menu-sort__list">
+        <li
+          v-for="(row, index) in siblingItems"
+          :key="row.id"
+          class="menu-sort__item"
+          :class="{ 'is-new': Number(row.id) === highlightId }"
+        >
+          <span class="menu-sort__idx">{{ index + 1 }}</span>
+          <Icon v-if="row.icon" :icon="row.icon" class="menu-sort__icon" />
+          <span class="menu-sort__title">{{ row.title }}</span>
+          <span class="menu-sort__type">{{ typeLabel(row.type) }}</span>
+          <div class="menu-sort__ops">
+            <Button
+              size="small"
+              type="text"
+              :disabled="index === 0"
+              @click="moveSibling(index, -1)"
+            >
+              上移
+            </Button>
+            <Button
+              size="small"
+              type="text"
+              :disabled="index >= siblingItems.length - 1"
+              @click="moveSibling(index, 1)"
+            >
+              下移
+            </Button>
+          </div>
+        </li>
+      </ul>
+      <div v-if="!siblingItems.length" class="menu-sort__empty">
+        暂无同级菜单
+      </div>
+    </div>
+    <Form v-else />
   </Modal>
 </template>
+
+<style scoped>
+.menu-pick__hint {
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: hsl(var(--muted-foreground));
+}
+
+.menu-pick__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.menu-sort__hint {
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: hsl(var(--muted-foreground));
+}
+
+.menu-sort__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 420px;
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+  list-style: none;
+}
+
+.menu-sort__item {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+  background: hsl(var(--card, var(--background)));
+  border: 1px solid hsl(var(--border));
+  border-radius: 10px;
+}
+
+.menu-sort__item.is-new {
+  border-color: hsl(var(--primary) / 40%);
+  box-shadow: 0 0 6px hsl(var(--primary) / 18%);
+}
+
+.menu-sort__idx {
+  width: 22px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+}
+
+.menu-sort__icon {
+  font-size: 16px;
+  color: hsl(var(--foreground));
+}
+
+.menu-sort__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
+.menu-sort__type {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.menu-sort__ops {
+  display: flex;
+  gap: 2px;
+}
+
+.menu-sort__empty {
+  padding: 24px;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+}
+</style>
diff --git a/apps/web-antd/src/views/system/menu/components/move-menu-modal.vue b/apps/web-antd/src/views/system/menu/components/move-menu-modal.vue
new file mode 100644
index 00000000..69fde42d
--- /dev/null
+++ b/apps/web-antd/src/views/system/menu/components/move-menu-modal.vue
@@ -0,0 +1,320 @@
+<script lang="ts" setup>
+/**
+ * 菜单移动弹窗：把其它子菜单迁到当前父级（或指定目标父级）
+ * 流程：选菜单 → 预览角色授权 diff → 确认执行（补新父 / 撤孤儿旧父）
+ */
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Empty,
+  Form,
+  FormItem,
+  Table,
+  TreeSelect,
+  message,
+} from 'ant-design-vue';
+
+import { getMenuTreeOptionSelect, moveMenu, previewMoveMenu } from '../api';
+
+/** 预览里单条角色授权变更 */
+interface RoleDiffRow {
+  role_id: number;
+  role_name: string;
+  add_menus: { id: number; title: string }[];
+  revoke_menus: { id: number; title: string }[];
+}
+
+const targetPid = ref<number>(0);
+const treeOptions = ref<any[]>([]);
+/** 可选迁入的菜单（扁平，排除目标自身与其子孙） */
+const candidateMenus = ref<
+  { id: number; title: string; pid: number; pathLabel: string }[]
+>([]);
+const checkedIds = ref<number[]>([]);
+const previewed = ref(false);
+const previewLoading = ref(false);
+const roleDiffs = ref<RoleDiffRow[]>([]);
+const moveSummary = ref<{ move_count: number; role_count: number } | null>(
+  null,
+);
+const onSuccess = ref<(() => void) | null>(null);
+/** 从行操作带入的目标父级标题（仅展示） */
+const targetTitle = ref('');
+
+const checkedCount = computed(() => checkedIds.value.length);
+
+/**
+ * 把树压平为候选列表，并拼路径文案；排除 target 及其子孙（迁到自身/子孙会成环）
+ */
+function flattenCandidates(
+  nodes: any[],
+  targetId: number,
+  ancestors: string[] = [],
+  excludeIds: Set<number> = new Set(),
+): { id: number; title: string; pid: number; pathLabel: string }[] {
+  const result: {
+    id: number;
+    title: string;
+    pid: number;
+    pathLabel: string;
+  }[] = [];
+  for (const node of nodes || []) {
+    const id = Number(node.id);
+    const title = String(node.title || '');
+    const pathLabel = [...ancestors, title].filter(Boolean).join(' → ');
+    const nextExclude = new Set(excludeIds);
+    if (id === targetId) {
+      nextExclude.add(id);
+      collectDescendantIds(node, nextExclude);
+    }
+    if (!nextExclude.has(id) && id !== 0) {
+      result.push({
+        id,
+        title,
+        pid: Number(node.pid ?? 0),
+        pathLabel,
+      });
+    }
+    if (Array.isArray(node.children) && node.children.length > 0) {
+      result.push(
+        ...flattenCandidates(
+          node.children,
+          targetId,
+          [...ancestors, title],
+          nextExclude,
+        ),
+      );
+    }
+  }
+  return result;
+}
+
+/** 收集某节点全部子孙 id，用于排除成环候选 */
+function collectDescendantIds(node: any, bag: Set<number>) {
+  for (const child of node.children || []) {
+    bag.add(Number(child.id));
+    collectDescendantIds(child, bag);
+  }
+}
+
+/** 把树下拉里的「根目录」保留，供目标父级选择 */
+function normalizeTreeOptions(list: any[]): any[] {
+  return (list || []).map((item) => ({
+    ...item,
+    value: item.id,
+    label: item.title,
+    children: item.children ? normalizeTreeOptions(item.children) : undefined,
+  }));
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    if (!previewed.value) {
+      message.warning('请先预览授权变更后再确认执行');
+      return;
+    }
+    if (checkedIds.value.length === 0) {
+      message.error('请勾选要移动的菜单');
+      return;
+    }
+    modalApi.setState({ confirmLoading: true });
+    try {
+      await moveMenu({
+        target_pid: Number(targetPid.value),
+        menu_ids: checkedIds.value,
+      });
+      message.success('移动成功');
+      onSuccess.value?.();
+      modalApi.close();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      modalApi.setState({ confirmLoading: false });
+    }
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        target?: { id: number; title?: string };
+        onSuccess?: () => void;
+      }>();
+      onSuccess.value = data?.onSuccess ?? null;
+      targetPid.value = Number(data?.target?.id ?? 0);
+      targetTitle.value = String(data?.target?.title || '');
+      checkedIds.value = [];
+      previewed.value = false;
+      roleDiffs.value = [];
+      moveSummary.value = null;
+      loadTree();
+    } else {
+      onSuccess.value = null;
+      candidateMenus.value = [];
+      checkedIds.value = [];
+      previewed.value = false;
+      roleDiffs.value = [];
+    }
+  },
+});
+
+/** 拉菜单树：目标下拉 + 候选勾选列表 */
+async function loadTree() {
+  try {
+    const res = await getMenuTreeOptionSelect();
+    const list = Array.isArray(res) ? res : res?.result || res || [];
+    treeOptions.value = normalizeTreeOptions(list);
+    candidateMenus.value = flattenCandidates(list, Number(targetPid.value));
+  } catch (err) {
+    console.error(err);
+    treeOptions.value = [];
+    candidateMenus.value = [];
+  }
+}
+
+/** 目标父级变更时重算候选，并清空预览（避免误用旧 diff） */
+async function onTargetChange() {
+  previewed.value = false;
+  roleDiffs.value = [];
+  moveSummary.value = null;
+  checkedIds.value = [];
+  try {
+    const res = await getMenuTreeOptionSelect();
+    const list = Array.isArray(res) ? res : res?.result || res || [];
+    candidateMenus.value = flattenCandidates(list, Number(targetPid.value));
+  } catch {
+    candidateMenus.value = [];
+  }
+}
+
+/** 调用后端 preview-move，展示角色授权 diff */
+async function handlePreview() {
+  if (checkedIds.value.length === 0) {
+    message.error('请勾选要移动的菜单');
+    return;
+  }
+  previewLoading.value = true;
+  try {
+    const res = await previewMoveMenu({
+      target_pid: Number(targetPid.value),
+      menu_ids: checkedIds.value,
+    });
+    const data = res?.result ?? res ?? {};
+    roleDiffs.value = Array.isArray(data.role_diffs) ? data.role_diffs : [];
+    moveSummary.value = data.summary || {
+      move_count: (data.moves || []).length,
+      role_count: roleDiffs.value.length,
+    };
+    previewed.value = true;
+    if ((data.moves || []).length === 0) {
+      message.info('所选菜单已在目标父级下，无需移动');
+    }
+  } catch (err) {
+    console.error(err);
+    previewed.value = false;
+  } finally {
+    previewLoading.value = false;
+  }
+}
+
+function formatMenus(list: { id: number; title: string }[]) {
+  if (!list || list.length === 0) return '—';
+  return list.map((m) => m.title).join('、');
+}
+
+const diffColumns = [
+  { title: '角色', dataIndex: 'role_name', key: 'role_name', width: 140 },
+  { title: '新增授权（父级链）', key: 'add', ellipsis: true },
+  { title: '撤销授权（孤儿旧父）', key: 'revoke', ellipsis: true },
+];
+</script>
+
+<template>
+  <Modal title="移动子菜单" class="w-[720px]">
+    <Form layout="vertical">
+      <FormItem label="目标父级菜单" required>
+        <TreeSelect
+          v-model:value="targetPid"
+          :tree-data="treeOptions"
+          :field-names="{ label: 'title', value: 'id', children: 'children' }"
+          placeholder="请选择目标父级（可选根目录）"
+          tree-default-expand-all
+          show-search
+          tree-node-filter-prop="title"
+          class="w-full"
+          @change="onTargetChange"
+        />
+        <div v-if="targetTitle" class="mt-1 text-xs text-muted-foreground">
+          当前行：{{ targetTitle }}
+        </div>
+      </FormItem>
+      <FormItem :label="`迁入的子菜单（已选 ${checkedCount}）`" required>
+        <div class="max-h-52 overflow-y-auto rounded border border-border p-2">
+          <Empty
+            v-if="candidateMenus.length === 0"
+            description="暂无可迁入菜单"
+          />
+          <Checkbox.Group
+            v-else
+            v-model:value="checkedIds"
+            class="flex w-full flex-col gap-1"
+            @change="previewed = false"
+          >
+            <Checkbox
+              v-for="item in candidateMenus"
+              :key="item.id"
+              :value="item.id"
+              class="!ml-0"
+            >
+              <span class="text-sm">{{ item.pathLabel }}</span>
+            </Checkbox>
+          </Checkbox.Group>
+        </div>
+      </FormItem>
+      <div class="mb-3">
+        <Button type="default" :loading="previewLoading" @click="handlePreview">
+          预览授权变更
+        </Button>
+      </div>
+      <Alert
+        v-if="previewed"
+        type="info"
+        show-icon
+        class="mb-3"
+        :message="`将移动 ${moveSummary?.move_count ?? 0} 个菜单，影响 ${moveSummary?.role_count ?? 0} 个角色`"
+      />
+      <Table
+        v-if="previewed"
+        size="small"
+        :pagination="false"
+        :columns="diffColumns"
+        :data-source="roleDiffs"
+        :locale="{ emptyText: '本次移动无需调整角色授权' }"
+        row-key="role_id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'add'">
+            {{ formatMenus(record.add_menus) }}
+          </template>
+          <template v-else-if="column.key === 'revoke'">
+            {{ formatMenus(record.revoke_menus) }}
+          </template>
+        </template>
+      </Table>
+      <Alert
+        v-if="!previewed"
+        type="warning"
+        show-icon
+        message="请先预览授权变更，确认无误后再点确定执行"
+      />
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/menu/config/constants.ts b/apps/web-antd/src/views/system/menu/config/constants.ts
new file mode 100644
index 00000000..eeebfc9f
--- /dev/null
+++ b/apps/web-antd/src/views/system/menu/config/constants.ts
@@ -0,0 +1,42 @@
+/**
+ * 菜单类型常量（对齐 Vben catalog / menu / embedded / link）
+ */
+
+/** 新建第一步：目录 or 菜单（菜单再细分为组件/内链/外链） */
+export const MENU_CREATE_KIND_OPTIONS = [
+  {
+    value: 'catalog',
+    label: '目录',
+    desc: '父级菜单，组件固定为 BasicLayout，用于承载子菜单',
+  },
+  {
+    value: 'menu',
+    label: '菜单',
+    desc: '叶子页面：可选组件、内链或外链',
+  },
+] as const;
+
+/** 菜单打开方式（仅「菜单」大类下使用） */
+export const MENU_OPEN_TYPE_OPTIONS = [
+  { label: '组件', value: 'menu' },
+  { label: '内链', value: 'embedded' },
+  { label: '外链', value: 'link' },
+];
+
+/** 列表/卡片类型 Tag */
+export const MENU_TYPE_MAP: Record<string, { color: string; label: string }> = {
+  catalog: { label: '目录', color: 'processing' },
+  menu: { label: '组件', color: 'default' },
+  embedded: { label: '内链', color: 'success' },
+  link: { label: '外链', color: 'warning' },
+};
+
+/** 是否为目录大类 */
+export function isCatalogType(type: string | undefined) {
+  return type === 'catalog';
+}
+
+/** 目录/菜单大类（编辑时锁定） */
+export function menuKindFromType(type: string | undefined): 'catalog' | 'menu' {
+  return type === 'catalog' ? 'catalog' : 'menu';
+}
diff --git a/apps/web-antd/src/views/system/menu/config/form.ts b/apps/web-antd/src/views/system/menu/config/form.ts
index 6b0f7ebf..13651396 100644
--- a/apps/web-antd/src/views/system/menu/config/form.ts
+++ b/apps/web-antd/src/views/system/menu/config/form.ts
@@ -2,16 +2,22 @@ import type { VbenFormProps } from '#/adapter/form';
 
 import { getMenuTreeOptionSelect } from '#/views/system/menu/api';
 
+import { MENU_OPEN_TYPE_OPTIONS } from './constants';
+
+/**
+ * 菜单新增/编辑表单
+ * - type=catalog 且顶级(pid=0)：component 只读 BasicLayout
+ * - type=catalog 且二级(pid≠0)：可手动清空 component，避免嵌套多层布局
+ * - type=menu/embedded/link：由「打开方式」切换显隐
+ */
 export const modalFormProps: VbenFormProps = {
-  wrapperClass: 'grid-cols-12', // 24栅格,
+  wrapperClass: 'grid-cols-12',
   commonConfig: {
     formItemClass: 'col-span-6',
-    // 所有表单项
     componentProps: {
       class: 'w-full',
     },
   },
-  // handleSubmit: onSubmit,
   layout: 'horizontal',
   schema: [
     {
@@ -23,6 +29,31 @@ export const modalFormProps: VbenFormProps = {
         triggerFields: ['id'],
       },
     },
+    {
+      component: 'VbenInput',
+      fieldName: 'type',
+      label: '类型',
+      defaultValue: 'menu',
+      dependencies: {
+        show: false,
+        triggerFields: ['type'],
+      },
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: MENU_OPEN_TYPE_OPTIONS,
+        optionType: 'button',
+        buttonStyle: 'solid',
+      },
+      fieldName: 'open_type',
+      label: '打开方式',
+      defaultValue: 'menu',
+      dependencies: {
+        show: (values) => values.type !== 'catalog',
+        triggerFields: ['type'],
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
@@ -34,41 +65,30 @@ export const modalFormProps: VbenFormProps = {
     },
     {
       component: 'ApiTreeSelect',
-      // 对应组件的参数
       componentProps: {
         childrenField: 'children',
         labelField: 'title',
         valueField: 'id',
-        // 菜单接口
         api: getMenuTreeOptionSelect,
       },
       defaultValue: 0,
       fieldName: 'pid',
       label: '父级菜单',
-      rules: 'required',
+      rules: 'selectRequired',
     },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入菜单图标',
+        placeholder: '请输入菜单图标，如 lucide:layout-dashboard',
       },
       fieldName: 'icon',
       label: '菜单图标',
       rules: 'required',
     },
-    // {
-    //   component: 'IconPicker',
-    //   componentProps: {
-    //     placeholder: '请输入菜单图标',
-    //   },
-    //   fieldName: 'icon',
-    //   label: '菜单图标',
-    //   rules: 'required',
-    // },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入路由名称',
+        placeholder: '全局唯一，如 SystemMenu',
       },
       fieldName: 'name',
       label: '路由名称',
@@ -77,7 +97,7 @@ export const modalFormProps: VbenFormProps = {
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入访问路由',
+        placeholder: '顶级以 / 开头，子级可用相对路径',
       },
       fieldName: 'path',
       label: '访问路由',
@@ -93,37 +113,92 @@ export const modalFormProps: VbenFormProps = {
       label: '排序',
       rules: 'required',
     },
+    {
+      component: 'VbenInput',
+      // 顶级目录只读 BasicLayout；二级目录可清空；组件菜单必填可编辑
+      componentProps: (values: Record<string, any>) => {
+        const isCatalog = values?.type === 'catalog';
+        const isTopCatalog = isCatalog && !(Number(values?.pid) > 0);
+        return {
+          placeholder: isTopCatalog
+            ? '顶级目录固定 BasicLayout'
+            : isCatalog
+              ? '可手动清空；留空则不套布局组件'
+              : '去掉 views/ 与 .vue，如 system/menu/index',
+          disabled: isTopCatalog,
+        };
+      },
+      defaultValue: 'BasicLayout',
+      fieldName: 'component',
+      label: '组件地址',
+      dependencies: {
+        show: (values) => values.type === 'catalog' || values.type === 'menu',
+        rules: (values) => (values.type === 'menu' ? 'required' : null),
+        // pid 变化时刷新 disabled / placeholder（二级目录可编辑）
+        triggerFields: ['type', 'pid'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '内嵌页面完整 URL',
+      },
+      fieldName: 'iframe_src',
+      label: '内链地址',
+      dependencies: {
+        show: (values) => values.type === 'embedded',
+        rules: (values) => (values.type === 'embedded' ? 'required' : null),
+        triggerFields: ['type'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '外链完整 URL，将在新窗口打开',
+      },
+      fieldName: 'link',
+      label: '外链地址',
+      dependencies: {
+        show: (values) => values.type === 'link',
+        rules: (values) => (values.type === 'link' ? 'required' : null),
+        triggerFields: ['type'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '父级重定向到子路径（可选）',
+      },
+      fieldName: 'redirect',
+      label: '重定向地址',
+      dependencies: {
+        show: (values) => values.type === 'catalog',
+        triggerFields: ['type'],
+      },
+    },
     {
       component: 'RadioGroup',
       componentProps: {
         options: [
-          {
-            label: '开启',
-            value: 0,
-          },
-          {
-            label: '关闭',
-            value: 1,
-          },
+          { label: '开启', value: 0 },
+          { label: '关闭', value: 1 },
         ],
       },
       defaultValue: 1,
       fieldName: 'keep_alive',
       label: '缓存',
       rules: 'required',
+      dependencies: {
+        show: (values) => values.type === 'menu' || values.type === 'embedded',
+        triggerFields: ['type'],
+      },
     },
     {
       component: 'RadioGroup',
       componentProps: {
         options: [
-          {
-            label: '展示',
-            value: 0,
-          },
-          {
-            label: '隐藏',
-            value: 1,
-          },
+          { label: '展示', value: 0 },
+          { label: '隐藏', value: 1 },
         ],
       },
       defaultValue: 0,
@@ -135,45 +210,30 @@ export const modalFormProps: VbenFormProps = {
       component: 'RadioGroup',
       componentProps: {
         options: [
-          {
-            label: '是',
-            value: 0,
-          },
-          {
-            label: '否',
-            value: 1,
-          },
+          { label: '是', value: 0 },
+          { label: '否', value: 1 },
         ],
       },
       defaultValue: 1,
       fieldName: 'affix_tab',
       label: '是否置顶',
       rules: 'required',
-    },
-    {
-      component: 'VbenInput',
-      componentProps: {
-        placeholder: '请输入组件地址',
+      dependencies: {
+        show: (values) => values.type !== 'link',
+        triggerFields: ['type'],
       },
-      defaultValue: 'BasicLayout',
-      fieldName: 'component',
-      label: '组件地址',
     },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入重定向地址',
-      },
-      fieldName: 'redirect',
-      label: '重定向地址',
-    },
-    {
-      component: 'VbenInput',
-      componentProps: {
-        placeholder: '请输入携带参数',
+        placeholder: '默认查询参数（可选）',
       },
       fieldName: 'query',
       label: '携带参数',
+      dependencies: {
+        show: (values) => values.type === 'menu' || values.type === 'embedded',
+        triggerFields: ['type'],
+      },
     },
   ],
   showDefaultActions: false,
diff --git a/apps/web-antd/src/views/system/menu/config/search.ts b/apps/web-antd/src/views/system/menu/config/search.ts
index 2f579aeb..61f397ef 100644
--- a/apps/web-antd/src/views/system/menu/config/search.ts
+++ b/apps/web-antd/src/views/system/menu/config/search.ts
@@ -1,47 +1,84 @@
 import type { VbenFormProps } from '#/adapter/form';
 
+import { MENU_OPEN_TYPE_OPTIONS, MENU_TYPE_MAP } from './constants';
+
+/** 搜索：含目录类型 + 打开方式细分 */
+const TYPE_SEARCH_OPTIONS = [
+  { label: MENU_TYPE_MAP.catalog.label, value: 'catalog' },
+  ...MENU_OPEN_TYPE_OPTIONS.map((o) => ({
+    label: o.label,
+    value: o.value,
+  })),
+];
+
 export const formOptions: VbenFormProps = {
-  // 默认展开
   collapsed: false,
+  commonConfig: {
+    labelWidth: 70,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  wrapperClass:
+    'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
   schema: [
     {
-      component: 'VbenInput',
+      component: 'Input',
       componentProps: {
+        allowClear: true,
         placeholder: '输入标题',
       },
       defaultValue: '',
       fieldName: 'title',
       label: '菜单标题',
     },
-    // {
-    //   component: 'VbenSelect',
-    //   componentProps: {
-    //     allowClear: true,
-    //     filterOption: true,
-    //     showSearch: true,
-    //     options: [
-    //       {
-    //         label: '超管',
-    //         value: 1,
-    //       },
-    //       {
-    //         label: '菜单',
-    //         value: 2,
-    //       },
-    //     ],
-    //     placeholder: '请选择',
-    //   },
-    //   fieldName: 'role_id',
-    //   label: '角色',
-    // },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: TYPE_SEARCH_OPTIONS,
+        placeholder: '请选择',
+      },
+      fieldName: 'type',
+      label: '类型',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '访问路由',
+      },
+      defaultValue: '',
+      fieldName: 'path',
+      label: '路由',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '路由 Name',
+      },
+      defaultValue: '',
+      fieldName: 'name',
+      label: '路由名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '展示', value: 0 },
+          { label: '隐藏', value: 1 },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'hide_in_menu',
+      label: '是否展示',
+    },
   ],
-  // 控制表单是否显示折叠按钮
   showCollapseButton: true,
   submitButtonOptions: {
     content: '查询',
   },
-  // 是否在字段值改变时提交表单
-  submitOnChange: true,
-  // 按下回车时是否提交表单
-  submitOnEnter: false,
+  submitOnEnter: true,
 };
diff --git a/apps/web-antd/src/views/system/menu/config/table.ts b/apps/web-antd/src/views/system/menu/config/table.ts
index c4c641dd..1d5b7ef0 100644
--- a/apps/web-antd/src/views/system/menu/config/table.ts
+++ b/apps/web-antd/src/views/system/menu/config/table.ts
@@ -30,8 +30,9 @@ export const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { type: 'checkbox', width: 60 },
     { width: 60, treeNode: true },
-    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'id', align: 'left', title: 'ID', width: 80 },
     { field: 'title', align: 'left', title: '菜单名称' },
+    { field: 'type', title: '类型', width: 90, slots: { default: 'type' } },
     { field: 'icon', title: '图标', slots: { default: 'icon' } },
     { field: 'path', title: '路由' },
     { field: 'name', title: '路由Name' },
@@ -51,7 +52,7 @@ export const gridOptions: VxeGridProps<RowType> = {
       align: 'right',
       title: '操作',
       slots: { default: 'action' },
-      width: 200,
+      width: 280,
     },
   ],
   treeConfig: {
diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index 8d9d6464..8e380e85 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/apps/web-antd/src/views/system/menu/index.vue
@@ -1,59 +1,198 @@
 <script lang="ts" setup>
+/**
+ * 菜单管理：树形列表 + 卡片双视图；支持移动子菜单（预览角色授权后执行）
+ * 搜索区与视图切换分行；首屏按 viewMode 主动拉数
+ */
 import type { VxeGridListeners } from '#/adapter/vxe-table';
 
-import { ref } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, Tag, message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { Icon } from '#/components/icon';
 import { TableAction } from '#/components/table-action';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
 
-import { deleteMenu } from './api';
+import { deleteMenu, getMenuList } from './api';
 import AuthRole from './components/auth-role.vue';
 import FormModalDemo from './components/modal.vue';
+import MenuCardList from './components/MenuCardList.vue';
+import MoveMenuModal from './components/move-menu-modal.vue';
+import { MENU_TYPE_MAP } from './config/constants';
 import { formOptions } from './config/search';
-import { gridOptions } from './config/table';
+import { gridOptions as baseGridOptions } from './config/table';
+
+/** 列表类型 Tag */
+function typeMeta(type: string | undefined) {
+  return MENU_TYPE_MAP[String(type || 'menu')] || MENU_TYPE_MAP.menu;
+}
+
+defineOptions({ name: 'SystemMenu' });
 
 const hasTopTableDropDownActions = ref(false);
+/** 列表/卡片双视图偏好 */
+const viewMode = useViewMode('menu-view-mode');
+/** 卡片用扁平全量（list 接口已返回三级扁平） */
+const cardItems = ref<Record<string, any>[]>([]);
+const cardLoading = ref(false);
+const searchKeyword = ref('');
 
 const gridEvents: VxeGridListeners<any> = {
   checkboxChange() {
-    // eslint-disable-next-line no-use-before-define
     const records = gridApi.grid.getCheckboxRecords();
     hasTopTableDropDownActions.value = records.length > 0;
   },
   checkboxAll() {
-    // eslint-disable-next-line no-use-before-define
     const records = gridApi.grid.getCheckboxRecords();
     hasTopTableDropDownActions.value = records.length > 0;
   },
 };
 
+function collectDefaultSearchValues(): Record<string, any> {
+  const values: Record<string, any> = {};
+  for (const item of formOptions.schema ?? []) {
+    if (item.fieldName && item.defaultValue !== undefined) {
+      values[item.fieldName] = item.defaultValue;
+    }
+  }
+  return values;
+}
+
+const searchValues = ref<Record<string, any>>(collectDefaultSearchValues());
+
+async function readLiveSearchValues(): Promise<Record<string, any>> {
+  try {
+    await nextTick();
+    const live = await searchFormApi.getValues();
+    return { ...(live || {}) };
+  } catch {
+    return { ...searchValues.value };
+  }
+}
+
+const [SearchForm, searchFormApi] = useVbenForm({
+  ...formOptions,
+  handleSubmit: async () => {
+    searchValues.value = await readLiveSearchValues();
+    searchKeyword.value = String(searchValues.value.title || '').trim();
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    } else {
+      await loadCardItems();
+    }
+  },
+  handleReset: async () => {
+    searchValues.value = collectDefaultSearchValues();
+    searchKeyword.value = '';
+    await searchFormApi.setValues(searchValues.value);
+    if (viewMode.value === 'list') {
+      gridApi.reload();
+    } else {
+      await loadCardItems();
+    }
+  },
+});
+
 const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions,
-  gridOptions,
+  gridOptions: {
+    ...baseGridOptions,
+    toolbarConfig: { ...baseGridOptions.toolbarConfig, search: false },
+    proxyConfig: {
+      ajax: {
+        query: async ({
+          page,
+        }: {
+          page: { currentPage: number; pageSize: number };
+        }) => {
+          searchValues.value = await readLiveSearchValues();
+          searchKeyword.value = String(searchValues.value.title || '').trim();
+          return await getMenuList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...searchValues.value,
+          });
+        },
+      },
+    },
+  },
   gridEvents,
 });
 
+/** 卡片模式拉全量扁平菜单（pageSize 放大，树不深） */
+async function loadCardItems() {
+  cardLoading.value = true;
+  try {
+    searchValues.value = await readLiveSearchValues();
+    searchKeyword.value = String(searchValues.value.title || '').trim();
+    const res = await getMenuList({
+      page: 1,
+      pageSize: 500,
+      ...searchValues.value,
+    });
+    const data = res?.items ? res : res?.result || res || {};
+    cardItems.value = Array.isArray(data.items) ? data.items : [];
+  } catch (err) {
+    console.error(err);
+    cardItems.value = [];
+  } finally {
+    cardLoading.value = false;
+  }
+}
+
+/** 首屏按当前视图主动拉数（localStorage 记住 card 时 watch 不会触发） */
+onMounted(async () => {
+  if (viewMode.value === 'card') {
+    await loadCardItems();
+  } else {
+    await nextTick();
+    gridApi.query();
+  }
+});
+
+watch(viewMode, async (mode) => {
+  if (mode === 'card') {
+    await loadCardItems();
+  } else {
+    await nextTick();
+    gridApi.query();
+  }
+});
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: FormModalDemo,
 });
 
+const [MoveModal, moveModalApi] = useVbenModal({
+  connectedComponent: MoveMenuModal,
+});
+
 const showModal = (data = {}, isUpdate = false) => {
   formModalApi.setData({
-    // 表单值
     values: data,
     update: isUpdate,
-    gridApi,
+    gridApi: {
+      query: () => refreshAll(),
+      reload: () => refreshAll(),
+    },
   });
   formModalApi.open();
 };
 
+/** 列表/卡片统一刷新 */
+async function refreshAll() {
+  if (viewMode.value === 'card') {
+    await loadCardItems();
+  } else {
+    gridApi.query();
+  }
+}
+
 const deleteApi = (row: any) => {
-  let ids = [];
+  let ids: any[] = [];
   if (row) {
     ids.push(row);
   } else {
@@ -61,7 +200,7 @@ const deleteApi = (row: any) => {
   }
   deleteMenu({ ids }).then(() => {
     message.success('删除成功!');
-    gridApi.query();
+    refreshAll();
   });
 };
 
@@ -73,19 +212,85 @@ const collapseAll = () => {
   gridApi.grid?.setAllTreeExpand(false);
 };
 
-/** 菜单反向授权：打开角色勾选抽屉 */
 const authRoleRef = ref();
 const handleAuthRole = (record: any) => {
   authRoleRef.value.setData({ record });
   authRoleRef.value.open();
 };
+
+/** 打开移动弹窗：以当前行为目标父级 */
+const handleMoveMenus = (row: Record<string, any>) => {
+  moveModalApi.setData({
+    target: { id: row.id, title: row.title },
+    onSuccess: () => refreshAll(),
+  });
+  moveModalApi.open();
+};
+
+/** 行操作定义：列表 TableAction / 卡片 CardActions 共用 */
+function buildRowActions(row: Record<string, any>) {
+  return {
+    actions: [
+      {
+        label: '编辑',
+        type: 'link' as const,
+        icon: 'uil:edit',
+        size: 'small' as const,
+        onClick: () => showModal(row, true),
+      },
+      {
+        label: '授权角色',
+        type: 'link' as const,
+        icon: 'ant-design:team-outlined',
+        size: 'small' as const,
+        onClick: () => handleAuthRole(row),
+      },
+      {
+        label: '移动子菜单',
+        type: 'link' as const,
+        icon: 'ant-design:apartment-outlined',
+        size: 'small' as const,
+        onClick: () => handleMoveMenus(row),
+      },
+    ],
+    dropDownActions: [
+      {
+        label: '删除',
+        type: 'link' as const,
+        icon: 'ant-design:delete-outlined',
+        size: 'small' as const,
+        popConfirm: {
+          title: '确定删除吗？',
+          confirm: () => deleteApi(row.id),
+        },
+      },
+    ],
+  };
+}
+
+const showListToolbar = computed(() => viewMode.value === 'list');
 </script>
 
 <template>
   <Page auto-content-height title="菜单管理">
     <FormModal />
+    <MoveModal />
     <AuthRole ref="authRoleRef" />
-    <Grid>
+    <!-- 顶部独立搜索区（与视图切换脱开） -->
+    <div
+      class="mb-3 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+    >
+      <SearchForm />
+    </div>
+    <!-- 工具行：视图切换 + 卡片态新增（当前层级操作在下方面包屑栏） -->
+    <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+      <ViewModeSwitch v-model="viewMode" />
+      <Button v-if="viewMode === 'card'" type="primary" @click="showModal()">
+        <Icon icon="ant-design:plus-outlined" class="mr-1" />
+        新增
+      </Button>
+    </div>
+    <Grid v-if="viewMode === 'list'">
       <template #toolbar-actions>
         <TableAction
           :actions="[
@@ -93,19 +298,18 @@ const handleAuthRole = (record: any) => {
               label: '新增',
               type: 'primary',
               icon: 'ant-design:plus-outlined',
-              // auth: ['超级菜单', 'sys:user:save'],
               onClick: showModal.bind(null),
             },
             {
               label: '展开全部',
               type: 'primary',
-              // auth: ['超级菜单', 'sys:user:save'],
+              ifShow: showListToolbar,
               onClick: expandAll.bind(null),
             },
             {
               label: '收起全部',
               type: 'primary',
-              // auth: ['超级菜单', 'sys:user:save'],
+              ifShow: showListToolbar,
               onClick: collapseAll.bind(null),
             },
           ]"
@@ -114,7 +318,6 @@ const handleAuthRole = (record: any) => {
               label: '删除',
               icon: 'ant-design:delete-outlined',
               ifShow: hasTopTableDropDownActions,
-              // auth: ['超级菜单', 'sys:user:save'],
               popConfirm: {
                 title: '确定删除吗？',
                 confirm: deleteApi.bind(null, false),
@@ -133,41 +336,33 @@ const handleAuthRole = (record: any) => {
       <template #icon="{ row }">
         <Icon :icon="row.icon" />
       </template>
+      <template #type="{ row }">
+        <Tag :color="typeMeta(row.type).color">{{
+          typeMeta(row.type).label
+        }}</Tag>
+      </template>
       <template #toolbar-tools></template>
       <template #action="{ row }">
         <TableAction
-          :actions="[
-            {
-              label: '编辑',
-              type: 'link',
-              icon: 'uil:edit',
-              size: 'small',
-              // auth: ['admin', 'sys:role:detail'],
-              onClick: showModal.bind(null, row, true),
-            },
-            {
-              label: '授权角色',
-              type: 'link',
-              icon: 'ant-design:team-outlined',
-              size: 'small',
-              onClick: handleAuthRole.bind(null, row),
-            },
-          ]"
-          :drop-down-actions="[
-            {
-              label: '删除',
-              type: 'link',
-              icon: 'ant-design:delete-outlined',
-              size: 'small',
-              // auth: ['admin', 'sys:role:detail'],
-              popConfirm: {
-                title: '确定删除吗？',
-                confirm: deleteApi.bind(null, row.id),
-              },
-            },
-          ]"
+          :actions="buildRowActions(row).actions"
+          :drop-down-actions="buildRowActions(row).dropDownActions"
         />
       </template>
     </Grid>
+    <div v-else class="menu-card-wrap">
+      <!-- 保持挂载，避免 loading 卸载导致本地层级记忆丢失 -->
+      <div
+        v-show="cardLoading"
+        class="py-16 text-center text-[hsl(var(--muted-foreground))]"
+      >
+        加载中…
+      </div>
+      <MenuCardList
+        v-show="!cardLoading"
+        :items="cardItems"
+        :keyword="searchKeyword"
+        :build-row-actions="buildRowActions"
+      />
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/region/index.vue b/apps/web-antd/src/views/system/region/index.vue
index 4941e818..8a732e63 100644
--- a/apps/web-antd/src/views/system/region/index.vue
+++ b/apps/web-antd/src/views/system/region/index.vue
@@ -88,9 +88,7 @@ const childListSubtitle = computed(() => {
 });
 
 /** 新增子级的目标层级：省下加市(2)，市下加区(3) */
-const createChildLevel = computed(() =>
-  isDrilledToCity.value ? 3 : 2,
-);
+const createChildLevel = computed(() => (isDrilledToCity.value ? 3 : 2));
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: FormModalDemo,
@@ -131,11 +129,7 @@ watch([selectedLevel1Id, selectedLevel2Id], () => {
   syncChildGrid();
 });
 watch(childKeyword, (val) => {
-  writeChildKeyword(
-    selectedLevel1Id.value,
-    selectedLevel2Id.value,
-    val,
-  );
+  writeChildKeyword(selectedLevel1Id.value, selectedLevel2Id.value, val);
 });
 
 function refresh() {
@@ -367,7 +361,9 @@ function canDrillRow(row: RegionRow) {
             <div
               class="flex flex-nowrap items-center justify-between gap-3 border-b border-border pb-3"
             >
-              <div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+              <div
+                class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden"
+              >
                 <Button
                   v-if="isDrilledToCity"
                   class="shrink-0"
@@ -504,8 +500,3 @@ function canDrillRow(row: RegionRow) {
     </div>
   </Page>
 </template>
-
-
-
-
-
diff --git a/apps/web-antd/src/views/system/salesperson-dashboard/components/CompareTrendChart.vue b/apps/web-antd/src/views/system/salesperson-dashboard/components/CompareTrendChart.vue
index da4a891e..85c0283a 100644
--- a/apps/web-antd/src/views/system/salesperson-dashboard/components/CompareTrendChart.vue
+++ b/apps/web-antd/src/views/system/salesperson-dashboard/components/CompareTrendChart.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+/**
+ * 业务员看板 · 录入环比对比
+ * 本周期 / 上周期柱状对比；挂载后再渲染，避免首次进入空白
+ */
 import type { SalespersonDashboardTrendItem } from '../api';
 
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 import {
   EchartsUI,
@@ -9,6 +13,11 @@ import {
   useEcharts,
 } from '@vben/plugins/echarts';
 
+import {
+  getChartPalette,
+  glassTooltip,
+} from '#/views/finance/visualization-chart/utils/chart-theme';
+
 const props = defineProps<{
   /** 本周期 trend，用于环比柱状图「本周期」系列 */
   current: SalespersonDashboardTrendItem[];
@@ -18,8 +27,11 @@ const props = defineProps<{
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts, resize } = useEcharts(chartRef);
+const ready = ref(false);
 
-const maxLen = computed(() => Math.max(props.current.length, props.previous.length));
+const maxLen = computed(() =>
+  Math.max(props.current.length, props.previous.length),
+);
 
 function resolveInputTotal(item: SalespersonDashboardTrendItem) {
   return item.input_total ?? item.clinic_count + item.pharmacy_count;
@@ -27,12 +39,18 @@ function resolveInputTotal(item: SalespersonDashboardTrendItem) {
 
 /** 按序号对齐本周期与上周期录入总数，tooltip 展示真实时间标签 */
 async function renderChart() {
+  if (!ready.value) return;
+
+  const palette = getChartPalette();
   const labels = Array.from({ length: maxLen.value }, (_, i) => `T${i + 1}`);
   const currentData = props.current.map((item) => resolveInputTotal(item));
   const previousData = props.previous.map((item) => resolveInputTotal(item));
 
+  await nextTick();
   await renderEcharts({
+    color: [palette.primary, palette.subText],
     tooltip: {
+      ...glassTooltip(palette),
       trigger: 'axis',
       formatter(params: any) {
         const list = Array.isArray(params) ? params : [params];
@@ -40,27 +58,56 @@ async function renderChart() {
         const cur = props.current[idx];
         const prev = props.previous[idx];
         const lines = [`序号 ${idx + 1}`];
-        if (cur) lines.push(`本周期 ${cur.label}：${resolveInputTotal(cur)} 家`);
-        if (prev) lines.push(`上周期 ${prev.label}：${resolveInputTotal(prev)} 家`);
+        if (cur) {
+          lines.push(`本周期 ${cur.label}：${resolveInputTotal(cur)} 家`);
+        }
+        if (prev) {
+          lines.push(`上周期 ${prev.label}：${resolveInputTotal(prev)} 家`);
+        }
         return lines.join('<br/>');
       },
     },
-    legend: { data: ['本周期录入', '上周期录入'] },
-    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-    xAxis: { type: 'category', data: labels },
-    yAxis: { type: 'value', name: '录入数(家)', minInterval: 1 },
+    legend: {
+      data: ['本周期录入', '上周期录入'],
+      textStyle: { color: palette.subText },
+      top: 0,
+    },
+    grid: { left: 12, right: 12, top: 40, bottom: 8, containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: { color: palette.subText },
+      axisLine: { lineStyle: { color: palette.border } },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      name: '录入数(家)',
+      minInterval: 1,
+      nameTextStyle: { color: palette.subText },
+      axisLabel: { color: palette.subText },
+      splitLine: { lineStyle: { color: palette.splitLine, type: 'dashed' } },
+    },
     series: [
       {
         name: '本周期录入',
         type: 'bar',
+        barMaxWidth: 22,
         data: currentData,
-        itemStyle: { color: '#1677ff' },
+        itemStyle: {
+          color: palette.primary,
+          borderRadius: [4, 4, 0, 0],
+        },
       },
       {
         name: '上周期录入',
         type: 'bar',
+        barMaxWidth: 22,
         data: previousData,
-        itemStyle: { color: '#bfbfbf' },
+        itemStyle: {
+          color: palette.border,
+          borderRadius: [4, 4, 0, 0],
+        },
       },
     ],
   });
@@ -68,7 +115,15 @@ async function renderChart() {
   resize();
 }
 
-watch([() => props.current, () => props.previous], renderChart, { deep: true, immediate: true });
+onMounted(async () => {
+  ready.value = true;
+  await renderChart();
+});
+
+watch([() => props.current, () => props.previous], () => renderChart(), {
+  deep: true,
+  flush: 'post',
+});
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/system/salesperson-dashboard/components/DashboardStatCard.vue b/apps/web-antd/src/views/system/salesperson-dashboard/components/DashboardStatCard.vue
index 32185946..76f8131d 100644
--- a/apps/web-antd/src/views/system/salesperson-dashboard/components/DashboardStatCard.vue
+++ b/apps/web-antd/src/views/system/salesperson-dashboard/components/DashboardStatCard.vue
@@ -5,7 +5,7 @@ import { computed } from 'vue';
 
 import { VbenIcon } from '@vben/common-ui';
 
-import { Card } from 'ant-design-vue';
+import { GlassCard } from '#/components/glass-card';
 
 /** 统计卡片数值展示类型：count 整数 / money 金额 / percent 百分比 */
 export type DashboardStatValueType = 'count' | 'money' | 'percent';
@@ -63,7 +63,11 @@ const displayValue = computed(() => {
 
 /** 底部辅助值格式化（与主值规则一致，footer 多为 count 或 percent 文本） */
 const displayFooterValue = computed(() => {
-  if (props.footerValue === null || props.footerValue === undefined || props.footerValue === '') {
+  if (
+    props.footerValue === null ||
+    props.footerValue === undefined ||
+    props.footerValue === ''
+  ) {
     return '';
   }
   if (typeof props.footerValue === 'string') return props.footerValue;
@@ -80,8 +84,8 @@ const displayFooterValue = computed(() => {
 </script>
 
 <template>
-  <Card class="stat-card w-full" :bordered="true">
-    <!-- 右上角装饰：优先背景图，其次 Icon -->
+  <GlassCard class="stat-card w-full" padding="lg">
+    <!-- 右上角装饰：优先背景图，其次 Icon；定位基准是 GlassCard 内容区 -->
     <div v-if="decorationImage || decorationIcon" class="stat-card__decoration">
       <img
         v-if="decorationImage"
@@ -105,23 +109,15 @@ const displayFooterValue = computed(() => {
         </span>
       </div>
     </div>
-  </Card>
+  </GlassCard>
 </template>
 
 <style scoped>
-.stat-card {
-  position: relative;
-  overflow: hidden;
-}
-
-.stat-card :deep(.ant-card-body) {
-  padding: 20px;
-}
-
+/* 装饰层相对 GlassCard 内容区定位，向右上略微外扩，视觉上仍贴近卡片右上角 */
 .stat-card__decoration {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: -6px;
+  right: -10px;
   pointer-events: none;
   opacity: 0.18;
 }
@@ -144,11 +140,7 @@ const displayFooterValue = computed(() => {
 
 .stat-card__title {
   font-size: 14px;
-  color: #86909c;
-}
-
-.dark .stat-card__title {
-  color: #9ca3af;
+  color: hsl(var(--muted-foreground));
 }
 
 .stat-card__value {
@@ -156,11 +148,7 @@ const displayFooterValue = computed(() => {
   font-size: 28px;
   font-weight: 600;
   line-height: 1.2;
-  color: #1d2129;
-}
-
-.dark .stat-card__value {
-  color: #f3f4f6;
+  color: hsl(var(--foreground));
 }
 
 .stat-card__footer {
@@ -170,15 +158,11 @@ const displayFooterValue = computed(() => {
   justify-content: space-between;
   margin-top: 12px;
   font-size: 13px;
-  color: #86909c;
+  color: hsl(var(--muted-foreground));
 }
 
 .stat-card__footer-value {
   font-weight: 500;
-  color: #4e5969;
-}
-
-.dark .stat-card__footer-value {
-  color: #d1d5db;
+  color: hsl(var(--foreground) / 85%);
 }
 </style>
diff --git a/apps/web-antd/src/views/system/salesperson-dashboard/components/InactiveStoreWarningList.vue b/apps/web-antd/src/views/system/salesperson-dashboard/components/InactiveStoreWarningList.vue
index fb6acc09..b5f74ac9 100644
--- a/apps/web-antd/src/views/system/salesperson-dashboard/components/InactiveStoreWarningList.vue
+++ b/apps/web-antd/src/views/system/salesperson-dashboard/components/InactiveStoreWarningList.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import dayjs from 'dayjs';
 
-import { Card, Empty, Tag } from 'ant-design-vue';
+import { Empty, Tag } from 'ant-design-vue';
+
+import { GlassCard } from '#/components/glass-card';
 
 import type { SalespersonDashboardInactiveStoreItem } from '../api';
 
@@ -20,19 +22,28 @@ function formatInputAt(timestamp: number) {
 </script>
 
 <template>
-  <Card :title="title" class="warning-card">
-    <template v-if="subtitle" #extra>
-      <span class="warning-card__subtitle">{{ subtitle }}</span>
+  <!--
+    警示类卡片用 warning 色调：边框微光与标题区折射光偏暖，和普通排行卡区分开；
+    类名 warning-card / __list 供看板页限高滚动选择器使用，勿改
+  -->
+  <GlassCard
+    :subtitle="subtitle"
+    class="warning-card"
+    tone="warning"
+    padding="lg"
+  >
+    <!-- 标题带总数：列表限高滚动后，用户仍能一眼看到一共有多少家警示门店 -->
+    <template #title>
+      {{ title }}
+      <Tag v-if="items.length" color="warning" class="warning-card__count">
+        {{ items.length }} 家
+      </Tag>
     </template>
 
     <Empty v-if="!items.length" :description="emptyText || '暂无警示门店'" />
 
     <div v-else class="warning-card__list">
-      <div
-        v-for="item in items"
-        :key="item.store_id"
-        class="warning-item"
-      >
+      <div v-for="item in items" :key="item.store_id" class="warning-item">
         <div class="warning-item__indicator" />
         <div class="warning-item__main">
           <div class="warning-item__header">
@@ -41,15 +52,20 @@ function formatInputAt(timestamp: number) {
           </div>
           <div class="warning-item__meta">
             <Tag size="small">{{ item.type_label }}</Tag>
-            <span class="warning-item__time">录入时间：{{ formatInputAt(item.input_at) }}</span>
-            <span v-if="showPromoter && item.promoter_nick_name" class="warning-item__promoter">
+            <span class="warning-item__time"
+              >录入时间：{{ formatInputAt(item.input_at) }}</span
+            >
+            <span
+              v-if="showPromoter && item.promoter_nick_name"
+              class="warning-item__promoter"
+            >
               业务员：{{ item.promoter_nick_name }}
             </span>
           </div>
         </div>
       </div>
     </div>
-  </Card>
+  </GlassCard>
 </template>
 
 <style scoped>
@@ -57,12 +73,9 @@ function formatInputAt(timestamp: number) {
   height: 100%;
 }
 
-.warning-card__subtitle {
-  max-width: 280px;
-  font-size: 12px;
+.warning-card__count {
+  margin-left: 8px;
   font-weight: normal;
-  color: #86909c;
-  text-align: right;
 }
 
 .warning-card__list {
@@ -71,19 +84,15 @@ function formatInputAt(timestamp: number) {
   gap: 10px;
 }
 
+/* 警示行：warning 色薄染 + 同色系 1px 边框，明暗主题共用变量，不再单写 .dark 覆盖 */
 .warning-item {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 12px;
-  background: #fff7e6;
-  border: 1px solid #ffe7ba;
-  border-radius: 10px;
-}
-
-.dark .warning-item {
-  background: #2b2111;
-  border-color: #594214;
+  background: hsl(var(--warning) / 10%);
+  border: 1px solid hsl(var(--warning) / 25%);
+  border-radius: 12px;
 }
 
 .warning-item__indicator {
@@ -91,8 +100,9 @@ function formatInputAt(timestamp: number) {
   width: 8px;
   height: 8px;
   margin-top: 6px;
-  background: #fa8c16;
+  background: hsl(var(--warning));
   border-radius: 50%;
+  box-shadow: 0 0 6px hsl(var(--warning) / 45%);
 }
 
 .warning-item__main {
@@ -113,28 +123,20 @@ function formatInputAt(timestamp: number) {
   text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 600;
-  color: #1d2129;
+  color: hsl(var(--foreground));
   white-space: nowrap;
 }
 
-.dark .warning-item__name {
-  color: #f3f4f6;
-}
-
 .warning-item__meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   font-size: 12px;
-  color: #86909c;
+  color: hsl(var(--muted-foreground));
 }
 
 .warning-item__promoter {
-  color: #595959;
-}
-
-.dark .warning-item__promoter {
-  color: #bfbfbf;
+  color: hsl(var(--foreground) / 75%);
 }
 </style>
diff --git a/apps/web-antd/src/views/system/salesperson-dashboard/components/InputCountTrendChart.vue b/apps/web-antd/src/views/system/salesperson-dashboard/components/InputCountTrendChart.vue
index 697a1e44..ea086f99 100644
--- a/apps/web-antd/src/views/system/salesperson-dashboard/components/InputCountTrendChart.vue
+++ b/apps/web-antd/src/views/system/salesperson-dashboard/components/InputCountTrendChart.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+/**
+ * 业务员看板 · 录入门店数量趋势
+ * 堆叠柱（诊所/药店）+ 折线（总数）；主题色跟亮暗模式，挂载后再渲染避免首次空白
+ */
 import type { SalespersonDashboardTrendItem } from '../api';
 
-import { nextTick, ref, watch } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 
 import {
   EchartsUI,
@@ -9,6 +13,11 @@ import {
   useEcharts,
 } from '@vben/plugins/echarts';
 
+import {
+  getChartPalette,
+  glassTooltip,
+} from '#/views/finance/visualization-chart/utils/chart-theme';
+
 const props = defineProps<{
   /** 来自 dashboardData.trend：按时间桶聚合的录入趋势 */
   data: SalespersonDashboardTrendItem[];
@@ -16,6 +25,8 @@ const props = defineProps<{
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts, resize } = useEcharts(chartRef);
+/** 组件已挂载后再允许渲染，避开 useEcharts 里 isActive 未就绪时 immediate 空跑 */
+const ready = ref(false);
 
 /** 录入总数兜底：兼容旧接口未返回 input_total 的情况 */
 function resolveInputTotal(item: SalespersonDashboardTrendItem) {
@@ -28,42 +39,90 @@ function resolveInputTotal(item: SalespersonDashboardTrendItem) {
  * - 折线：录入总数
  */
 async function renderChart() {
+  if (!ready.value) return;
+
+  const palette = getChartPalette();
   const labels = props.data.map((item) => item.label);
   const clinicData = props.data.map((item) => item.clinic_count);
   const pharmacyData = props.data.map((item) => item.pharmacy_count);
   const totalData = props.data.map((item) => resolveInputTotal(item));
 
+  await nextTick();
   await renderEcharts({
-    tooltip: { trigger: 'axis' },
-    legend: { data: ['录入诊所', '录入药店', '录入总数'] },
-    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    color: [palette.primary, '#30D158', '#FF9F0A'],
+    tooltip: {
+      ...glassTooltip(palette),
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['录入诊所', '录入药店', '录入总数'],
+      textStyle: { color: palette.subText },
+      top: 0,
+    },
+    grid: { left: 12, right: 16, top: 40, bottom: 8, containLabel: true },
     xAxis: {
       type: 'category',
       data: labels,
-      axisLabel: { rotate: labels.length > 10 ? 45 : 0 },
+      axisLabel: {
+        color: palette.subText,
+        rotate: labels.length > 10 ? 35 : 0,
+      },
+      axisLine: { lineStyle: { color: palette.border } },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      name: '录入数(家)',
+      minInterval: 1,
+      nameTextStyle: { color: palette.subText },
+      axisLabel: { color: palette.subText },
+      splitLine: { lineStyle: { color: palette.splitLine, type: 'dashed' } },
     },
-    yAxis: { type: 'value', name: '录入数(家)', minInterval: 1 },
     series: [
       {
         name: '录入诊所',
         type: 'bar',
         stack: 'input',
+        barMaxWidth: 28,
         data: clinicData,
-        itemStyle: { color: '#1677ff' },
+        itemStyle: {
+          color: palette.primary,
+          borderRadius: [0, 0, 0, 0],
+        },
       },
       {
         name: '录入药店',
         type: 'bar',
         stack: 'input',
+        barMaxWidth: 28,
         data: pharmacyData,
-        itemStyle: { color: '#52c41a' },
+        itemStyle: {
+          color: '#30D158',
+          borderRadius: [4, 4, 0, 0],
+        },
       },
       {
         name: '录入总数',
         type: 'line',
         smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
         data: totalData,
-        itemStyle: { color: '#722ed1' },
+        itemStyle: { color: '#FF9F0A' },
+        lineStyle: { width: 2.5 },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(255,159,10,0.22)' },
+              { offset: 1, color: 'rgba(255,159,10,0.02)' },
+            ],
+          },
+        },
       },
     ],
   });
@@ -71,7 +130,12 @@ async function renderChart() {
   resize();
 }
 
-watch(() => props.data, renderChart, { deep: true, immediate: true });
+onMounted(async () => {
+  ready.value = true;
+  await renderChart();
+});
+
+watch(() => props.data, renderChart, { deep: true, flush: 'post' });
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/system/salesperson-dashboard/components/RankingList.vue b/apps/web-antd/src/views/system/salesperson-dashboard/components/RankingList.vue
index a82f3535..e0d3f1da 100644
--- a/apps/web-antd/src/views/system/salesperson-dashboard/components/RankingList.vue
+++ b/apps/web-antd/src/views/system/salesperson-dashboard/components/RankingList.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { Card, Empty, Progress } from 'ant-design-vue';
+import { Empty, Progress } from 'ant-design-vue';
 
+import { GlassCard } from '#/components/glass-card';
 import PromoterInfoCard from '#/components/promoter/PromoterInfoCard.vue';
 
 import type { SalespersonDashboardRankingItem } from '../api';
@@ -32,7 +33,10 @@ function formatValue(item: SalespersonDashboardRankingItem) {
 
 function progressPercent(item: SalespersonDashboardRankingItem) {
   if (maxValue.value <= 0) return 0;
-  const val = props.valueKey === 'amount' ? Number(item.amount || 0) : Number(item.count || 0);
+  const val =
+    props.valueKey === 'amount'
+      ? Number(item.amount || 0)
+      : Number(item.count || 0);
   return Math.round((val / maxValue.value) * 100);
 }
 
@@ -45,11 +49,13 @@ function rankClass(index: number) {
 </script>
 
 <template>
-  <Card :title="title" class="ranking-card">
-    <template v-if="subtitle" #extra>
-      <span class="ranking-card__subtitle">{{ subtitle }}</span>
-    </template>
-
+  <!-- 副标题放到 GlassCard 标题下方，不再挤在右上角 extra；类名 ranking-card / __list 供看板页限高滚动选择器使用，勿改 -->
+  <GlassCard
+    :title="title"
+    :subtitle="subtitle"
+    class="ranking-card"
+    padding="lg"
+  >
     <Empty v-if="!items.length" :description="emptyText || '暂无数据'" />
 
     <div v-else class="ranking-card__list">
@@ -78,13 +84,13 @@ function rankClass(index: number) {
           <Progress
             :percent="progressPercent(item)"
             :show-info="false"
-            stroke-color="#1677ff"
+            stroke-color="hsl(var(--primary))"
             :stroke-width="6"
           />
         </div>
       </div>
     </div>
-  </Card>
+  </GlassCard>
 </template>
 
 <style scoped>
@@ -92,40 +98,29 @@ function rankClass(index: number) {
   height: 100%;
 }
 
-.ranking-card__subtitle {
-  max-width: 280px;
-  font-size: 12px;
-  font-weight: normal;
-  color: #86909c;
-  text-align: right;
-}
-
 .ranking-card__list {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
+/* 列表行是玻璃卡内的「内嵌面」：用 muted 半透明底，悬停换主题色薄染，明暗主题共用一套变量 */
 .ranking-item {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 12px;
-  background: #fafafa;
-  border-radius: 10px;
-  transition: background-color 0.2s ease;
-}
-
-.dark .ranking-item {
-  background: #1f1f1f;
+  background: hsl(var(--muted) / 40%);
+  border: 1px solid transparent;
+  border-radius: 12px;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
 }
 
 .ranking-item:hover {
-  background: #f0f5ff;
-}
-
-.dark .ranking-item:hover {
-  background: #111a2c;
+  background: hsl(var(--primary) / 8%);
+  border-color: hsl(var(--primary) / 20%);
 }
 
 .ranking-item__badge {
@@ -141,13 +136,14 @@ function rankClass(index: number) {
   border-radius: 50%;
 }
 
+/* 金/银/铜奖牌是固定金属渐变，底色不随主题变化，文字色也随奖牌固定，暗色下同样可读 */
 .ranking-item__badge--gold {
   background: linear-gradient(135deg, #ffd666, #fa8c16);
 }
 
 .ranking-item__badge--silver {
-  background: linear-gradient(135deg, #f0f0f0, #bfbfbf);
   color: #595959;
+  background: linear-gradient(135deg, #f0f0f0, #bfbfbf);
 }
 
 .ranking-item__badge--bronze {
@@ -155,8 +151,8 @@ function rankClass(index: number) {
 }
 
 .ranking-item__badge--normal {
-  background: #d9d9d9;
-  color: #595959;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted));
 }
 
 .ranking-item__main {
@@ -175,7 +171,7 @@ function rankClass(index: number) {
 .ranking-item__value {
   font-size: 15px;
   font-weight: 700;
-  color: #1677ff;
+  color: hsl(var(--primary));
   white-space: nowrap;
 }
 </style>
diff --git a/apps/web-antd/src/views/system/salesperson-dashboard/components/RegionDistributionChart.vue b/apps/web-antd/src/views/system/salesperson-dashboard/components/RegionDistributionChart.vue
index 5d0faebc..251d284c 100644
--- a/apps/web-antd/src/views/system/salesperson-dashboard/components/RegionDistributionChart.vue
+++ b/apps/web-antd/src/views/system/salesperson-dashboard/components/RegionDistributionChart.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue';
+/**
+ * 业务员看板 · 地区录入分布
+ * 多地区横向柱；单市用 Statistic；挂载后再渲染避免首次空白
+ */
+import type { SalespersonDashboardRegionItem } from '../api';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 import {
   EchartsUI,
@@ -7,9 +13,13 @@ import {
   useEcharts,
 } from '@vben/plugins/echarts';
 
-import { Card, Empty, Statistic } from 'ant-design-vue';
+import { Empty, Statistic } from 'ant-design-vue';
 
-import type { SalespersonDashboardRegionItem } from '../api';
+import { GlassCard } from '#/components/glass-card';
+import {
+  getChartPalette,
+  glassTooltip,
+} from '#/views/finance/visualization-chart/utils/chart-theme';
 
 const props = defineProps<{
   /** 来自 dashboardData.region_stats：按角色维度（省/市）聚合的录入分布 */
@@ -18,38 +28,70 @@ const props = defineProps<{
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts, resize } = useEcharts(chartRef);
+const ready = ref(false);
 
 /** 无数据时展示空态 */
 const showEmpty = computed(() => !props.data.length);
-/** 市经理仅一条本市数据时展示 Statistic 卡片 */
+/** 市经理仅一条本市数据时展示 Statistic */
 const isSingleCity = computed(() => props.data.length === 1);
-/** 多地区时展示横向柱状图（用 v-show 保持 ECharts 实例，避免切换时间段后组件丢失） */
+/** 多地区时展示横向柱状图（v-show 保持实例，避免切换周期销毁） */
 const showChart = computed(() => props.data.length > 1);
 
 /** 多地区横向柱状图：Y 轴地区名，X 轴录入总数 */
 async function renderChart() {
-  if (!showChart.value) return;
+  if (!ready.value || !showChart.value) return;
 
+  const palette = getChartPalette();
   const names = props.data.map((item) => item.region_name);
   const counts = props.data.map((item) => item.input_count);
 
-  // 等待 v-show 切换完成后再渲染，避免 chartRef 尚未挂载
   await nextTick();
   await renderEcharts({
-    tooltip: { trigger: 'axis' },
-    grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
-    xAxis: { type: 'value', minInterval: 1 },
+    tooltip: {
+      ...glassTooltip(palette),
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+    },
+    grid: { left: 8, right: 28, top: 12, bottom: 8, containLabel: true },
+    xAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLabel: { color: palette.subText },
+      splitLine: { lineStyle: { color: palette.splitLine, type: 'dashed' } },
+    },
     yAxis: {
       type: 'category',
       data: names,
       inverse: true,
+      axisLabel: { color: palette.text },
+      axisLine: { show: false },
+      axisTick: { show: false },
     },
     series: [
       {
         type: 'bar',
         data: counts,
-        itemStyle: { color: '#13c2c2' },
-        label: { show: true, position: 'right' },
+        barMaxWidth: 18,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: palette.primarySoft },
+              { offset: 1, color: palette.primary },
+            ],
+          },
+          borderRadius: [0, 6, 6, 0],
+        },
+        label: {
+          show: true,
+          position: 'right',
+          color: palette.subText,
+          fontSize: 12,
+        },
       },
     ],
   });
@@ -57,30 +99,32 @@ async function renderChart() {
   resize();
 }
 
+onMounted(async () => {
+  ready.value = true;
+  await renderChart();
+});
+
 watch(
   () => props.data,
   () => renderChart(),
-  { deep: true, immediate: true, flush: 'post' },
+  { deep: true, flush: 'post' },
 );
 </script>
 
 <template>
-  <Empty
-    v-if="showEmpty"
-    class="region-empty"
-    description="暂无地区录入数据"
-  />
+  <Empty v-if="showEmpty" class="region-empty" description="暂无地区录入数据" />
   <div v-else-if="isSingleCity" class="region-single">
-    <Card size="small" class="region-single__card">
+    <GlassCard class="region-single__card" padding="lg">
       <Statistic
         :title="data[0]?.region_name || '本市'"
         :value="data[0]?.input_count || 0"
         suffix="家录入"
       />
       <div class="region-single__sub">
-        诊所 {{ data[0]?.clinic_count || 0 }} 家 · 药店 {{ data[0]?.pharmacy_count || 0 }} 家
+        诊所 {{ data[0]?.clinic_count || 0 }} 家 · 药店
+        {{ data[0]?.pharmacy_count || 0 }} 家
       </div>
-    </Card>
+    </GlassCard>
   </div>
   <!-- 始终挂载图表容器，用 v-show 控制显隐，防止时间段切换时 v-if 销毁 ECharts -->
   <EchartsUI v-show="showChart" ref="chartRef" class="dashboard-chart" />
@@ -115,6 +159,6 @@ watch(
 .region-single__sub {
   margin-top: 8px;
   font-size: 13px;
-  color: #86909c;
+  color: hsl(var(--muted-foreground));
 }
 </style>
diff --git a/apps/web-antd/src/views/system/salesperson-dashboard/components/StoreAmountRankingList.vue b/apps/web-antd/src/views/system/salesperson-dashboard/components/StoreAmountRankingList.vue
index 8be9835f..7ddd3e6e 100644
--- a/apps/web-antd/src/views/system/salesperson-dashboard/components/StoreAmountRankingList.vue
+++ b/apps/web-antd/src/views/system/salesperson-dashboard/components/StoreAmountRankingList.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { Card, Empty, Progress, Tag } from 'ant-design-vue';
+import { Empty, Progress, Tag } from 'ant-design-vue';
+
+import { GlassCard } from '#/components/glass-card';
 
 import type { SalespersonDashboardStoreAmountItem } from '../api';
 
@@ -36,11 +38,13 @@ function rankClass(index: number) {
 </script>
 
 <template>
-  <Card :title="title" class="ranking-card">
-    <template v-if="subtitle" #extra>
-      <span class="ranking-card__subtitle">{{ subtitle }}</span>
-    </template>
-
+  <!-- 副标题放到 GlassCard 标题下方；类名 ranking-card / __list 供看板页限高滚动选择器使用，勿改 -->
+  <GlassCard
+    :title="title"
+    :subtitle="subtitle"
+    class="ranking-card"
+    padding="lg"
+  >
     <Empty v-if="!items.length" :description="emptyText || '暂无数据'" />
 
     <div v-else class="ranking-card__list">
@@ -59,7 +63,10 @@ function rankClass(index: number) {
               <div class="ranking-item__name">{{ item.name }}</div>
               <div class="ranking-item__meta">
                 <Tag size="small">{{ item.type_label }}</Tag>
-                <span v-if="showPromoter && item.promoter_nick_name" class="ranking-item__promoter">
+                <span
+                  v-if="showPromoter && item.promoter_nick_name"
+                  class="ranking-item__promoter"
+                >
                   {{ item.promoter_nick_name }}
                 </span>
               </div>
@@ -69,13 +76,13 @@ function rankClass(index: number) {
           <Progress
             :percent="progressPercent(item)"
             :show-info="false"
-            stroke-color="#1677ff"
+            stroke-color="hsl(var(--primary))"
             :stroke-width="6"
           />
         </div>
       </div>
     </div>
-  </Card>
+  </GlassCard>
 </template>
 
 <style scoped>
@@ -83,40 +90,29 @@ function rankClass(index: number) {
   height: 100%;
 }
 
-.ranking-card__subtitle {
-  max-width: 280px;
-  font-size: 12px;
-  font-weight: normal;
-  color: #86909c;
-  text-align: right;
-}
-
 .ranking-card__list {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
+/* 列表行是玻璃卡内的「内嵌面」：用 muted 半透明底，悬停换主题色薄染，明暗主题共用一套变量 */
 .ranking-item {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 12px;
-  background: #fafafa;
-  border-radius: 10px;
-  transition: background-color 0.2s ease;
-}
-
-.dark .ranking-item {
-  background: #1f1f1f;
+  background: hsl(var(--muted) / 40%);
+  border: 1px solid transparent;
+  border-radius: 12px;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
 }
 
 .ranking-item:hover {
-  background: #f0f5ff;
-}
-
-.dark .ranking-item:hover {
-  background: #111a2c;
+  background: hsl(var(--primary) / 8%);
+  border-color: hsl(var(--primary) / 20%);
 }
 
 .ranking-item__badge {
@@ -132,13 +128,14 @@ function rankClass(index: number) {
   border-radius: 50%;
 }
 
+/* 金/银/铜奖牌是固定金属渐变，底色不随主题变化，文字色也随奖牌固定，暗色下同样可读 */
 .ranking-item__badge--gold {
   background: linear-gradient(135deg, #ffd666, #fa8c16);
 }
 
 .ranking-item__badge--silver {
-  background: linear-gradient(135deg, #f0f0f0, #bfbfbf);
   color: #595959;
+  background: linear-gradient(135deg, #f0f0f0, #bfbfbf);
 }
 
 .ranking-item__badge--bronze {
@@ -146,8 +143,8 @@ function rankClass(index: number) {
 }
 
 .ranking-item__badge--normal {
-  background: #d9d9d9;
-  color: #595959;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted));
 }
 
 .ranking-item__main {
@@ -173,14 +170,10 @@ function rankClass(index: number) {
   text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 600;
-  color: #1d2129;
+  color: hsl(var(--foreground));
   white-space: nowrap;
 }
 
-.dark .ranking-item__name {
-  color: #f3f4f6;
-}
-
 .ranking-item__meta {
   display: flex;
   flex-wrap: wrap;
@@ -190,13 +183,13 @@ function rankClass(index: number) {
 
 .ranking-item__promoter {
   font-size: 12px;
-  color: #86909c;
+  color: hsl(var(--muted-foreground));
 }
 
 .ranking-item__value {
   font-size: 15px;
   font-weight: 700;
-  color: #1677ff;
+  color: hsl(var(--primary));
   white-space: nowrap;
 }
 </style>
diff --git a/apps/web-antd/src/views/system/salesperson-dashboard/index.vue b/apps/web-antd/src/views/system/salesperson-dashboard/index.vue
index ae21c04e..71c229f1 100644
--- a/apps/web-antd/src/views/system/salesperson-dashboard/index.vue
+++ b/apps/web-antd/src/views/system/salesperson-dashboard/index.vue
@@ -5,7 +5,7 @@ import type { DashboardStatItem } from './components/DashboardStatGrid.vue';
 
 import { computed, onMounted, ref, watch } from 'vue';
 
-import { AnalysisChartCard, Page } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 import {
   SvgBellIcon,
   SvgCakeIcon,
@@ -14,9 +14,10 @@ import {
 } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 
-import { Card, DatePicker, Radio, Spin, Tag } from 'ant-design-vue';
+import { DatePicker, Radio, Spin, Tag } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
+import { GlassCard } from '#/components/glass-card';
 import { ROLE_SALESPERSON } from '#/views/system/admin/_shared/role-meta';
 
 import CompareTrendChart from './components/CompareTrendChart.vue';
@@ -72,7 +73,9 @@ const dashboardData = ref<SalespersonDashboardResult | null>(null);
 
 const userStore = useUserStore();
 const isSalespersonView = computed(() => {
-  const roleId = Number(userStore.userInfo?.role_id ?? userStore.userInfo?.roles?.id);
+  const roleId = Number(
+    userStore.userInfo?.role_id ?? userStore.userInfo?.roles?.id,
+  );
   return roleId === ROLE_SALESPERSON;
 });
 
@@ -202,115 +205,136 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height title="业务员看板">
-    <Spin :spinning="loading">
-      <div class="salesperson-dashboard">
-        <Card class="mb-4">
-          <div class="dashboard-filter">
-            <div>
-              <div class="dashboard-filter__title">门店录入业绩分析</div>
-              <div v-if="activeRangeText" class="dashboard-filter__range">
-                统计区间：{{ activeRangeText }}
-              </div>
-              <div v-if="dashboardData" class="dashboard-filter__tags">
-                <Tag :color="momTagColor(dashboardData.summary.input_mom_rate)">
-                  录入环比 {{ formatMomRate(dashboardData.summary.input_mom_rate) }}
-                </Tag>
-                <Tag :color="momTagColor(dashboardData.summary.amount_mom_rate)">
-                  营业额环比 {{ formatMomRate(dashboardData.summary.amount_mom_rate) }}
-                </Tag>
-              </div>
+    <div class="salesperson-dashboard">
+      <!-- 筛选区：标题/区间/环比在左、周期切换在右 -->
+      <GlassCard class="mb-4" padding="lg">
+        <div class="dashboard-filter">
+          <div>
+            <div class="dashboard-filter__title">门店录入业绩分析</div>
+            <div v-if="activeRangeText" class="dashboard-filter__range">
+              统计区间：{{ activeRangeText }}
             </div>
-
-            <div class="dashboard-filter__groups">
-              <Radio.Group v-model:value="period" button-style="solid" size="small">
-                <Radio.Button
-                  v-for="item in shortPeriodOptions"
-                  :key="item.value"
-                  :value="item.value"
-                >
-                  {{ item.label }}
-                </Radio.Button>
-              </Radio.Group>
-
-              <Radio.Group v-model:value="period" button-style="solid" size="small">
-                <Radio.Button
-                  v-for="item in longPeriodOptions"
-                  :key="item.value"
-                  :value="item.value"
-                >
-                  {{ item.label }}
-                </Radio.Button>
-                <Radio.Button value="custom">自定义</Radio.Button>
-              </Radio.Group>
-
-              <DatePicker.RangePicker
-                v-if="period === 'custom'"
-                v-model:value="customRange"
-                class="dashboard-filter__picker"
-                :allow-clear="false"
-                format="YYYY-MM-DD"
-              />
+            <div v-if="dashboardData" class="dashboard-filter__tags">
+              <Tag :color="momTagColor(dashboardData.summary.input_mom_rate)">
+                录入环比
+                {{ formatMomRate(dashboardData.summary.input_mom_rate) }}
+              </Tag>
+              <Tag :color="momTagColor(dashboardData.summary.amount_mom_rate)">
+                营业额环比
+                {{ formatMomRate(dashboardData.summary.amount_mom_rate) }}
+              </Tag>
             </div>
           </div>
-        </Card>
 
+          <div class="dashboard-filter__groups">
+            <Radio.Group
+              v-model:value="period"
+              button-style="solid"
+              size="small"
+            >
+              <Radio.Button
+                v-for="item in shortPeriodOptions"
+                :key="item.value"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </Radio.Button>
+            </Radio.Group>
+
+            <Radio.Group
+              v-model:value="period"
+              button-style="solid"
+              size="small"
+            >
+              <Radio.Button
+                v-for="item in longPeriodOptions"
+                :key="item.value"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </Radio.Button>
+              <Radio.Button value="custom">自定义</Radio.Button>
+            </Radio.Group>
+
+            <DatePicker.RangePicker
+              v-if="period === 'custom'"
+              v-model:value="customRange"
+              class="dashboard-filter__picker"
+              :allow-clear="false"
+              format="YYYY-MM-DD"
+            />
+          </div>
+        </div>
+      </GlassCard>
+
+      <Spin :spinning="loading">
         <DashboardStatGrid :items="statItems" />
+      </Spin>
 
-        <template v-if="dashboardData">
-          <AnalysisChartCard class="mt-4" title="录入门店数量趋势">
-            <InputCountTrendChart :data="dashboardData.trend" />
-          </AnalysisChartCard>
+      <!--
+        图表区始终挂载（不用整页 Spin + v-if 包住）：
+        否则首次数据返回时子组件 immediate 渲染会撞上 useEcharts 未激活，图一直空白
+      -->
+      <GlassCard class="mt-4" title="录入门店数量趋势" padding="lg">
+        <InputCountTrendChart :data="dashboardData?.trend || []" />
+      </GlassCard>
 
-          <div class="dashboard-two-col mt-4">
-            <AnalysisChartCard class="dashboard-two-col__item" title="录入环比对比">
-              <CompareTrendChart
-                :current="dashboardData.trend"
-                :previous="dashboardData.compare_trend"
-              />
-            </AnalysisChartCard>
+      <div class="dashboard-two-col mt-4">
+        <GlassCard
+          class="dashboard-two-col__item"
+          title="录入环比对比"
+          padding="lg"
+        >
+          <CompareTrendChart
+            :current="dashboardData?.trend || []"
+            :previous="dashboardData?.compare_trend || []"
+          />
+        </GlassCard>
 
-            <AnalysisChartCard class="dashboard-two-col__item" title="地区录入分布">
-              <RegionDistributionChart :data="dashboardData.region_stats" />
-            </AnalysisChartCard>
-          </div>
-
-          <div v-if="!isSalespersonView" class="dashboard-two-col mt-4">
-            <RankingList
-              class="dashboard-two-col__item"
-              title="录入门店数量排行"
-              :items="dashboardData.input_ranking"
-              value-key="count"
-            />
-
-            <RankingList
-              class="dashboard-two-col__item"
-              title="绑定门店营业额排行"
-              subtitle="统计业务员名下门店的有效支付金额（已支付且无退款）"
-              :items="dashboardData.amount_ranking"
-              value-key="amount"
-            />
-          </div>
-
-          <div class="dashboard-two-col mt-4">
-            <StoreAmountRankingList
-              class="dashboard-two-col__item"
-              title="门店营业额排行"
-              subtitle="当前筛选周期内各门店有效支付金额（诊所+药店）"
-              :items="dashboardData.store_amount_ranking"
-              :show-promoter="!isSalespersonView"
-            />
-
-            <InactiveStoreWarningList
-              class="dashboard-two-col__item"
-              title="长期未活跃警示"
-              subtitle="本月（自然月）营业额为 0 的绑定门店"
-              :items="dashboardData.inactive_store_warnings"
-              :show-promoter="!isSalespersonView"
-            />
-          </div>
-        </template>
+        <GlassCard
+          class="dashboard-two-col__item"
+          title="地区录入分布"
+          padding="lg"
+        >
+          <RegionDistributionChart :data="dashboardData?.region_stats || []" />
+        </GlassCard>
       </div>
-    </Spin>
+
+      <div v-if="!isSalespersonView" class="dashboard-two-col mt-4">
+        <RankingList
+          class="dashboard-two-col__item"
+          title="录入门店数量排行"
+          :items="dashboardData?.input_ranking || []"
+          value-key="count"
+        />
+
+        <RankingList
+          class="dashboard-two-col__item"
+          title="绑定门店营业额排行"
+          subtitle="统计业务员名下门店的有效支付金额（已支付且无退款）"
+          :items="dashboardData?.amount_ranking || []"
+          value-key="amount"
+        />
+      </div>
+
+      <div class="dashboard-two-col mt-4">
+        <StoreAmountRankingList
+          class="dashboard-two-col__item"
+          title="门店营业额排行"
+          subtitle="当前筛选周期内各门店有效支付金额（诊所+药店）"
+          :items="dashboardData?.store_amount_ranking || []"
+          :show-promoter="!isSalespersonView"
+        />
+
+        <InactiveStoreWarningList
+          class="dashboard-two-col__item"
+          title="长期未活跃警示"
+          subtitle="本月（自然月）营业额为 0 的绑定门店"
+          :items="dashboardData?.inactive_store_warnings || []"
+          :show-promoter="!isSalespersonView"
+        />
+      </div>
+    </div>
   </Page>
 </template>
 
@@ -327,17 +351,13 @@ onMounted(() => {
   margin-bottom: 8px;
   font-size: 16px;
   font-weight: 600;
-  color: #1d2129;
-}
-
-.dark .dashboard-filter__title {
-  color: #f3f4f6;
+  color: hsl(var(--foreground));
 }
 
 .dashboard-filter__range {
   margin-bottom: 8px;
   font-size: 13px;
-  color: #86909c;
+  color: hsl(var(--muted-foreground));
 }
 
 .dashboard-filter__tags {
@@ -379,4 +399,17 @@ onMounted(() => {
   width: 100%;
   min-width: 0;
 }
+
+/*
+ * 排行 / 警示列表限制最大高度，超出在卡片内部滚动：
+ * 长期未活跃门店可能有上百家，不限高会把整页拉得很长、并把同行另一张卡片撑出大片空白
+ */
+.dashboard-two-col :deep(.ranking-card__list),
+.dashboard-two-col :deep(.warning-card__list) {
+  max-height: 460px;
+  padding-right: 4px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
 </style>
diff --git a/apps/web-antd/src/views/system/store/api/index.ts b/apps/web-antd/src/views/system/store/api/index.ts
index 23b75ed8..1b67f36a 100644
--- a/apps/web-antd/src/views/system/store/api/index.ts
+++ b/apps/web-antd/src/views/system/store/api/index.ts
@@ -50,7 +50,10 @@ export async function updateSpecialPrescriptionDoctorApi(data: {
   id: number;
   special_prescription_doctor_id?: number | null;
 }) {
-  return requestClient.post<any>(`${prefix}update-special-prescription-doctor`, data);
+  return requestClient.post<any>(
+    `${prefix}update-special-prescription-doctor`,
+    data,
+  );
 }
 /**
  * 分页查询用户列表
@@ -129,18 +132,69 @@ export async function getStoreFundWaterListApi(params: {
 
 /**
  * 门店账户变动列表（仅超管/系统管理员）
+ * 筛选项与提现管理「资金变动记录」对齐：source_type / field_name / order_no；search_time 仍可用
  */
 export async function getStoreAccountChangeLogListApi(params: {
   id: number;
   page?: number;
   pageSize?: number;
   search_time?: [string, string];
+  source_type?: string;
+  field_name?: string;
+  order_no?: string;
 }) {
   return requestClient.get<any>(`${prefix}store-account-change-log-list`, {
     params,
   });
 }
 
+/**
+ * 门店结算记录（yii_ledger_log，仅超管/系统管理员）
+ */
+export async function getStoreSettlementLedgerLogListApi(params: {
+  id: number;
+  page?: number;
+  pageSize?: number;
+  merge_by_order?: 0 | 1;
+  exclude_zero_amount?: 0 | 1;
+  order_no?: string;
+  fee_type?: number | string;
+}) {
+  return requestClient.get<any>(`${prefix}store-settlement-ledger-log-list`, {
+    params,
+  });
+}
+
+/**
+ * 门店结算明细列表（yii_ledger，仅超管/系统管理员）
+ */
+export async function getStoreSettlementItemsListApi(params: {
+  id: number;
+  page?: number;
+  pageSize?: number;
+  fee_type?: number | string;
+  status?: number | string;
+}) {
+  return requestClient.get<any>(`${prefix}store-settlement-items-list`, {
+    params,
+  });
+}
+
+/**
+ * 门店结算明细抽屉（仅超管/系统管理员）
+ */
+export async function getStoreSettlementLedgerDetailApi(params: {
+  id: number;
+  ledger_log_id?: number;
+  order_id?: number;
+  order_type?: number;
+  fee_type?: number | string;
+}) {
+  return requestClient.get<any>(`${prefix}store-settlement-ledger-detail`, {
+    params,
+  });
+}
+
 /**
  * 新增诊所
  * @param data
@@ -266,21 +320,33 @@ export async function batchSyncDrugPriceApi(ids: number[]) {
  * 更新诊所类型
  * @param data 包含id和clinic_type的对象，clinic_type: 1=西医诊所, 2=中医诊所
  */
-export async function updateClinicTypeApi(data: { id: number; clinic_type: number }) {
+export async function updateClinicTypeApi(data: {
+  id: number;
+  clinic_type: number;
+}) {
   return requestClient.post<any>(`${prefix}update-clinic-type`, data);
 }
 
 export async function updateAllowInsuranceCategoryApi(data: { id: number }) {
-  return requestClient.post<any>(`${prefix}update-allow-insurance-category`, data);
+  return requestClient.post<any>(
+    `${prefix}update-allow-insurance-category`,
+    data,
+  );
 }
 
 export async function updateStoreOrderPricePercentAdjust(data: { id: number }) {
-  return requestClient.post<any>(`${prefix}update-order-price-percent-adjust`, data);
+  return requestClient.post<any>(
+    `${prefix}update-order-price-percent-adjust`,
+    data,
+  );
 }
 
 /** 切换诊所是否开通公账支付 */
 export async function updateStorePublicAccountPayEnabled(data: { id: number }) {
-  return requestClient.post<any>(`${prefix}update-public-account-pay-enabled`, data);
+  return requestClient.post<any>(
+    `${prefix}update-public-account-pay-enabled`,
+    data,
+  );
 }
 
 /** 更新诊所公账账期天数（0=跟随全局） */
@@ -288,7 +354,10 @@ export async function updateStorePublicAccountLockDays(data: {
   id: number;
   public_account_lock_days: number;
 }) {
-  return requestClient.post<any>(`${prefix}update-public-account-lock-days`, data);
+  return requestClient.post<any>(
+    `${prefix}update-public-account-lock-days`,
+    data,
+  );
 }
 
 /** 单独更新诊所订单分账类型与平台占比 */
@@ -301,7 +370,10 @@ export async function updateStoreLedgerSplitApi(data: {
 }
 
 export async function toggleSalespersonSeePriceApi(data: { store_id: number }) {
-  return requestClient.post<any>('salesperson-store-config/toggle-see-price', data);
+  return requestClient.post<any>(
+    'salesperson-store-config/toggle-see-price',
+    data,
+  );
 }
 
 /**
diff --git a/apps/web-antd/src/views/system/system-config/components/ai-model-config-panel.vue b/apps/web-antd/src/views/system/system-config/components/ai-model-config-panel.vue
index 1283a7e7..6e098465 100644
--- a/apps/web-antd/src/views/system/system-config/components/ai-model-config-panel.vue
+++ b/apps/web-antd/src/views/system/system-config/components/ai-model-config-panel.vue
@@ -26,6 +26,13 @@ import {
   getAiPlatformConfigOptions,
   saveAiFeatureCopy,
 } from '#/views/system/ai/platform/api';
+import { updateAiModel } from '#/views/system/ai/platform/api/model';
+import {
+  THINKING_TYPE_OPTIONS,
+  resolveThinkingType,
+  supportsThinkingType,
+  thinkingTypeLabel,
+} from '#/views/system/ai/platform/config/provider-capabilities';
 import {
   getSystemConfigList,
   saveSystemConfig,
@@ -49,6 +56,7 @@ interface PlatformCard {
   models: {
     code: string;
     description: string;
+    extra_json?: Record<string, any>;
     id: number;
     is_default: number;
     label: string;
@@ -149,6 +157,33 @@ const currentPlatform = computed(() =>
 const keyOptions = computed(() => currentPlatform.value?.keys || []);
 const modelOptions = computed(() => currentPlatform.value?.models || []);
 
+/** 当前选中模型行（用于展示/编辑厂商扩展参数） */
+const currentModelRow = computed(() =>
+  modelOptions.value.find(
+    (m) => m.value === activeModel.value || m.code === activeModel.value,
+  ),
+);
+
+/** 当前厂商是否支持思考开关 */
+const showModelThinkingEditor = computed(() =>
+  supportsThinkingType(activeProvider.value),
+);
+
+/** 编辑条里的思考开关（与模型 extra 同步） */
+const editThinkingType = ref<'disabled' | 'enabled'>('disabled');
+const modelExtraSaving = ref(false);
+
+watch(
+  [currentModelRow, activeProvider],
+  () => {
+    editThinkingType.value = resolveThinkingType(
+      activeProvider.value,
+      currentModelRow.value?.extra_json,
+    );
+  },
+  { immediate: true },
+);
+
 /** 密钥展示名：key_name → name → label → 兜底 */
 function keyDisplayName(k: {
   id?: number;
@@ -542,7 +577,9 @@ async function handleSaveVoiceConfig() {
       },
       {
         config_key: 'ai_asr_xunfei_timeout',
-        config_value: String(Math.max(10, Number(asrXunfeiTimeout.value) || 60)),
+        config_value: String(
+          Math.max(10, Number(asrXunfeiTimeout.value) || 60),
+        ),
         config_group: 'ai',
         description: 'ASR 超时秒数',
       },
@@ -717,6 +754,36 @@ function selectModel(code: string) {
   activeModel.value = code;
 }
 
+/**
+ * 保存当前选中模型的厂商扩展参数（写回 xk_ai_model.extra_json，与平台详情同源）
+ * 为什么不另建系统配置 key：参数挂在模型行上，换模型即换配置，避免串台
+ */
+async function saveCurrentModelExtra() {
+  const row = currentModelRow.value;
+  if (!row?.id) {
+    message.warning('请先选择模型');
+    return;
+  }
+  if (!showModelThinkingEditor.value) return;
+  modelExtraSaving.value = true;
+  try {
+    await updateAiModel({
+      id: row.id,
+      platform_id: currentPlatform.value?.id,
+      extra_json: { thinking_type: editThinkingType.value },
+      thinking_type: editThinkingType.value,
+    });
+    // 本地同步，避免整页 reload 闪烁
+    row.extra_json = {
+      ...(row.extra_json || {}),
+      thinking_type: editThinkingType.value,
+    };
+    message.success('模型参数已保存');
+  } finally {
+    modelExtraSaving.value = false;
+  }
+}
+
 async function handleSave() {
   if (!activeProvider.value) {
     message.warning('请选择 AI 平台');
@@ -959,6 +1026,14 @@ onMounted(() => {
                         class="mt-1 text-xs text-[hsl(var(--muted-foreground))]"
                       >
                         {{ m.code }}
+                        <template v-if="supportsThinkingType(activeProvider)">
+                          ·
+                          {{
+                            thinkingTypeLabel(
+                              resolveThinkingType(activeProvider, m.extra_json),
+                            )
+                          }}
+                        </template>
                       </div>
                       <div
                         v-if="m.description"
@@ -975,6 +1050,47 @@ onMounted(() => {
                 >
                   当前平台暂无启用模型，请先到「AI平台管理」添加
                 </div>
+
+                <!-- 按厂商能力编辑当前模型参数（与平台详情模型弹窗同源） -->
+                <div
+                  v-if="showModelThinkingEditor && currentModelRow"
+                  class="mt-4 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.2)] p-3"
+                >
+                  <div class="mb-2 font-medium text-[hsl(var(--foreground))]">
+                    当前模型参数 ·
+                    {{ currentModelRow.name || currentModelRow.code }}
+                  </div>
+                  <div class="mb-2 text-xs text-[hsl(var(--muted-foreground))]">
+                    仅当前厂商支持的参数可改；保存后写回该模型，调用时立即按此生效（走
+                    Agent 需重启后缓存刷新）。
+                  </div>
+                  <div class="flex flex-wrap items-center gap-3">
+                    <span class="text-sm text-[hsl(var(--foreground))]"
+                      >思考模式</span
+                    >
+                    <Radio.Group
+                      v-model:value="editThinkingType"
+                      button-style="solid"
+                      size="small"
+                    >
+                      <Radio.Button
+                        v-for="opt in THINKING_TYPE_OPTIONS"
+                        :key="opt.value"
+                        :value="opt.value"
+                      >
+                        {{ opt.value === 'disabled' ? '关闭' : '开启' }}
+                      </Radio.Button>
+                    </Radio.Group>
+                    <Button
+                      type="primary"
+                      size="small"
+                      :loading="modelExtraSaving"
+                      @click="saveCurrentModelExtra"
+                    >
+                      保存模型参数
+                    </Button>
+                  </div>
+                </div>
               </div>
             </Tabs.TabPane>
 
@@ -1078,7 +1194,8 @@ onMounted(() => {
                         开启后 AI 写病历、AI 辅助辨证出方等经 AiAgentFactory
                         的调用走 Go Agent 中转。关闭则为 PHP
                         直连厂商。语音转写与口述落方见「语音配置」Tab；ReAct /
-                        知识库等见「Agent 高级」。中转开启时须保证下方服务地址可达
+                        知识库等见「Agent
+                        高级」。中转开启时须保证下方服务地址可达
                       </div>
                     </div>
                     <Switch
@@ -1123,7 +1240,8 @@ onMounted(() => {
                         中转会原样使用， 切换模型请前往<a
                           class="ml-1 underline"
                           @click="subTab = 'model'"
-                          >模型配置 Tab</a>
+                          >模型配置 Tab</a
+                        >
                       </div>
                     </div>
                   </div>
@@ -1190,7 +1308,8 @@ onMounted(() => {
                     </div>
                     <div class="text-xs text-[hsl(var(--muted-foreground))]">
                       接诊「语音开方」录音转文字使用；字段留空时回落 .env 的
-                      XUNFEI_ASR_*。须开通控制台「语音听写（流式版）」v2 WebSocket
+                      XUNFEI_ASR_*。须开通控制台「语音听写（流式版）」v2
+                      WebSocket
                     </div>
                   </div>
                   <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -1271,8 +1390,9 @@ onMounted(() => {
                       口述落方 LLM 路由
                     </div>
                     <div class="text-xs text-[hsl(var(--muted-foreground))]">
-                      仅「口述落方」解析药味时生效；辨证出方（语音选 A）仍走「Agent
-                      中转」Tab 的全局设置。Agent 宕机时可设为「强制直连」而不影响其它 AI
+                      仅「口述落方」解析药味时生效；辨证出方（语音选
+                      A）仍走「Agent 中转」Tab 的全局设置。Agent
+                      宕机时可设为「强制直连」而不影响其它 AI
                     </div>
                   </div>
                   <Radio.Group v-model:value="aiVoiceViaAgentMode">
@@ -1303,13 +1423,15 @@ onMounted(() => {
                     </div>
                     <div class="text-xs text-[hsl(var(--muted-foreground))]">
                       与「Agent 中转」Tab 独立：中转只决定走 Go，本开关才决定 Go
-                      是否检索本地知识库 /
-                      MaxKB。需先在「Agent 中转」开启中转才生效；生成记录时间轴会出现「检索知识库」步骤
+                      是否检索本地知识库 / MaxKB。需先在「Agent
+                      中转」开启中转才生效；生成记录时间轴会出现「检索知识库」步骤
                     </div>
                   </div>
                   <div class="flex flex-wrap items-center gap-6">
                     <div class="flex items-center gap-2">
-                      <span class="text-sm text-[hsl(var(--foreground))]">病历场景</span>
+                      <span class="text-sm text-[hsl(var(--foreground))]"
+                        >病历场景</span
+                      >
                       <Switch
                         v-model:checked="aiAgentKbEnabledMedicalRecord"
                         :disabled="!aiAgentViaAgent"
@@ -1318,7 +1440,9 @@ onMounted(() => {
                       />
                     </div>
                     <div class="flex items-center gap-2">
-                      <span class="text-sm text-[hsl(var(--foreground))]">处方场景</span>
+                      <span class="text-sm text-[hsl(var(--foreground))]"
+                        >处方场景</span
+                      >
                       <Switch
                         v-model:checked="aiAgentKbEnabledPrescription"
                         :disabled="!aiAgentViaAgent"
@@ -1387,7 +1511,9 @@ onMounted(() => {
                   </div>
                   <div class="mt-3 flex flex-wrap items-center gap-6">
                     <div class="flex items-center gap-2">
-                      <span class="text-sm text-[hsl(var(--foreground))]">Planning 规划阶段</span>
+                      <span class="text-sm text-[hsl(var(--foreground))]"
+                        >Planning 规划阶段</span
+                      >
                       <Switch
                         v-model:checked="aiReactPlanningEnabled"
                         checked-children="开"
@@ -1395,7 +1521,9 @@ onMounted(() => {
                       />
                     </div>
                     <div class="flex items-center gap-2">
-                      <span class="text-sm text-[hsl(var(--foreground))]">Reflection 反思自检</span>
+                      <span class="text-sm text-[hsl(var(--foreground))]"
+                        >Reflection 反思自检</span
+                      >
                       <Switch
                         v-model:checked="aiReactReflectionEnabled"
                         checked-children="开"
@@ -1403,7 +1531,9 @@ onMounted(() => {
                       />
                     </div>
                     <div class="flex items-center gap-2">
-                      <span class="text-sm text-[hsl(var(--foreground))]">JSON 自动修复</span>
+                      <span class="text-sm text-[hsl(var(--foreground))]"
+                        >JSON 自动修复</span
+                      >
                       <Switch
                         v-model:checked="aiReactJsonRepairEnabled"
                         checked-children="开"
diff --git a/apps/web-antd/src/views/system/system-config/components/dashboard-config-panel.vue b/apps/web-antd/src/views/system/system-config/components/dashboard-config-panel.vue
new file mode 100644
index 00000000..5dee409c
--- /dev/null
+++ b/apps/web-antd/src/views/system/system-config/components/dashboard-config-panel.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+/**
+ * 系统配置 - 数据大屏：选择默认模板版本
+ * xk-data 每次刷新会拉取本配置；本机模板与默认不一致时弹窗询问（可忽略到默认变更）
+ */
+import { computed, onMounted, ref } from 'vue';
+
+import { Button, Select, message } from 'ant-design-vue';
+
+import {
+  DASHBOARD_TEMPLATE_OPTIONS,
+  DEFAULT_DASHBOARD_TEMPLATE,
+} from '../config/dashboard-templates';
+import { getSystemConfigList, saveSystemConfig } from '../api';
+
+defineOptions({ name: 'DashboardConfigPanel' });
+
+const loading = ref(false);
+const saving = ref(false);
+const templateId = ref<string>(DEFAULT_DASHBOARD_TEMPLATE);
+
+const selectOptions = computed(() =>
+  DASHBOARD_TEMPLATE_OPTIONS.map((item) => ({
+    label: `${item.label}（${item.value}）`,
+    value: item.value,
+  })),
+);
+
+const currentDesc = computed(() => {
+  const hit = DASHBOARD_TEMPLATE_OPTIONS.find(
+    (i) => i.value === templateId.value,
+  );
+  return hit?.desc || '';
+});
+
+async function load() {
+  loading.value = true;
+  try {
+    const list = await getSystemConfigList();
+    const rows = Array.isArray(list) ? list : list?.data || [];
+    for (const row of rows) {
+      if (row.config_key === 'dashboard_default_template') {
+        const val = String(row.config_value || '').trim();
+        const ok = DASHBOARD_TEMPLATE_OPTIONS.some((i) => i.value === val);
+        templateId.value = ok ? val : DEFAULT_DASHBOARD_TEMPLATE;
+      }
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 写入系统配置，大屏公开接口即时可读（带缓存，保存后约 1h 内以写入缓存为准） */
+async function handleSave() {
+  const ok = DASHBOARD_TEMPLATE_OPTIONS.some(
+    (i) => i.value === templateId.value,
+  );
+  if (!ok) {
+    message.error('请选择有效的模板版本');
+    return;
+  }
+  saving.value = true;
+  try {
+    await saveSystemConfig([
+      {
+        config_key: 'dashboard_default_template',
+        config_value: templateId.value,
+        value_type: 'string',
+        config_group: 'dashboard',
+        description:
+          '数据大屏默认模板 id（与 xk-data 注册表一致，如 classic/liquid）',
+        sort: 400,
+      },
+    ]);
+    message.success('保存成功');
+  } finally {
+    saving.value = false;
+  }
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div class="cfg-panel" :class="{ 'opacity-60': loading }">
+    <div class="cfg-panel-body">
+      <div class="mb-2 font-medium text-[hsl(var(--foreground))]">
+        默认模板版本
+      </div>
+      <div class="mb-3 text-sm text-[hsl(var(--muted-foreground))]">
+        大屏（xk-data）每次刷新会检查本配置。本机已选模板与默认不一致时弹出确认：可继续用当前，或更新为默认；选「使用当前」后会记住，直到此处默认被改成其他版本再提示。
+      </div>
+      <Select
+        v-model:value="templateId"
+        class="w-full max-w-md"
+        :options="selectOptions"
+        show-search
+        option-filter-prop="label"
+        placeholder="请选择默认模板"
+      />
+      <div
+        v-if="currentDesc"
+        class="mt-2 text-sm text-[hsl(var(--muted-foreground))]"
+      >
+        {{ currentDesc }}
+      </div>
+    </div>
+    <div class="cfg-panel-footer">
+      <Button type="primary" :loading="saving" @click="handleSave">
+        保存本模块配置
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/system/system-config/config/dashboard-templates.ts b/apps/web-antd/src/views/system/system-config/config/dashboard-templates.ts
new file mode 100644
index 00000000..b890119d
--- /dev/null
+++ b/apps/web-antd/src/views/system/system-config/config/dashboard-templates.ts
@@ -0,0 +1,30 @@
+/**
+ * 数据大屏可选模板（与 xk-data/src/templates/index.js 注册表 id/name 对齐）
+ * 为什么放 admin 常量而不是跨仓 import：两仓独立构建，改模板时两边同步维护即可
+ */
+export const DASHBOARD_TEMPLATE_OPTIONS = [
+  { label: '经典深蓝', value: 'classic', desc: '默认版式 · 石板蓝玻璃拟态' },
+  { label: '极光之夜', value: 'aurora', desc: '青蓝极光 · 地图居中三栏' },
+  { label: '赛博紫电', value: 'cyber', desc: '深紫科技 · 数据流线网格' },
+  { label: '翡翠青囊', value: 'jade', desc: '墨绿鎏金 · 中医药行业风' },
+  { label: '黑金年报', value: 'gold', desc: '黑金描边 · 年报发布风' },
+  { label: '星空态势', value: 'starfield', desc: '星空地图铺底 · 态势感知' },
+  { label: '冰蓝简报', value: 'glacier', desc: '亮色展厅款 · 细腻卡片' },
+  { label: '水墨丹青', value: 'ink', desc: '政务国风 · 宣纸朱砂' },
+  { label: '热力监控', value: 'ember', desc: '暗红热力 · 监控告警风' },
+  { label: '深海碧波', value: 'ocean', desc: '海洋蓝绿 · 底部波浪' },
+  { label: '紫域星云', value: 'nebula', desc: '星云渐变 · 强玻璃拟态' },
+  { label: '蜂巢矩阵', value: 'hex', desc: '六边形蜂窝 · 军工态势风' },
+  { label: '量子网格', value: 'quantum', desc: '亮青扫描线 · 政企科技角框' },
+  { label: '琥珀能源', value: 'amber', desc: '暖橙能源风 · 阶梯趋势' },
+  { label: '青玉医脉', value: 'pulse', desc: '青绿医疗风 · 脉搏线动效' },
+  { label: '曙光红金', value: 'dawn', desc: '庄重红金 · 政务发布风' },
+  { label: '钛银旗舰', value: 'titanium', desc: '高级灰蓝 · 仪表盘元素' },
+  { label: '蓝图线框', value: 'blueprint', desc: '工程蓝图 · 网格线框风' },
+  { label: '玻璃晶体', value: 'crystal', desc: '通透玻璃 · 光斑呼吸' },
+  { label: '雷达指挥', value: 'radar', desc: '指挥中心 · 中央雷达扫描' },
+  { label: '呼吸流光', value: 'flux', desc: '暗夜蓝紫 · 流光描边面板' },
+  { label: '液态玻璃', value: 'liquid', desc: 'Apple 液态玻璃 · Canvas 图标' },
+] as const;
+
+export const DEFAULT_DASHBOARD_TEMPLATE = 'classic';
diff --git a/apps/web-antd/src/views/system/system-config/index.vue b/apps/web-antd/src/views/system/system-config/index.vue
index 68e6b703..6a432bc6 100644
--- a/apps/web-antd/src/views/system/system-config/index.vue
+++ b/apps/web-antd/src/views/system/system-config/index.vue
@@ -14,6 +14,7 @@ import { Page } from '@vben/common-ui';
 import { Card } from 'ant-design-vue';
 
 import AiModelConfigPanel from './components/ai-model-config-panel.vue';
+import DashboardConfigPanel from './components/dashboard-config-panel.vue';
 import DictSearchConfigPanel from './components/dict-search-config-panel.vue';
 import DispenseSignConfigPanel from './components/dispense-sign-config-panel.vue';
 import DoctorLoginConfigPanel from './components/doctor-login-config-panel.vue';
@@ -93,6 +94,11 @@ const menuItems: MenuItem[] = [
     title: '工作台',
     component: WorkbenchConfigPanel,
   },
+  {
+    key: 'dashboard',
+    title: '数据大屏',
+    component: DashboardConfigPanel,
+  },
   {
     key: 'dispense_sign',
     title: '处方签名',
diff --git a/apps/web-antd/src/views/system/vip/duration/index.vue b/apps/web-antd/src/views/system/vip/duration/index.vue
index f7bb012d..fd55d551 100644
--- a/apps/web-antd/src/views/system/vip/duration/index.vue
+++ b/apps/web-antd/src/views/system/vip/duration/index.vue
@@ -1,23 +1,16 @@
 <script lang="ts" setup>
 /**
  * VIP 时效类型徽标：卡片布局 + 筛选（名称/编码/状态）
- * 卡片突出展示宽幅丝带图
+ * 卡片突出展示宽幅丝带图；外壳统一 GlassCard
  */
 import { onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import {
-  Button,
-  Card,
-  Empty,
-  Input,
-  Pagination,
-  Select,
-  Tag,
-} from 'ant-design-vue';
+import { Button, Empty, Input, Pagination, Select, Tag } from 'ant-design-vue';
 
-import { TableAction } from '#/components/table-action';
+import { GlassCard } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
 
 import { getVipDurationList } from './api';
 import FormModal from './components/modal.vue';
@@ -80,6 +73,11 @@ const showModal = (row: any) => {
   formModalApi.open();
 };
 
+/** 启用/禁用对应卡片微光色 */
+function durationTone(item: Record<string, any>) {
+  return item.status === 1 ? 'success' : 'primary';
+}
+
 onMounted(loadList);
 </script>
 <template>
@@ -112,16 +110,14 @@ onMounted(loadList);
         <Button @click="onReset">重置</Button>
       </div>
       <Empty v-if="!loading && !list.length" description="暂无时效类型" />
-      <div
-        v-else
-        class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
-      >
-        <Card
+      <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <GlassCard
           v-for="item in list"
           :key="item.id"
-          size="small"
-          class="vip-duration-card"
-          :loading="loading"
+          hoverable
+          icon="lucide:ribbon"
+          :tone="durationTone(item)"
+          padding="md"
         >
           <div class="flex flex-col items-center">
             <div class="vip-duration-card__ribbon-wrap mb-4">
@@ -135,19 +131,31 @@ onMounted(loadList);
                 未上传丝带
               </div>
             </div>
-            <div class="mb-1 text-lg font-semibold dark:text-gray-100">{{ item.name }}</div>
-            <div class="mb-2 text-sm text-gray-500 dark:text-gray-400">{{ item.code }}</div>
-            <Tag
-              class="mb-3"
-              :color="item.status === 1 ? 'success' : 'default'"
+            <div
+              class="mb-1 text-lg font-semibold text-[hsl(var(--foreground))]"
             >
+              {{ item.name }}
+            </div>
+            <div class="mb-2 text-sm text-[hsl(var(--muted-foreground))]">
+              {{ item.code }}
+            </div>
+            <Tag :color="item.status === 1 ? 'success' : 'default'">
               {{ item.status === 1 ? '启用' : '禁用' }}
             </Tag>
-            <TableAction
-              :actions="[{ label: '编辑上传丝带', onClick: () => showModal(item) }]"
-            />
           </div>
-        </Card>
+          <template #footer>
+            <CardActions
+              :max-visible="1"
+              :actions="[
+                {
+                  label: '编辑上传丝带',
+                  icon: 'lucide:image-plus',
+                  onClick: () => showModal(item),
+                },
+              ]"
+            />
+          </template>
+        </GlassCard>
       </div>
       <div class="mt-4 flex justify-end">
         <Pagination
@@ -164,18 +172,15 @@ onMounted(loadList);
   </Page>
 </template>
 <style scoped>
-.vip-duration-card :deep(.ant-card-body) {
-  padding: 24px 20px;
-}
 .vip-duration-card__ribbon-wrap {
-  width: 100%;
-  min-height: 72px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.04);
-  border-radius: 12px;
+  width: 100%;
+  min-height: 72px;
   padding: 16px 12px;
+  background: hsl(var(--muted) / 0.35);
+  border-radius: 12px;
 }
 .vip-duration-card__ribbon {
   max-width: 100%;
@@ -183,15 +188,7 @@ onMounted(loadList);
   object-fit: contain;
 }
 .vip-duration-card__ribbon-empty {
-  color: #999;
   font-size: 13px;
-}
-html.dark .vip-duration-card__ribbon-wrap,
-.dark .vip-duration-card__ribbon-wrap {
-  background: rgba(255, 255, 255, 0.06);
-}
-html.dark .vip-duration-card__ribbon-empty,
-.dark .vip-duration-card__ribbon-empty {
-  color: #a1a1aa;
+  color: hsl(var(--muted-foreground));
 }
 </style>
diff --git a/apps/web-antd/src/views/system/vip/feature/components/bind-levels-modal.vue b/apps/web-antd/src/views/system/vip/feature/components/bind-levels-modal.vue
index 2f8f6908..e016f5b5 100644
--- a/apps/web-antd/src/views/system/vip/feature/components/bind-levels-modal.vue
+++ b/apps/web-antd/src/views/system/vip/feature/components/bind-levels-modal.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 /**
- * VIP 功能反绑会员等级：卡片勾选 + 徽章图 + 全选/取消全选/反选
+ * VIP 功能反绑会员等级：GlassCard 勾选（active/clickable）+ 徽章图 + 全选/取消全选/反选
  * 真相源仍是 xk_vip_level.permissions
  */
 import { computed, ref } from 'vue';
@@ -8,6 +8,8 @@ import { computed, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { Button, Empty, message } from 'ant-design-vue';
 
+import { GlassCard } from '#/components/glass-card';
+
 import { getVipLevelOption } from '../../level/api';
 import { bindVipFeatureLevels } from '../api';
 
@@ -166,11 +168,15 @@ const [Modal, modalApi] = useVbenModal({
       v-else
       class="grid max-h-[420px] grid-cols-2 gap-3 overflow-y-auto pr-1 md:grid-cols-3"
     >
-      <div
+      <!-- 可选等级瓦片：active 表示已勾选，clickable 触发 toggle -->
+      <GlassCard
         v-for="opt in levelOptions"
         :key="opt.id"
-        class="vip-level-card"
-        :class="{ 'vip-level-card--on': isSelected(opt.id) }"
+        clickable
+        hoverable
+        padding="sm"
+        :specular="false"
+        :active="isSelected(opt.id)"
         @click="toggleLevel(opt.id)"
       >
         <div class="vip-level-card__check">
@@ -194,63 +200,41 @@ const [Modal, modalApi] = useVbenModal({
           }}</span>
         </div>
         <div class="vip-level-card__meta">权重 {{ opt.weight }}</div>
-      </div>
+      </GlassCard>
     </div>
   </Modal>
 </template>
 
 <style scoped>
-.vip-level-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 14px 10px 12px;
-  border: 1px solid hsl(var(--border));
-  border-radius: 10px;
-  background: hsl(var(--card, var(--background)));
-  cursor: pointer;
-  transition:
-    border-color 0.15s,
-    background 0.15s,
-    box-shadow 0.15s;
-  user-select: none;
-}
-.vip-level-card:hover {
-  border-color: hsl(var(--primary) / 0.45);
-}
-.vip-level-card--on {
-  border-color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.08);
-  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.25);
-}
 .vip-level-card__check {
   position: absolute;
   top: 8px;
   right: 8px;
+  z-index: 1;
   width: 20px;
   height: 20px;
-  border-radius: 50%;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  color: hsl(var(--primary));
   font-size: 12px;
-  line-height: 18px;
-  text-align: center;
   font-weight: 700;
+  line-height: 18px;
+  color: hsl(var(--primary));
+  text-align: center;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 50%;
 }
-.vip-level-card--on .vip-level-card__check {
-  border-color: hsl(var(--primary));
+/* GlassCard active 时勾选圆点跟主色，文字用前景色保证暗色可读 */
+:deep(.glass-card--active) .vip-level-card__check {
+  color: hsl(var(--primary-foreground, var(--background)));
   background: hsl(var(--primary));
-  color: #fff;
+  border-color: hsl(var(--primary));
 }
 .vip-level-card__badge {
-  width: 72px;
-  height: 72px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 8px;
+  width: 72px;
+  height: 72px;
+  margin: 0 auto 8px;
 }
 .vip-level-card__img {
   max-width: 72px;
@@ -258,23 +242,23 @@ const [Modal, modalApi] = useVbenModal({
   object-fit: contain;
 }
 .vip-level-card__placeholder {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background: hsl(var(--muted) / 0.5);
-  color: hsl(var(--muted-foreground));
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 56px;
+  height: 56px;
   font-size: 20px;
   font-weight: 600;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 0.5);
+  border-radius: 50%;
 }
 .vip-level-card__name {
   display: flex;
   flex-wrap: wrap;
+  gap: 4px 6px;
   align-items: baseline;
   justify-content: center;
-  gap: 4px 6px;
   font-size: 14px;
   font-weight: 600;
   color: hsl(var(--foreground));
@@ -291,4 +275,8 @@ const [Modal, modalApi] = useVbenModal({
   color: hsl(var(--muted-foreground));
   text-align: center;
 }
+/* GlassCard 本体需 relative，勾选角标才能贴右上角 */
+:deep(.glass-card) {
+  position: relative;
+}
 </style>
diff --git a/apps/web-antd/src/views/system/vip/feature/index.vue b/apps/web-antd/src/views/system/vip/feature/index.vue
index f3589ebc..ef8e6865 100644
--- a/apps/web-antd/src/views/system/vip/feature/index.vue
+++ b/apps/web-antd/src/views/system/vip/feature/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 /**
  * VIP 功能字典列表：维护功能码，并支持反绑「开放给哪些会员等级」
+ * 卡片外壳统一 GlassCard
  */
 import { onMounted, reactive, ref } from 'vue';
 
@@ -8,7 +9,6 @@ import { Page, useVbenModal } from '@vben/common-ui';
 
 import {
   Button,
-  Card,
   Empty,
   Input,
   Pagination,
@@ -17,7 +17,8 @@ import {
   message,
 } from 'ant-design-vue';
 
-import { TableAction } from '#/components/table-action';
+import { GlassCard } from '#/components/glass-card';
+import { CardActions, TableAction } from '#/components/table-action';
 
 import { deleteVipFeature, getVipFeatureList } from './api';
 import BindLevelsModal from './components/bind-levels-modal.vue';
@@ -109,6 +110,11 @@ const handleDelete = (id: number) => {
   });
 };
 
+/** 启用/禁用对应卡片微光 */
+function featureTone(item: Record<string, any>) {
+  return item.status === 1 ? 'success' : 'primary';
+}
+
 onMounted(loadList);
 </script>
 <template>
@@ -150,31 +156,27 @@ onMounted(loadList);
           ]"
         />
       </div>
-      <div v-if="list.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
-        <Card v-for="item in list" :key="item.id" size="small" :loading="loading">
+      <div
+        v-if="list.length"
+        class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
+      >
+        <GlassCard
+          v-for="item in list"
+          :key="item.id"
+          hoverable
+          icon="lucide:puzzle"
+          :tone="featureTone(item)"
+          padding="md"
+        >
           <template #title>
             <span class="font-medium">{{ item.name }}</span>
-            <Tag class="ml-2" :color="item.status === 1 ? 'success' : 'default'">
+          </template>
+          <template #extra>
+            <Tag :color="item.status === 1 ? 'success' : 'default'">
               {{ item.status_txt }}
             </Tag>
           </template>
-          <template #extra>
-            <TableAction
-              :actions="[
-                { label: '绑定等级', onClick: () => openBindLevels(item) },
-                { label: '编辑', onClick: () => showModal(item, true) },
-                {
-                  label: '删除',
-                  danger: true,
-                  popConfirm: {
-                    title: '确认删除该功能？',
-                    confirm: () => handleDelete(item.id),
-                  },
-                },
-              ]"
-            />
-          </template>
-          <div class="text-sm text-[hsl(var(--muted-foreground))]">
+          <div class="text-sm text-muted-foreground">
             <div>编码：{{ item.code }}</div>
             <div class="mt-1">说明：{{ item.description || '-' }}</div>
             <div class="mt-1">排序：{{ item.sort }}</div>
@@ -212,7 +214,34 @@ onMounted(loadList);
               <span v-else class="text-xs">未绑定任何会员等级</span>
             </div>
           </div>
-        </Card>
+          <!-- footer：CardActions 默认玻璃胶囊 + fill 沾满等分 -->
+          <template #footer>
+            <CardActions
+              :max-visible="3"
+              :actions="[
+                {
+                  label: '绑定等级',
+                  icon: 'lucide:link-2',
+                  onClick: () => openBindLevels(item),
+                },
+                {
+                  label: '编辑',
+                  icon: 'lucide:pencil',
+                  onClick: () => showModal(item, true),
+                },
+                {
+                  label: '删除',
+                  icon: 'lucide:trash-2',
+                  danger: true,
+                  popConfirm: {
+                    title: '确认删除该功能？',
+                    confirm: () => handleDelete(item.id),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </GlassCard>
       </div>
       <Empty v-else description="暂无功能，请先新增或执行 SQL 种子" />
       <div class="mt-4 flex justify-end">
@@ -231,12 +260,12 @@ onMounted(loadList);
 <style scoped>
 .bound-vip-chip {
   display: inline-flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
   padding: 4px 8px 4px 4px;
-  border-radius: 8px;
-  border: 1px solid hsl(var(--border));
   background: hsl(var(--muted) / 0.25);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
 }
 .bound-vip-chip__img {
   width: 28px;
@@ -244,16 +273,16 @@ onMounted(loadList);
   object-fit: contain;
 }
 .bound-vip-chip__fallback {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 28px;
+  height: 28px;
   font-size: 12px;
   font-weight: 600;
-  background: hsl(var(--muted) / 0.5);
   color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 0.5);
+  border-radius: 50%;
 }
 .bound-vip-chip__text {
   display: inline-flex;
@@ -262,10 +291,10 @@ onMounted(loadList);
   line-height: 1.2;
 }
 .bound-vip-chip__name {
-  font-size: 12px;
-  color: hsl(var(--foreground));
   max-width: 96px;
   overflow: hidden;
+  font-size: 12px;
+  color: hsl(var(--foreground));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
diff --git a/apps/web-antd/src/views/system/vip/level/index.vue b/apps/web-antd/src/views/system/vip/level/index.vue
index 82f453ea..44cb3aae 100644
--- a/apps/web-antd/src/views/system/vip/level/index.vue
+++ b/apps/web-antd/src/views/system/vip/level/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 /**
  * VIP 等级配置：卡片布局 + 筛选（名称/编码/等级组/状态）
+ * 卡片外壳统一 GlassCard，边框微光强调等级状态
  */
 import { onMounted, reactive, ref } from 'vue';
 
@@ -8,7 +9,6 @@ import { Page, useVbenModal } from '@vben/common-ui';
 
 import {
   Button,
-  Card,
   Empty,
   Input,
   Pagination,
@@ -17,14 +17,12 @@ import {
   message,
 } from 'ant-design-vue';
 
-import { TableAction } from '#/components/table-action';
+import { GlassCard } from '#/components/glass-card';
+import { CardActions, TableAction } from '#/components/table-action';
 
 import { deleteVipLevel, getVipLevelList } from './api';
 import FormModal from './components/modal.vue';
-import {
-  STATUS_OPTIONS,
-  VIP_TIER_GROUP_OPTIONS,
-} from './config/constants';
+import { STATUS_OPTIONS, VIP_TIER_GROUP_OPTIONS } from './config/constants';
 
 defineOptions({ name: 'VipLevel' });
 
@@ -95,6 +93,11 @@ function tierLabel(v: number) {
   return VIP_TIER_GROUP_OPTIONS.find((o) => o.value === v)?.label || '-';
 }
 
+/** 启用用 success 微光，禁用用 muted 系（走 primary 弱化） */
+function levelTone(item: Record<string, any>) {
+  return item.status === 1 ? 'success' : 'primary';
+}
+
 onMounted(loadList);
 </script>
 <template>
@@ -150,12 +153,13 @@ onMounted(loadList);
         v-else
         class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
       >
-        <Card
+        <GlassCard
           v-for="item in list"
           :key="item.id"
-          size="small"
-          class="vip-level-card"
-          :loading="loading"
+          hoverable
+          icon="lucide:crown"
+          :tone="levelTone(item)"
+          padding="md"
         >
           <div class="flex flex-col items-center text-center">
             <img
@@ -164,15 +168,17 @@ onMounted(loadList);
               alt=""
               class="mb-3 h-24 w-24 object-contain"
             />
-            <div
-              v-else
-              class="mb-3 flex h-24 w-24 items-center justify-center rounded-full bg-gray-100 text-2xl font-bold text-gray-400 dark:bg-gray-800 dark:text-gray-500"
-            >
+            <div v-else class="vip-level-fallback">
               {{ item.code }}
             </div>
-            <div class="mb-1 text-base font-semibold dark:text-gray-100">
+            <div
+              class="mb-1 text-base font-semibold text-[hsl(var(--foreground))]"
+            >
               {{ item.name }}
-              <span class="ml-1 text-sm font-normal text-gray-500 dark:text-gray-400">{{ item.code }}</span>
+              <span
+                class="ml-1 text-sm font-normal text-[hsl(var(--muted-foreground))]"
+                >{{ item.code }}</span
+              >
             </div>
             <div class="mb-2 flex flex-wrap justify-center gap-1">
               <Tag>{{ tierLabel(item.tier_group) }}</Tag>
@@ -181,24 +187,32 @@ onMounted(loadList);
               </Tag>
               <Tag color="blue">¥{{ item.price }}</Tag>
             </div>
-            <div class="mb-3 line-clamp-2 min-h-10 text-xs text-gray-500 dark:text-gray-400">
+            <div class="line-clamp-2 min-h-10 text-xs text-muted-foreground">
               {{ item.description || '暂无说明' }}
             </div>
-            <TableAction
+          </div>
+          <template #footer>
+            <CardActions
+              :max-visible="2"
               :actions="[
-                { label: '编辑', onClick: () => showModal(item, true) },
+                {
+                  label: '编辑',
+                  icon: 'lucide:pencil',
+                  onClick: () => showModal(item, true),
+                },
                 {
                   label: '删除',
-                  color: 'error',
+                  icon: 'lucide:trash-2',
+                  danger: true,
                   popConfirm: {
                     title: '确定删除该等级？',
-                    onConfirm: () => handleDelete(item.id),
+                    confirm: () => handleDelete(item.id),
                   },
                 },
               ]"
             />
-          </div>
-        </Card>
+          </template>
+        </GlassCard>
       </div>
       <div class="mt-4 flex justify-end">
         <Pagination
@@ -216,7 +230,17 @@ onMounted(loadList);
   </Page>
 </template>
 <style scoped>
-.vip-level-card :deep(.ant-card-body) {
-  padding: 20px 16px;
+.vip-level-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 96px;
+  margin-bottom: 12px;
+  font-size: 24px;
+  font-weight: 700;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 0.45);
+  border-radius: 9999px;
 }
 </style>
diff --git a/apps/web-antd/src/views/system/vip/record/components/VipRecordCardList.vue b/apps/web-antd/src/views/system/vip/record/components/VipRecordCardList.vue
new file mode 100644
index 00000000..182bb1f3
--- /dev/null
+++ b/apps/web-antd/src/views/system/vip/record/components/VipRecordCardList.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+/**
+ * VIP 开通记录卡片视图
+ * 字段与列表对齐：徽标、原价/实付、开通方式、操作人、时间
+ */
+import { ref } from 'vue';
+
+import { GlassCard, GlassCardList } from '#/components/glass-card';
+import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
+
+import { getVipRecordList } from '../api';
+
+defineOptions({ name: 'VipRecordCardList' });
+
+const props = defineProps<{
+  formValues?: Record<string, any>;
+}>();
+
+const listRef = ref<null | {
+  refreshKeepPage: () => Promise<void>;
+  reload: () => Promise<void>;
+}>(null);
+
+async function reload() {
+  await listRef.value?.reload();
+}
+
+async function refreshKeepPage() {
+  await listRef.value?.refreshKeepPage();
+}
+
+defineExpose({ reload, refreshKeepPage });
+</script>
+
+<template>
+  <GlassCardList
+    ref="listRef"
+    :fetcher="getVipRecordList"
+    :form-values="props.formValues"
+    :min-card-width="320"
+    empty-text="暂无开通记录"
+  >
+    <template #card="{ row }">
+      <GlassCard hoverable icon="lucide:receipt" tone="primary">
+        <template #title>
+          <span :title="row.store_name">{{ row.store_name || '-' }}</span>
+        </template>
+        <template #subtitle>
+          #{{ row.id }} · 门店ID {{ row.store_id || '-' }}
+        </template>
+        <template #extra>
+          <VipBadgeCombo
+            size="md"
+            :badge-url="row.badge_url"
+            :duration-badge-url="row.duration_badge_url"
+            :level-name="row.level_name"
+            :duration-label="row.duration_label"
+          />
+        </template>
+        <div class="vip-record-card__amount-row">
+          <span class="vip-record-card__amount"
+            ><i>¥</i>{{ row.pay_amount ?? '0' }}</span
+          >
+          <span class="vip-record-card__origin"
+            >原价 ¥{{ row.original_price ?? '0' }}</span
+          >
+        </div>
+        <dl class="vip-record-card__kv">
+          <div class="vip-record-card__kv-item">
+            <dt>会员类型</dt>
+            <dd>{{ row.duration_label || '-' }}</dd>
+          </div>
+          <div class="vip-record-card__kv-item">
+            <dt>等级</dt>
+            <dd>{{ row.level_name || '-' }}（{{ row.level_code || '-' }}）</dd>
+          </div>
+          <div class="vip-record-card__kv-item">
+            <dt>开通方式</dt>
+            <dd>{{ row.open_type_txt || '-' }}</dd>
+          </div>
+          <div class="vip-record-card__kv-item">
+            <dt>操作人</dt>
+            <dd>{{ row.operator_name || '-' }}</dd>
+          </div>
+          <div class="vip-record-card__kv-item">
+            <dt>到期时间</dt>
+            <dd>{{ row.expire_at || '-' }}</dd>
+          </div>
+          <div class="vip-record-card__kv-item">
+            <dt>开通时间</dt>
+            <dd>{{ row.created_at || '-' }}</dd>
+          </div>
+          <div
+            v-if="row.remark"
+            class="vip-record-card__kv-item vip-record-card__kv-item--full"
+          >
+            <dt>备注</dt>
+            <dd :title="row.remark">{{ row.remark }}</dd>
+          </div>
+        </dl>
+      </GlassCard>
+    </template>
+  </GlassCardList>
+</template>
+
+<style scoped>
+.vip-record-card__amount-row {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  margin-bottom: 10px;
+}
+
+.vip-record-card__amount {
+  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 22px;
+  font-weight: 700;
+  color: hsl(var(--primary));
+}
+
+.vip-record-card__amount i {
+  margin-right: 1px;
+  font-size: 14px;
+  font-style: normal;
+}
+
+.vip-record-card__origin {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  text-decoration: line-through;
+}
+
+.vip-record-card__kv {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+  margin: 0;
+}
+
+.vip-record-card__kv-item--full {
+  grid-column: 1 / -1;
+}
+
+.vip-record-card__kv-item dt {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.vip-record-card__kv-item dd {
+  margin: 2px 0 0;
+  overflow: hidden;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web-antd/src/views/system/vip/record/config/search.ts b/apps/web-antd/src/views/system/vip/record/config/search.ts
index eccc2578..aafb9a59 100644
--- a/apps/web-antd/src/views/system/vip/record/config/search.ts
+++ b/apps/web-antd/src/views/system/vip/record/config/search.ts
@@ -1,19 +1,18 @@
-import type { VbenFormProps } from '@vben/common-ui';
+import type { VbenFormProps } from '#/adapter/form';
 
+/** VIP 开通记录搜索（列表/卡片双视图共用） */
 export const formOptions: VbenFormProps = {
-  layout: 'inline',
-  showResetButton: true,
-  showSubmitButton: true,
-  schemas: [
+  collapsed: false,
+  schema: [
     {
       fieldName: 'store_id',
-      component: 'Input',
+      component: 'VbenInput',
       label: '门店ID',
       componentProps: { placeholder: '门店ID', allowClear: true },
     },
     {
       fieldName: 'level_code',
-      component: 'Input',
+      component: 'VbenInput',
       label: '等级编码',
       componentProps: { placeholder: '如 V5', allowClear: true },
     },
@@ -30,4 +29,6 @@ export const formOptions: VbenFormProps = {
       },
     },
   ],
+  showCollapseButton: false,
+  submitButtonOptions: { content: '查询' },
 };
diff --git a/apps/web-antd/src/views/system/vip/record/config/table.ts b/apps/web-antd/src/views/system/vip/record/config/table.ts
index 44515199..e5be47a4 100644
--- a/apps/web-antd/src/views/system/vip/record/config/table.ts
+++ b/apps/web-antd/src/views/system/vip/record/config/table.ts
@@ -2,43 +2,52 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { getVipRecordList } from '../api';
 
-export const gridOptions: VxeGridProps<any> = {
-  columnConfig: { useKey: true },
-  rowConfig: { useKey: true, isHover: true },
-  columns: [
-    { field: 'id', title: 'ID', width: 70 },
-    { field: 'store_id', title: '门店ID', width: 90 },
-    { field: 'store_name', title: '门店', minWidth: 140 },
-    {
-      field: 'vip_badge',
-      title: 'VIP徽标',
-      width: 100,
-      slots: { default: 'vip_badge' },
-    },
-    { field: 'duration_label', title: '会员类型', width: 110 },
-    { field: 'level_name', title: '等级', width: 110 },
-    { field: 'level_code', title: '编码', width: 100 },
-    { field: 'original_price', title: '原价', width: 90 },
-    { field: 'pay_amount', title: '实付', width: 90 },
-    { field: 'open_type_txt', title: '开通方式', width: 110 },
-    { field: 'operator_name', title: '操作人', width: 110 },
-    { field: 'expire_at', title: '到期时间', width: 170 },
-    { field: 'created_at', title: '开通时间', width: 170 },
-    { field: 'remark', title: '备注', minWidth: 120 },
-  ],
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        return await getVipRecordList({
-          page: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
+/**
+ * VIP 开通记录表格
+ * @param getSearchValues 顶部统一搜索表单现值
+ */
+export function createGridOptions(
+  getSearchValues: () => Promise<Record<string, any>>,
+): VxeGridProps<any> {
+  return {
+    columnConfig: { useKey: true },
+    rowConfig: { useKey: true, isHover: true },
+    columns: [
+      { field: 'id', title: 'ID', width: 70 },
+      { field: 'store_id', title: '门店ID', width: 90 },
+      { field: 'store_name', title: '门店', minWidth: 140 },
+      {
+        field: 'vip_badge',
+        title: 'VIP徽标',
+        width: 100,
+        slots: { default: 'vip_badge' },
+      },
+      { field: 'duration_label', title: '会员类型', width: 110 },
+      { field: 'level_name', title: '等级', width: 110 },
+      { field: 'level_code', title: '编码', width: 100 },
+      { field: 'original_price', title: '原价', width: 90 },
+      { field: 'pay_amount', title: '实付', width: 90 },
+      { field: 'open_type_txt', title: '开通方式', width: 110 },
+      { field: 'operator_name', title: '操作人', width: 110 },
+      { field: 'expire_at', title: '到期时间', width: 170 },
+      { field: 'created_at', title: '开通时间', width: 170 },
+      { field: 'remark', title: '备注', minWidth: 120 },
+    ],
+    keepSource: true,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const formValues = await getSearchValues();
+          return await getVipRecordList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
       },
     },
-  },
-  border: false,
-  toolbarConfig: { search: true, refresh: true, zoom: true },
-};
+    border: false,
+    toolbarConfig: { search: false, refresh: true, zoom: true },
+  };
+}
diff --git a/apps/web-antd/src/views/system/vip/record/index.vue b/apps/web-antd/src/views/system/vip/record/index.vue
index e1bc58a8..2a41415f 100644
--- a/apps/web-antd/src/views/system/vip/record/index.vue
+++ b/apps/web-antd/src/views/system/vip/record/index.vue
@@ -1,23 +1,57 @@
 <script lang="ts" setup>
 /**
  * VIP 开通记录列表：组合徽标（等级+丝带）+ 原价/实付
+ * 顶部统一搜索 + 列表/卡片双视图
  */
+import { ref, watch } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import { useDualViewSearch } from '#/composables/use-dual-view-search';
 
+import VipRecordCardList from './components/VipRecordCardList.vue';
 import { formOptions } from './config/search';
-import { gridOptions } from './config/table';
+import { createGridOptions } from './config/table';
 
 defineOptions({ name: 'VipRecord' });
 
-const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+const viewMode = useViewMode('vip-record-view-mode');
+const cardListRef = ref<InstanceType<typeof VipRecordCardList> | null>(null);
+
+const { SearchForm, searchValues, readLiveSearchValues } = useDualViewSearch({
+  formOptions,
+  viewMode,
+  onListSearch: () => {
+    // eslint-disable-next-line no-use-before-define
+    gridApi.reload();
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: createGridOptions(() => readLiveSearchValues()),
+});
+
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    gridApi.query();
+  }
+});
 </script>
 <template>
   <Page auto-content-height title="VIP开通记录">
-    <div class="p-4">
-      <Grid>
+    <div class="flex h-full min-h-0 flex-col overflow-hidden p-4">
+      <div
+        class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+      >
+        <SearchForm />
+      </div>
+      <div class="mb-3 shrink-0">
+        <ViewModeSwitch v-model="viewMode" />
+      </div>
+      <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
         <template #vip_badge="{ row }">
           <VipBadgeCombo
             size="md"
@@ -28,6 +62,12 @@ const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
           />
         </template>
       </Grid>
+      <VipRecordCardList
+        v-else
+        ref="cardListRef"
+        class="h-0 min-h-0 flex-1 overflow-auto"
+        :form-values="searchValues"
+      />
     </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/vip/store/components/VipStoreCardList.vue b/apps/web-antd/src/views/system/vip/store/components/VipStoreCardList.vue
new file mode 100644
index 00000000..b3b9e91e
--- /dev/null
+++ b/apps/web-antd/src/views/system/vip/store/components/VipStoreCardList.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+/**
+ * 门店 VIP 开通卡片视图
+ * 徽标 + 等级/时效/到期；点击 VIP管理 与列表行操作同一入口
+ */
+import type { ActionItem } from '#/components/table-action';
+
+import { ref } from 'vue';
+
+import { GlassCard, GlassCardList } from '#/components/glass-card';
+import { CardActions } from '#/components/table-action';
+import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
+import { formatVipExpireAt } from '#/utils/vip';
+
+import { getVipStoreList } from '../api';
+
+defineOptions({ name: 'VipStoreCardList' });
+
+const props = defineProps<{
+  buildRowActions: (row: Record<string, any>) => ActionItem[];
+  formValues?: Record<string, any>;
+  /** 点徽标打开 VIP 入口（与列表 #vip_badge 槽同一口径） */
+  onBadgeClick?: (row: Record<string, any>) => void;
+}>();
+
+const listRef = ref<null | {
+  refreshKeepPage: () => Promise<void>;
+  reload: () => Promise<void>;
+}>(null);
+
+function expireText(row: Record<string, any>) {
+  return (
+    formatVipExpireAt(row.vip, { emptyText: '-', lifetimeText: '终身' }) || '-'
+  );
+}
+
+function hasVisibleAction(row: Record<string, any>) {
+  return props.buildRowActions(row).some((action) => action.ifShow !== false);
+}
+
+async function reload() {
+  await listRef.value?.reload();
+}
+
+async function refreshKeepPage() {
+  await listRef.value?.refreshKeepPage();
+}
+
+defineExpose({ reload, refreshKeepPage });
+</script>
+
+<template>
+  <GlassCardList
+    ref="listRef"
+    :fetcher="getVipStoreList"
+    :form-values="props.formValues"
+    :min-card-width="300"
+    row-key="store_id"
+    empty-text="暂无门店 VIP 数据"
+  >
+    <template #card="{ row }">
+      <GlassCard
+        hoverable
+        icon="lucide:store"
+        :tone="row.vip ? 'success' : 'primary'"
+      >
+        <template #title>
+          <span :title="row.store_name">{{ row.store_name || '-' }}</span>
+        </template>
+        <template #subtitle> 门店ID {{ row.store_id || '-' }} </template>
+        <template #extra>
+          <div class="cursor-pointer" @click.stop="props.onBadgeClick?.(row)">
+            <VipBadgeCombo
+              size="md"
+              :badge-url="row.vip?.badge_url"
+              :duration-badge-url="row.vip?.duration_badge_url"
+              :level-name="row.vip?.level_name"
+              :duration-label="row.vip?.duration_label"
+            />
+          </div>
+        </template>
+        <dl class="vip-store-card__kv">
+          <div class="vip-store-card__kv-item">
+            <dt>会员类型</dt>
+            <dd>{{ row.vip?.duration_label || '-' }}</dd>
+          </div>
+          <div class="vip-store-card__kv-item">
+            <dt>会员等级</dt>
+            <dd>
+              {{
+                row.vip
+                  ? `${row.vip.level_name || ''}（${row.vip.level_code || ''}）`
+                  : '-'
+              }}
+            </dd>
+          </div>
+          <div class="vip-store-card__kv-item vip-store-card__kv-item--full">
+            <dt>到期时间</dt>
+            <dd>{{ expireText(row) }}</dd>
+          </div>
+        </dl>
+        <template v-if="hasVisibleAction(row)" #footer>
+          <CardActions :actions="props.buildRowActions(row)" :max-visible="2" />
+        </template>
+      </GlassCard>
+    </template>
+  </GlassCardList>
+</template>
+
+<style scoped>
+.vip-store-card__kv {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+  margin: 0;
+}
+
+.vip-store-card__kv-item--full {
+  grid-column: 1 / -1;
+}
+
+.vip-store-card__kv-item dt {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.vip-store-card__kv-item dd {
+  margin: 2px 0 0;
+  overflow: hidden;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web-antd/src/views/system/vip/store/config/search.ts b/apps/web-antd/src/views/system/vip/store/config/search.ts
index 7c842085..99a9e9f7 100644
--- a/apps/web-antd/src/views/system/vip/store/config/search.ts
+++ b/apps/web-antd/src/views/system/vip/store/config/search.ts
@@ -1,10 +1,9 @@
-import type { VbenFormProps } from '@vben/common-ui';
+import type { VbenFormProps } from '#/adapter/form';
 
+/** 门店 VIP 开通搜索（双视图共用；字段名与后端 snake_case 对齐） */
 export const formOptions: VbenFormProps = {
-  layout: 'inline',
-  showResetButton: true,
-  showSubmitButton: true,
-  schemas: [
+  collapsed: false,
+  schema: [
     {
       fieldName: 'name',
       component: 'Input',
@@ -18,4 +17,7 @@ export const formOptions: VbenFormProps = {
       componentProps: { placeholder: '如 V5 / V0', allowClear: true },
     },
   ],
+  showCollapseButton: false,
+  submitButtonOptions: { content: '查询' },
+  submitOnEnter: true,
 };
diff --git a/apps/web-antd/src/views/system/vip/store/config/table.ts b/apps/web-antd/src/views/system/vip/store/config/table.ts
index 8b197b2a..a6b0e38c 100644
--- a/apps/web-antd/src/views/system/vip/store/config/table.ts
+++ b/apps/web-antd/src/views/system/vip/store/config/table.ts
@@ -4,56 +4,72 @@ import { formatVipExpireAt } from '#/utils/vip';
 
 import { getVipStoreList } from '../api';
 
-export const gridOptions: VxeGridProps<any> = {
-  columnConfig: { useKey: true },
-  rowConfig: { useKey: true, isHover: true },
-  columns: [
-    { field: 'store_id', title: '门店ID', width: 90 },
-    { field: 'store_name', title: '门店名称', minWidth: 160 },
-    {
-      field: 'vip_badge',
-      title: 'VIP徽标',
-      width: 100,
-      slots: { default: 'vip_badge' },
-    },
-    {
-      field: 'duration_label',
-      title: '会员类型',
-      width: 110,
-      formatter: ({ row }) => row.vip?.duration_label || '-',
-    },
-    {
-      field: 'level_name',
-      title: '会员等级',
-      minWidth: 140,
-      formatter: ({ row }) =>
-        row.vip
-          ? `${row.vip.level_name || ''}（${row.vip.level_code || ''}）`
-          : '-',
-    },
-    {
-      field: 'expire_at',
-      title: '到期时间',
-      width: 180,
-      formatter: ({ row }) =>
-        formatVipExpireAt(row.vip, { emptyText: '-', lifetimeText: '终身' }) ||
-        '-',
-    },
-    { title: '操作', slots: { default: 'action' }, width: 100, fixed: 'right' },
-  ],
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        return await getVipStoreList({
-          page: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
+/**
+ * 门店 VIP 表格
+ * @param getSearchValues 顶部统一搜索表单现值
+ */
+export function createGridOptions(
+  getSearchValues: () => Promise<Record<string, any>>,
+): VxeGridProps<any> {
+  return {
+    columnConfig: { useKey: true },
+    rowConfig: { useKey: true, isHover: true },
+    columns: [
+      { field: 'store_id', title: '门店ID', width: 90 },
+      { field: 'store_name', title: '门店名称', minWidth: 160 },
+      {
+        field: 'vip_badge',
+        title: 'VIP徽标',
+        width: 100,
+        slots: { default: 'vip_badge' },
+      },
+      {
+        field: 'duration_label',
+        title: '会员类型',
+        width: 110,
+        formatter: ({ row }) => row.vip?.duration_label || '-',
+      },
+      {
+        field: 'level_name',
+        title: '会员等级',
+        minWidth: 140,
+        formatter: ({ row }) =>
+          row.vip
+            ? `${row.vip.level_name || ''}（${row.vip.level_code || ''}）`
+            : '-',
+      },
+      {
+        field: 'expire_at',
+        title: '到期时间',
+        width: 180,
+        formatter: ({ row }) =>
+          formatVipExpireAt(row.vip, {
+            emptyText: '-',
+            lifetimeText: '终身',
+          }) || '-',
+      },
+      {
+        title: '操作',
+        slots: { default: 'action' },
+        width: 100,
+        fixed: 'right',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const formValues = await getSearchValues();
+          return await getVipStoreList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
       },
     },
-  },
-  border: false,
-  toolbarConfig: { search: true, refresh: true, zoom: true },
-};
+    border: false,
+    toolbarConfig: { search: false, refresh: true, zoom: true },
+  };
+}
diff --git a/apps/web-antd/src/views/system/vip/store/index.vue b/apps/web-antd/src/views/system/vip/store/index.vue
index cd99cd62..ba8af4dc 100644
--- a/apps/web-antd/src/views/system/vip/store/index.vue
+++ b/apps/web-antd/src/views/system/vip/store/index.vue
@@ -1,45 +1,98 @@
 <script lang="ts" setup>
 /**
  * 门店 VIP 开通页：点击徽标先进入 VIP 入口（升级 / 开通记录）
+ * 顶部统一搜索 + 列表/卡片双视图
  */
+import type { ActionItem } from '#/components/table-action';
+
+import { ref, watch } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { TableAction } from '#/components/table-action';
 import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
 import VipHubModal from '#/components/vip/VipHubModal.vue';
+import { useViewMode, ViewModeSwitch } from '#/components/view-mode-switch';
+import { useDualViewSearch } from '#/composables/use-dual-view-search';
 
+import VipStoreCardList from './components/VipStoreCardList.vue';
 import { formOptions } from './config/search';
-import { gridOptions } from './config/table';
+import { createGridOptions } from './config/table';
 
 defineOptions({ name: 'VipStore' });
 
-const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const viewMode = useViewMode('vip-store-view-mode');
+const cardListRef = ref<InstanceType<typeof VipStoreCardList> | null>(null);
+
+const { SearchForm, searchValues, readLiveSearchValues } = useDualViewSearch({
+  formOptions,
+  viewMode,
+  onListSearch: () => {
+    // eslint-disable-next-line no-use-before-define
+    gridApi.reload();
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: createGridOptions(() => readLiveSearchValues()),
+});
+
 const [HubModalComp, hubModalApi] = useVbenModal({
   connectedComponent: VipHubModal,
 });
 
-/** 打开 VIP 入口弹窗 */
+watch(viewMode, (mode, prev) => {
+  if (mode === 'list' && prev === 'card') {
+    gridApi.query();
+  }
+});
+
+/** 打开 VIP 入口弹窗；弹窗内刷新走双视图代理 */
 const openVip = (row: any) => {
   hubModalApi.setData({
     store_id: row.store_id,
     store_name: row.store_name,
     vip: row.vip,
-    gridApi,
+    gridApi: {
+      query: () => {
+        if (viewMode.value === 'list') {
+          gridApi.query();
+        } else {
+          cardListRef.value?.refreshKeepPage?.();
+        }
+      },
+      reload: () => {
+        if (viewMode.value === 'list') {
+          gridApi.reload();
+        } else {
+          cardListRef.value?.reload?.();
+        }
+      },
+    },
   });
   hubModalApi.open();
 };
+
+function buildRowActions(row: Record<string, any>): ActionItem[] {
+  return [{ label: 'VIP管理', onClick: () => openVip(row) }];
+}
 </script>
 <template>
   <Page auto-content-height title="门店VIP开通">
     <HubModalComp />
-    <div class="p-4">
-      <Grid>
+    <div class="flex h-full min-h-0 flex-col overflow-hidden p-4">
+      <div
+        class="mb-3 shrink-0 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card,var(--background)))] p-3"
+      >
+        <SearchForm />
+      </div>
+      <div class="mb-3 shrink-0">
+        <ViewModeSwitch v-model="viewMode" />
+      </div>
+      <Grid v-if="viewMode === 'list'" class="h-0 min-h-0 flex-1">
         <template #vip_badge="{ row }">
-          <div
-            class="cursor-pointer"
-            @click="openVip(row)"
-          >
+          <div class="cursor-pointer" @click="openVip(row)">
             <VipBadgeCombo
               size="md"
               :badge-url="row.vip?.badge_url"
@@ -50,11 +103,17 @@ const openVip = (row: any) => {
           </div>
         </template>
         <template #action="{ row }">
-          <TableAction
-            :actions="[{ label: 'VIP管理', onClick: () => openVip(row) }]"
-          />
+          <TableAction :actions="buildRowActions(row)" />
         </template>
       </Grid>
+      <VipStoreCardList
+        v-else
+        ref="cardListRef"
+        class="h-0 min-h-0 flex-1 overflow-auto"
+        :form-values="searchValues"
+        :build-row-actions="buildRowActions"
+        :on-badge-click="openVip"
+      />
     </div>
   </Page>
 </template>
diff --git a/lefthook.yml b/lefthook.yml
index 14b58220..5b35b80a 100644
--- a/lefthook.yml
+++ b/lefthook.yml
@@ -1,75 +1,15 @@
-# EXAMPLE USAGE:
+# Git hooks 已关闭（按业务需要临时禁用 pre-commit / commit-msg / post-merge）
+# 恢复检查时：把下方 jobs 从历史版本抄回，并执行 pnpm exec lefthook install
+# 也可临时用环境变量 LEFTHOOK=0 跳过单次提交
 #
-#   Refer for explanation to following link:
-#   https://lefthook.dev/configuration/
-#
-# pre-push:
-#   jobs:
-#     - name: packages audit
-#       tags:
-#         - frontend
-#         - security
-#       run: yarn audit
-#
-#     - name: gems audit
-#       tags:
-#         - backend
-#         - security
-#       run: bundle audit
-#
-# pre-commit:
-#   parallel: true
-#   jobs:
-#     - run: yarn eslint {staged_files}
-#       glob: "*.{js,ts,jsx,tsx}"
-#
-#     - name: rubocop
-#       glob: "*.rb"
-#       exclude:
-#         - config/application.rb
-#         - config/routes.rb
-#       run: bundle exec rubocop --force-exclusion {all_files}
-#
-#     - name: govet
-#       files: git ls-files -m
-#       glob: "*.go"
-#       run: go vet {files}
-#
-#     - script: "hello.js"
-#       runner: node
-#
-#     - script: "hello.go"
-#       runner: go run
+# 原配置含：oxlint / oxfmt / eslint / stylelint / checkType / commitlint / post-merge install
 
+# 空配置：lefthook 仍可被 install，但不会跑任何检查
 pre-commit:
-  # 串行执行（不设 parallel），避免与 check:type 同时运行导致低配机内存/CPU 瞬时飙升。
-  # lint 仅检查暂存文件并自动修复后回填，大幅降低负载；check:type 仍需全量。
-  jobs:
-    - name: oxlint
-      glob: '*.{js,jsx,ts,tsx,vue,cjs,mjs,cts,mts}'
-      run: pnpm exec oxlint --fix --type-aware --threads=4 --no-error-on-unmatched-pattern {staged_files}
-      stage_fixed: true
-    - name: oxfmt
-      glob: '*.{js,jsx,ts,tsx,vue,cjs,mjs,cts,mts,json,jsonc}'
-      run: pnpm exec oxfmt --threads=4 --no-error-on-unmatched-pattern {staged_files}
-      stage_fixed: true
-    - name: eslint
-      glob: '*.{js,jsx,ts,tsx,vue,cjs,mjs,cts,mts}'
-      run: pnpm exec eslint --fix {staged_files}
-      stage_fixed: true
-    - name: stylelint
-      glob: '*.{vue,css,less,scss}'
-      run: pnpm exec stylelint --fix {staged_files}
-      stage_fixed: true
-    - name: checkType
-      run: pnpm check:type
-
-post-merge:
-  commands:
-    install:
-      run: pnpm install
+  jobs: []
 
 commit-msg:
-  commands:
-    commitlint:
-      run: pnpm exec commitlint --edit $1
+  commands: {}
+
+post-merge:
+  commands: {}
diff --git a/package.json b/package.json
index d3840e77..b2d7351d 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "lint": "vsh lint",
     "postinstall": "pnpm -r run --if-present stub",
     "preinstall": "npx only-allow pnpm",
-    "prepare": "is-ci || pnpm exec lefthook install",
+    "prepare": "echo skip-lefthook",
     "preview": "turbo-run preview",
     "publint": "vsh publint",
     "reinstall": "pnpm run clean -- --del-lock && pnpm install",