feat:

1. 更新框架
2. 修复框架更新后导致的问题
3. 消息系统升级

.changeset/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.changeset/fancy-ears-walk.md

@@ -0,0 +1,7 @@
+---
+'@vben/styles': patch
+'@vben-core/form-ui': patch
+'@vben/web-naive': patch
+---
+
+feat(@core/form-ui): 新增 useVbenForm 数组编辑器 VbenFormFieldArray

.cursor/rules/Code-Standards.md

@@ -1,10 +0,0 @@
----
-description:
-alwaysApply: true
----
-
-1. 写代码的时候要补充详细的中文注释（每个方法是干嘛的，为什么要这样写），如果是工作区，则所有项目都适用该规则
-2. 注意不要生成太多的空行，上一部分代码和下一部分代码中间的空行不要大于2行
-3. 有封装好的方法、组件需要复用，不要重复造轮子
-4. 小程序端的抽屉全部需要用page-container来防止用户意外退出页面（记得使用v-if而不是v-show）
-5. 数据库的（created_at、updated_at、deleted_at）统一使用时间戳，不要使用字符串，并且我在查询器中一级格式化成字符串了，无需再次格式化

.cursor/rules/Code-Standards.mdc

@@ -1,10 +1,186 @@
 ---
-description:
+description: 萧康云医管理后台（Vben Admin v5 + Vue 3 + TS + Ant Design Vue）代码规范
 alwaysApply: true
 ---
 
+# 基础规范（所有项目通用）
+
 1. 写代码的时候要补充详细的中文注释（每个方法是干嘛的，为什么要这样写），如果是工作区，则所有项目都适用该规则
-2. 注意不要生成太多的空行，上一部分代码和下一部分代码中间的空行不要大于2行
+2. 注意不要生成太多的空行，上一部分代码和下一部分代码中间的空行不要大于 2 行
 3. 有封装好的方法、组件需要复用，不要重复造轮子
-4. 小程序端的抽屉全部需要用page-container来防止用户意外退出页面（记得使用v-if而不是v-show）
+4. 小程序端的抽屉全部需要用 page-container 来防止用户意外退出页面（记得使用 v-if 而不是 v-show）
 5. 数据库的（created_at、updated_at、deleted_at）统一使用时间戳，不要使用字符串，并且我在查询器中一级格式化成字符串了，无需再次格式化
+
+# 全局架构规范
+
+## 目录结构规范
+
+- 业务页面统一放在 `apps/web-antd/src/views/<端>/<模块>/`（端：system / business / doctor 等）
+- 标准 CRUD 模块目录结构：
+
+  ```
+  views/<端>/<模块>/
+  ├── index.vue                    # 列表页（Page + Grid + Modal）
+  ├── api/index.ts                 # 本模块 API（CRUD）
+  ├── config/
+  │   ├── table.ts                 # vxe-grid 列定义 + proxyConfig
+  │   ├── search.ts                # 顶部搜索表单 schema
+  │   └── form.ts                  # 新增/编辑弹窗 form schema
+  ├── components/
+  │   └── modal.vue                # 新增/编辑弹窗
+  └── utils/                       # 模块工具（可选）
+  ```
+
+- 全局复用组件放 `apps/web-antd/src/components/`
+- 表单内可用组件放 `apps/web-antd/src/components/form/components/`，文件名 kebab-case，自动注册为 schema 的 `component` 名（PascalCase 引用）
+
+## 强制复用封装（禁止重复造轮子）
+
+- 表格统一用 `useVbenVxeGrid`（来自 `#/adapter/vxe-table`），**不要直接 new VxeGrid**
+- 表单统一用 `useVbenForm`（来自 `#/adapter/form`），**不要直接写 `<Form>` + 手动校验**
+- 弹窗统一用 `useVbenModal`（来自 `@vben/common-ui`），**不要用原生 `<Modal>`**
+- 页面外壳统一用 `<Page>` 组件（来自 `@vben/common-ui`）
+- HTTP 请求统一用 `requestClient`（来自 `#/api/request`），**禁止直接 axios / fetch**
+- 行操作和工具栏按钮统一用 `<TableAction>` 组件（来自 `#/components/table-action`）
+- 业务选择器（员工、医生、门店、推广员、地区等）必须复用 `#/components/form/components/*-picker.vue`，不要重写
+
+## API 层规范
+
+- API 文件统一放在 `<模块>/api/index.ts`
+- 函数命名约定：`get{Entity}List` / `get{Entity}Option` / `get{Entity}Info` / `create{Entity}` / `update{Entity}` / `delete{Entity}`
+- URL 使用 kebab-case，统一前缀变量 `const prefix = 'xxx/'`，**URL 末尾不补 `/`**
+- GET 用 `params`，POST 用 `data`，例如：
+
+  ```ts
+  import { requestClient } from '#/api/request';
+  const prefix = 'oa-robot/';
+  export async function getOaRobotList(data: any) {
+    return requestClient.get<any>(`${prefix}list`, { params: data });
+  }
+  ```
+
+## 字段命名对齐后端
+
+- 数据库字段在前端 schema 的 `field` / `fieldName` 中保持 snake_case（如 `created_at`、`store_id`、`platform_code`），**不要转换为 camelCase**
+- 时间戳字段（`created_at` 等）后端查询器已格式化为字符串，前端**无需再次格式化**
+- TS 变量用 camelCase，常量用 UPPER_SNAKE_CASE，类型用 PascalCase
+
+## 表单校验
+
+- 必填用字符串规则 `rules: 'required'`（选择项用 `'selectRequired'`），规则定义在 `#/adapter/form.ts` 的 `defineRules`
+- 校验调用统一用 `formApi.validate().then(e => { if (e.valid) {...} })`
+- 必填字段在 schema 中加 `rules: 'required'`，禁止散落 `validator` 写法
+
+## 字典/枚举管理
+
+- 模块内建 `config/constants.ts`，导出 `{ label, value }[]` 数组，禁止在 schema 中散落字面量
+- 例如：
+
+  ```ts
+  export const OA_MESSAGE_TYPE_OPTIONS = [
+    { label: '文本', value: 'text' },
+    { label: 'Markdown', value: 'markdown' },
+  ];
+  ```
+
+## 路由规范
+
+- 业务路由通过后端动态菜单驱动（`xk_menu` 表），**不要在前端 `router/routes/modules/` 静态注册业务路由**
+- `defineOptions({ name: 'PascalCaseName' })` 必须与 `xk_menu.name` 字段一致
+
+## Tab 用法
+
+- 统一用 antd 原生 `Tabs` + `Tabs.TabPane`，**不要找 Vben 自封装的 Tabs**
+- Tab 选中状态持久化走 `localStorage`（参考 `system-config/index.vue` 的 `TAB_STORAGE_KEY` 模式）
+
+## 抽屉用法（小程序端，admin 不涉及）
+
+- 小程序端的抽屉用 `page-container` + `v-if`（不是 `v-show`）防止用户意外退出页面
+
+## 中文注释
+
+- 每个 `<script setup>` 顶部说明模块用途
+- 每个主要函数（特别是有业务逻辑的）必须有中文注释
+- 复杂的 schema 字段配置要注释意图
+
+## 空行控制
+
+- 上一部分代码和下一部分代码中间空行不超过 2 行
+
+## VIP 功能判断（PC 管理端强制）
+
+- **判断方法**：统一用 `#/utils/vip` 的 `hasVipPermission` / `useVipPermission` / `VIP_FEATURE` 常量
+- **显隐组件**：模板包一层 `<VipGate code="medical_record" :vip="receptionVip">`（`#/components/vip/VipGate.vue`）
+- 接诊/复诊/开方：**必须传履约诊所 vip**（`get-current-store-type` 的 `vip`），禁止只靠登录态判断门店权益
+- 显式传 `null` 表示「尚无履约诊所权益」，**不会**回落登录态；不传第二参才用 `userInfo.vip`
+- 禁止在业务页再手写 `permissions.indexOf('medical_record')` 或复制一套 VIP 拉取逻辑
+
+## 暗色模式适配（PC 管理端强制）
+
+后台支持亮/暗主题切换，**新增或改样式时必须同时适配暗色**，禁止只按白底写死颜色。
+
+### 优先用法（推荐）
+
+- 颜色、边框、背景一律用主题 CSS 变量，例如：
+  - 文字：`hsl(var(--foreground))` / `hsl(var(--muted-foreground))`
+  - 背景：`hsl(var(--background))` / `hsl(var(--card, var(--background)))` / `hsl(var(--muted) / 0.25)`
+  - 边框：`hsl(var(--border))`
+  - 强调/选中：`hsl(var(--primary))`、`hsl(var(--primary) / 0.1)`
+  - 警告：`hsl(var(--warning))`、`hsl(var(--warning) / 0.12)`（参考 `AiDisclaimerBanner.vue`）
+- **禁止**业务样式写死 `#fff`、`#000`、`#0f172a`、`#f8fafc`、`#64748b` 等仅适合亮色的色值
+- **禁止**用 `:global(.dark)` 改全局变量以免污染整站配色
+- 优先「一套变量样式自动跟主题」，避免再写一套 `.dark .xxx { ... }`；仅当变量无法表达（如图片反色、特殊阴影）才用局部 `.dark .xxx`（且必须 `scoped`）
+
+### 自检清单
+
+- 弹窗 / 抽屉 / 卡片 / 预览对照区：在暗色下背景、文字、边框对比度可读
+- 选中态、成功/导入高亮：用 `--primary` 透明度，不要写死浅绿底 `#f0faf8`
+- 表格空态、分割线、次要文案：用 `--muted` / `--muted-foreground` / `--border`
+- 改完后切换暗色主题肉眼过一遍，不要只测亮色
+
+## Vben 组件使用规范
+
+### VbenModal（来自 @vben/common-ui）
+
+- 创建弹窗必须用 `useVbenModal`，禁止直接用 antd `Modal` 或原生 `<dialog>`
+- 抽离弹窗内容到子组件时，外层用 `connectedComponent` 参数连接，内外组件共享 `modalApi`
+- 底部按钮扩展 slot 优先级：`prepend-footer`（取消按钮左侧）> `center-footer`（取消/确定之间）> `append-footer`（确定右侧）
+- **严禁覆盖 `#footer` slot**，会丢失默认的取消/确定按钮和 loading 行为
+- 表单提交 loading 走 `modalApi.setState({ confirmLoading: true })`，禁止自己写 button loading
+- 提交防抖/防重复用 `modalApi.lock()` / `unlock()`（>5.5.3），禁止手动 disabled
+- 拖拽开 `draggable: true`，需要拖出可视区时同时开 `overflow: true`
+- 数据回填走 `modalApi.setData()` + `onOpenChange(isOpen) { const data = modalApi.getData() }`
+
+### VbenDrawer（来自 @vben/common-ui）
+
+- 创建抽屉必须用 `useVbenDrawer`，禁止直接用 antd `Drawer`
+- 底部按钮扩展 slot 与 Modal 一致：`prepend-footer` / `center-footer` / `append-footer`
+- **同样严禁覆盖 `#footer` slot**
+- 关闭前校验用 `onBeforeClose`（>5.5.2 支持 Promise），禁止自己拦截
+- 提交防抖/防重复用 `drawerApi.lock()` / `unlock()`（>5.5.3）
+- 小程序端的「抽屉」概念与此无关，小程序端按现有规则用 `page-container`
+
+### VbenVxeTable（来自 #/adapter/vxe-table）
+
+- 表格必须用 `useVbenVxeGrid`，禁止直接 `new VxeGrid` 或 antd `Table`
+- 远程数据加载走 `gridOptions.proxyConfig.ajax.query`，**禁止自己 fetch 后 `data = []` 赋值**
+- query 接口返回结构必须匹配适配器配置：`{ items: [], total: number }`（在 `apps/web-antd/src/adapter/vxe-table.ts` 的 `response` 字段统一配置）
+- 分页参数从 `{ page }` 解构取：`page.currentPage` / `page.pageSize`，禁止自己读 URL
+- 刷新表格用 `gridApi.query()`（保留当前页）或 `gridApi.reload()`（回到第一页），禁止整页 `window.location.reload()`
+- 工具栏按钮插 slot：`toolbar-actions`（标题左侧）、`toolbar-tools`（工具按钮左侧），禁止改 vxe-grid 内部模板
+- 表格 loading 用 `gridApi.setLoading(bool)`，禁止自己遮罩
+- 搜索表单由 `formOptions` 配置（底层是 Vben Form），开关走 `gridOptions.toolbarConfig.search = true`
+- 自定义列渲染走 `slots: { default: 'action' }` + Grid 子组件内 `<template #action="{ row }">`，禁止 column 渲染函数里写 JSX
+
+### VbenForm（来自 #/adapter/form）
+
+- 表单必须用 `useVbenForm`，禁止直接 `<form>` 或 antd `Form`
+- 动态修改 schema 必须用 `formApi.updateSchema([...])`，**vben form 没有 `setComponentProps` 这个方法**（这是已踩过的坑）
+- 重置表单用 `formApi.resetForm()`，**严禁 `formApi.resetFields()`**（那是 antd Form 的 API，Vben Form 没有，会报 `resetFields is not a function`；已踩过坑）
+- 取值/赋值用 `formApi.getValues()` / `formApi.setValues(obj)`，禁止自己 `v-model` 收集
+- 校验用 `formApi.validate().then(e => { if (e.valid) {...} })` 或 `formApi.validateAndSubmitForm()`
+- 必填规则用字符串 `'required'` / `'selectRequired'`，规则在 `#/adapter/form.ts` 的 `defineRules` 注册
+- schema 中字段名（`fieldName`）必须与后端字段 snake_case 对齐，禁止前端 camelCase
+- 密码/敏感字段用 `VbenInputPassword` 组件，禁止用 `VbenInput` 配 `type="password"`
+- 单选/多选选项来自接口时，必须在弹窗/页面 `onMounted` 或 `onOpenChange` 里拉取后通过 `updateSchema` 注入，禁止写死常量
+

.gitattributes

@@ -4,8 +4,18 @@
 * text=auto eol=lf
 
 # Declare files that will always have CRLF line endings on checkout.
-*.{cmd,[cC][mM][dD]} text eol=crlf
+*.cmd text eol=crlf
-*.{bat,[bB][aA][tT]} text eol=crlf
+*.[cC][mM][dD] text eol=crlf
+*.bat text eol=crlf
+*.[bB][aA][tT] text eol=crlf
 
 # Denote all files that are truly binary and should not be modified.
-*.{ico,png,jpg,jpeg,gif,webp,svg,woff,woff2} binary
+*.ico binary
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.webp binary
+*.svg binary
+*.woff binary
+*.woff2 binary

.github/CODEOWNERS

@@ -1,14 +1,14 @@
 # default onwer
-* anncwb@126.com vince292007@gmail.com netfan@foxmail.com
+* anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
 
 # vben core onwer
-/.github/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
+/.github/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
-/.vscode/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
+/.vscode/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
-/packages/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
+/packages/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
-/packages/@core/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
+/packages/@core/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
-/internal/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
+/internal/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
-/scripts/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com
+/scripts/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com jinmao88@qq.com
 
 # vben team onwer
-apps/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5
+apps/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5 jinmao88@qq.com
-docs/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5
+docs/ anncwb@126.com vince292007@gmail.com netfan@foxmail.com @vbenjs/team-v5 jinmao88@qq.com

.github/actions/setup-node/action.yml

@@ -6,10 +6,10 @@ runs:
   using: 'composite'
   steps:
     - name: Install pnpm
-      uses: pnpm/action-setup@v4
+      uses: pnpm/action-setup@v6
 
     - name: Install Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
       with:
         node-version-file: .node-version
         cache: 'pnpm'

.github/config.yml

@@ -21,12 +21,10 @@ newPRWelcomeComment: |
 firstPRMergeComment: >
   Thanks for your contribution!  🎉🎉🎉
 
-
 # Comment to be posted to on first time issues
 newIssueWelcomeComment: >
   Thanks for opening your first issue! Be sure to follow the issue template and provide every bit of information to help the developers!
 
-
 # *OPTIONAL* default titles to check against for lack of descriptiveness
 # MUST BE ALL LOWERCASE
 requestInfoDefaultTitles:
@@ -36,4 +34,3 @@ requestInfoDefaultTitles:
 # *Required* Comment to reply with
 requestInfoReplyComment: >
   Thanks for filing this issue/PR! It would be much appreciated if you could provide us with more information so we can effectively analyze the situation in context.
-

.github/contributing.md

@@ -19,11 +19,9 @@ Project maintainers have the right and responsibility to remove, edit, or reject
 - Checkout a topic branch from the relevant branch, e.g. main, and merge back against that branch.
 
 - If adding a new feature:
-
   - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it.
 
 - If fixing bug:
-
   - Provide a detailed description of the bug in the PR. Live demo preferred.
 
 - It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging.

.github/workflows/build.yml

@@ -30,7 +30,7 @@ jobs:
           - windows-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 

.github/workflows/changeset-version.yml

@@ -25,7 +25,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 

.github/workflows/ci.yml

@@ -28,12 +28,12 @@ jobs:
     timeout-minutes: 20
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6
         with:
           run_install: false
 
@@ -67,7 +67,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
@@ -90,7 +90,7 @@ jobs:
           - windows-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 

.github/workflows/codeql.yml

@@ -57,11 +57,11 @@ jobs:
         # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         with:
           languages: ${{ matrix.language }}
           build-mode: ${{ matrix.build-mode }}
@@ -89,6 +89,6 @@ jobs:
           exit 1
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/deploy.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
@@ -30,7 +30,7 @@ jobs:
         run: pnpm build:play
 
       - name: Sync Playground files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.4.0
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_PLAYGROUND_FTP_ACCOUNT }}
@@ -43,7 +43,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
@@ -54,7 +54,7 @@ jobs:
         run: pnpm build:docs
 
       - name: Sync Docs files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.4.0
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
@@ -67,7 +67,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
@@ -85,7 +85,7 @@ jobs:
         run: pnpm run build:antd
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.4.0
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
@@ -98,7 +98,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
@@ -116,7 +116,7 @@ jobs:
         run: pnpm run build:ele
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.4.0
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
@@ -129,7 +129,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
@@ -147,9 +147,26 @@ jobs:
         run: pnpm run build:naive
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.4.0
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }}
           password: ${{ secrets.WEB_NAIVE_FTP_PASSWORD }}
           local-dir: ./apps/web-naive/dist/
+
+  rerun-on-failure:
+    name: Rerun on failure
+    needs:
+      - deploy-playground-ftp
+      - deploy-docs-ftp
+      - deploy-antd-ftp
+      - deploy-ele-ftp
+      - deploy-naive-ftp
+    if: failure() && fromJSON(github.run_attempt) < 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Retry ${{ fromJSON(github.run_attempt) }} of 10
+        env:
+          GH_REPO: ${{ github.repository }}
+          GH_TOKEN: ${{ github.token }}
+        run: gh workflow run rerun.yml -F run_id=${{ github.run_id }}

.github/workflows/draft.yml

@@ -20,6 +20,6 @@ jobs:
     if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@v6
+      - uses: release-drafter/release-drafter@v7
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/issue-close-require.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       # 关闭未活动的 Issues
       - name: Close Inactive Issues
-        uses: actions/stale@v9
+        uses: actions/stale@v11
         with:
           days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
           stale-issue-label: needs-reproduction # Label that flags an issue as stale.

.github/workflows/issue-labeled.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - name: remove enhancement pending
         if: github.event.label.name == 'enhancement'
-        uses: actions-cool/issues-helper@v3
+        uses: actions-cool/issues-helper-backup@d65454423c6fbbd20026b9b499d403f79422ac69
         with:
           actions: 'remove-labels'
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -27,7 +27,7 @@ jobs:
 
       - name: remove bug pending
         if: github.event.label.name == 'bug'
-        uses: actions-cool/issues-helper@v3
+        uses: actions-cool/issues-helper-backup@d65454423c6fbbd20026b9b499d403f79422ac69
         with:
           actions: 'remove-labels'
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -36,7 +36,7 @@ jobs:
 
       - name: needs reproduction
         if: github.event.label.name == 'needs reproduction'
-        uses: actions-cool/issues-helper@v3
+        uses: actions-cool/issues-helper-backup@d65454423c6fbbd20026b9b499d403f79422ac69
         with:
           actions: 'create-comment, remove-labels'
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lock.yml

@@ -14,7 +14,7 @@ jobs:
     if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v5
+      - uses: dessant/lock-threads@v6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           issue-inactive-days: '14'

.github/workflows/release-tag.yml

@@ -3,78 +3,48 @@ name: Create Release Tag
 on:
   push:
     tags:
-      - 'v*.*.*' # Push events to matching v*, i.e. v1.0, v20.15.10
+      - 'v*.*.*'
-
+  workflow_dispatch:
-env:
+    inputs:
-  HUSKY: '0'
+      tag:
+        description: 'Tag to create (e.g. v1.2.3)'
+        required: true
+        type: string
 
 permissions:
-  pull-requests: write
   contents: write
 
 jobs:
-  build:
+  release:
     name: Create Release
     if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20]
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
-      # - name: Checkout code
+      - name: Extract version
-      #   uses: actions/checkout@v4
-      #   with:
-      #     fetch-depth: 0
-
-      # - name: Install pnpm
-      #   uses: pnpm/action-setup@v4
-
-      # - name: Use Node.js ${{ matrix.node-version }}
-      #   uses: actions/setup-node@v4
-      #   with:
-      #     node-version: ${{ matrix.node-version }}
-      #     cache: "pnpm"
-
-      # - name: Install dependencies
-      #   run: pnpm install --frozen-lockfile
-
-      # - name: Test and Build
-      #   run: |
-      #     pnpm run test
-      #     pnpm run build
-
-      - name: version
         id: version
         run: |
-          tag=${GITHUB_REF/refs\/tags\//}
+          if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
-          version=${tag#v}
+            raw_tag="${{ inputs.tag }}"
-          major=${version%%.*}
+          else
-          echo "tag=${tag}" >> $GITHUB_OUTPUT
+            raw_tag="${GITHUB_REF_NAME}"
-          echo "version=${version}" >> $GITHUB_OUTPUT
+          fi
-          echo "major=${major}" >> $GITHUB_OUTPUT
+          # Normalize: ensure v prefix
+          tag="${raw_tag}"
+          [[ "${tag:0:1}" != "v" ]] && tag="v${tag}"
+          version="${tag#v}"
+          major="${version%%.*}"
+          echo "tag=${tag}" >> "${GITHUB_OUTPUT}"
+          echo "version=${version}" >> "${GITHUB_OUTPUT}"
+          echo "major=${major}" >> "${GITHUB_OUTPUT}"
 
-      - uses: release-drafter/release-drafter@v6
+      - uses: release-drafter/release-drafter@v7
         with:
           version: ${{ steps.version.outputs.version }}
           publish: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      # - name: force update major tag
-      #   run: |
-      #     git tag v${{ steps.version.outputs.major }} ${{ steps.version.outputs.tag }} -f
-      #     git push origin refs/tags/v${{ steps.version.outputs.major }} -f
-
-      # - name: Create Release for Tag
-      #   id: release_tag
-      #   uses: ncipollo/release-action@v1
-      #   with:
-      #     token: ${{ secrets.GITHUB_TOKEN }}
-      #     generateReleaseNotes: "true"
-      #     body: |
-      #       > Please refer to [CHANGELOG.md](https://github.com/vbenjs/vue-vben-admin/blob/main/CHANGELOG.md) for details.

.github/workflows/rerun.yml

@@ -0,0 +1,19 @@
+name: Rerun workflow
+
+on:
+  workflow_dispatch:
+    inputs:
+      run_id:
+        description: The workflow id to relanch
+        required: true
+jobs:
+  rerun:
+    runs-on: ubuntu-latest
+    steps:
+      - name: rerun ${{ inputs.run_id }}
+        env:
+          GH_REPO: ${{ github.repository }}
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh run watch ${{ inputs.run_id }} > /dev/null 2>&1
+          gh run rerun ${{ inputs.run_id }} --failed

.github/workflows/semantic-pull-request.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Validate PR title
-        uses: amannn/action-semantic-pull-request@v5
+        uses: amannn/action-semantic-pull-request@v6
         with:
           wip: true
           subjectPattern: ^(?![A-Z]).+$

.github/workflows/stale.yml

@@ -9,7 +9,7 @@ jobs:
     if: github.repository == 'vbenjs/vue-vben-admin'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v11
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days'

.gitignore

@@ -22,7 +22,8 @@ yarn.lock
 package-lock.json
 .VSCodeCounter
 **/backend-mock/data
-
+.omx
+.pnpm-store
 # local env files
 .env.local
 .env.*.local
@@ -51,3 +52,14 @@ vite.config.ts.*
 .history
 /.mimocode/
 /.cursor/skills/
+.cursor
+
+# AI
+.agent
+.agents
+.claude
+.codex
+skills-lock.json
+.atomcode
+datalog
+.playwright-mcp

.gitpod.yml

@@ -2,5 +2,5 @@ ports:
   - port: 5555
     onOpen: open-preview
 tasks:
-  - init: corepack enable && pnpm install
+  - init: npm i -g corepack && pnpm install
     command: pnpm run dev:play

.husky/commit-msg

@@ -1,6 +0,0 @@
-echo Start running commit-msg hook...
-
-# Check whether the git commit information is standardized
-pnpm exec commitlint --edit "$1"
-
-echo Run commit-msg hook done.

.husky/post-merge

@@ -1,3 +0,0 @@
-# 每次 git pull 之后, 安装依赖
-
-pnpm install

.lintstagedrc.mjs

@@ -1,20 +0,0 @@
-export default {
-  '*.{js,jsx,ts,tsx}': [
-    'prettier --cache --ignore-unknown  --write',
-    'eslint --cache --fix',
-  ],
-  '*.{scss,less,styl,html,vue,css}': [
-    'prettier --cache --ignore-unknown --write',
-    'stylelint --fix --allow-empty-input',
-  ],
-  '*.md': ['prettier --cache --ignore-unknown --write'],
-  '*.vue': [
-    'prettier --write',
-    'eslint --cache --fix',
-    'stylelint --fix --allow-empty-input',
-  ],
-  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
-    'prettier --cache --write--parser json',
-  ],
-  'package.json': ['prettier --cache --write'],
-};

.node-version

@@ -1 +1 @@
-20.14.0
+24.16.0

.npmrc

@@ -1,13 +1 @@
-registry = "https://registry.npmmirror.com"
+registry=https://registry.npmmirror.com
-public-hoist-pattern[]=husky
-public-hoist-pattern[]=eslint
-public-hoist-pattern[]=prettier
-public-hoist-pattern[]=prettier-plugin-tailwindcss
-public-hoist-pattern[]=stylelint
-public-hoist-pattern[]=*postcss*
-public-hoist-pattern[]=@commitlint/*
-public-hoist-pattern[]=czg
-
-strict-peer-dependencies=false
-auto-install-peers=true
-dedupe-peer-dependents=true

.prettierignore

@@ -1,18 +0,0 @@
-dist
-dev-dist
-.local
-.output.js
-node_modules
-.nvmrc
-coverage
-CODEOWNERS
-.nitro
-.output
-
-
-**/*.svg
-**/*.sh
-
-public
-.npmrc
-*-lock.yaml

.prettierrc.mjs

@@ -1 +0,0 @@
-export { default } from '@vben/prettier-config';

.stylelintignore

@@ -2,3 +2,7 @@ dist
 public
 __tests__
 coverage
+.codex
+.claude
+.agent
+.agents

apps/backend-mock/api/demo/bigint.ts

@@ -0,0 +1,32 @@
+import { eventHandler, setHeader } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse } from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
+                "age": 30,
+                "email": "john-doe@demo.com"
+                },
+                {
+                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "name": "Jane Smith",
+                "age": 25,
+                "email": "jane@demo.com"
+                }
+            ]
+  }
+  `;
+  setHeader(event, 'Content-Type', 'application/json');
+  return data;
+});

apps/backend-mock/api/system/dept/.post.ts

@@ -0,0 +1,16 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(600);
+  return useResponseSuccess(null);
+});

apps/backend-mock/api/system/dept/[id].delete.ts

@@ -0,0 +1,16 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(1000);
+  return useResponseSuccess(null);
+});

apps/backend-mock/api/system/dept/[id].put.ts

@@ -0,0 +1,16 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import {
+  sleep,
+  unAuthorizedResponse,
+  useResponseSuccess,
+} from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  await sleep(2000);
+  return useResponseSuccess(null);
+});

apps/backend-mock/api/system/dept/list.ts

@@ -0,0 +1,62 @@
+import { faker } from '@faker-js/faker';
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+const formatterCN = new Intl.DateTimeFormat('zh-CN', {
+  timeZone: 'Asia/Shanghai',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem: Record<string, any> = {
+      id: faker.string.uuid(),
+      pid: 0,
+      name: faker.commerce.department(),
+      status: faker.helpers.arrayElement([0, 1]),
+      createTime: formatterCN.format(
+        faker.date.between({ from: '2021-01-01', to: '2022-12-31' }),
+      ),
+      remark: faker.lorem.sentence(),
+    };
+    if (faker.datatype.boolean()) {
+      dataItem.children = Array.from(
+        { length: faker.number.int({ min: 1, max: 5 }) },
+        () => ({
+          id: faker.string.uuid(),
+          pid: dataItem.id,
+          name: faker.commerce.department(),
+          status: faker.helpers.arrayElement([0, 1]),
+          createTime: formatterCN.format(
+            faker.date.between({ from: '2023-01-01', to: '2023-12-31' }),
+          ),
+          remark: faker.lorem.sentence(),
+        }),
+      );
+    }
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(10);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const listData = structuredClone(mockData);
+
+  return useResponseSuccess(listData);
+});

apps/backend-mock/api/system/menu/list.ts

@@ -0,0 +1,13 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  return useResponseSuccess(MOCK_MENU_LIST);
+});

apps/backend-mock/api/system/menu/name-exists.ts

@@ -0,0 +1,29 @@
+import { eventHandler, getQuery } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+const namesMap: Record<string, any> = {};
+
+function getNames(menus: any[]) {
+  menus.forEach((menu) => {
+    namesMap[menu.name] = String(menu.id);
+    if (menu.children) {
+      getNames(menu.children);
+    }
+  });
+}
+getNames(MOCK_MENU_LIST);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const { id, name } = getQuery(event);
+
+  return (name as string) in namesMap &&
+    (!id || namesMap[name as string] !== String(id))
+    ? useResponseSuccess(true)
+    : useResponseSuccess(false);
+});

apps/backend-mock/api/system/menu/path-exists.ts

@@ -0,0 +1,29 @@
+import { eventHandler, getQuery } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+const pathMap: Record<string, any> = { '/': 0 };
+
+function getPaths(menus: any[]) {
+  menus.forEach((menu) => {
+    pathMap[menu.path] = String(menu.id);
+    if (menu.children) {
+      getPaths(menu.children);
+    }
+  });
+}
+getPaths(MOCK_MENU_LIST);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const { id, path } = getQuery(event);
+
+  return (path as string) in pathMap &&
+    (!id || pathMap[path as string] !== String(id))
+    ? useResponseSuccess(true)
+    : useResponseSuccess(false);
+});

apps/backend-mock/api/system/role/list.ts

@@ -0,0 +1,84 @@
+import { faker } from '@faker-js/faker';
+import { eventHandler, getQuery } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { getMenuIds, MOCK_MENU_LIST } from '~/utils/mock-data';
+import { unAuthorizedResponse, usePageResponseSuccess } from '~/utils/response';
+
+const formatterCN = new Intl.DateTimeFormat('zh-CN', {
+  timeZone: 'Asia/Shanghai',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+const menuIds = getMenuIds(MOCK_MENU_LIST);
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem: Record<string, any> = {
+      id: faker.string.uuid(),
+      name: faker.commerce.product(),
+      status: faker.helpers.arrayElement([0, 1]),
+      createTime: formatterCN.format(
+        faker.date.between({ from: '2022-01-01', to: '2025-01-01' }),
+      ),
+      permissions: faker.helpers.arrayElements(menuIds),
+      remark: faker.lorem.sentence(),
+    };
+
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(100);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const {
+    page = 1,
+    pageSize = 20,
+    name,
+    id,
+    remark,
+    startTime,
+    endTime,
+    status,
+  } = getQuery(event);
+  let listData = structuredClone(mockData);
+  if (name) {
+    listData = listData.filter((item) =>
+      item.name.toLowerCase().includes(String(name).toLowerCase()),
+    );
+  }
+  if (id) {
+    listData = listData.filter((item) =>
+      item.id.toLowerCase().includes(String(id).toLowerCase()),
+    );
+  }
+  if (remark) {
+    listData = listData.filter((item) =>
+      item.remark?.toLowerCase()?.includes(String(remark).toLowerCase()),
+    );
+  }
+  if (startTime) {
+    listData = listData.filter((item) => item.createTime >= startTime);
+  }
+  if (endTime) {
+    listData = listData.filter((item) => item.createTime <= endTime);
+  }
+  if (['0', '1'].includes(status as string)) {
+    listData = listData.filter((item) => item.status === Number(status));
+  }
+  return usePageResponseSuccess(page as string, pageSize as string, listData);
+});

apps/backend-mock/api/system/user/list.ts

@@ -0,0 +1,85 @@
+import { faker } from '@faker-js/faker';
+import { eventHandler, getQuery } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, usePageResponseSuccess } from '~/utils/response';
+
+const formatterCN = new Intl.DateTimeFormat('zh-CN', {
+  timeZone: 'Asia/Shanghai',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+function generateMockDataList(count: number) {
+  const dataList = [];
+
+  for (let i = 0; i < count; i++) {
+    const dataItem: Record<string, any> = {
+      id: faker.string.uuid(),
+      name: faker.commerce.product(),
+      status: faker.helpers.arrayElement([0, 1]),
+      createTime: formatterCN.format(
+        faker.date.between({ from: '2022-01-01', to: '2025-01-01' }),
+      ),
+      deptId: faker.string.uuid(),
+      remark: faker.lorem.sentence(),
+    };
+
+    dataList.push(dataItem);
+  }
+
+  return dataList;
+}
+
+const mockData = generateMockDataList(100);
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+
+  const {
+    page = 1,
+    pageSize = 20,
+    name,
+    id,
+    remark,
+    startTime,
+    endTime,
+    deptId,
+    status,
+  } = getQuery(event);
+  let listData = structuredClone(mockData);
+  if (name) {
+    listData = listData.filter((item) =>
+      item.name.toLowerCase().includes(String(name).toLowerCase()),
+    );
+  }
+  if (id) {
+    listData = listData.filter((item) =>
+      item.id.toLowerCase().includes(String(id).toLowerCase()),
+    );
+  }
+  if (remark) {
+    listData = listData.filter((item) =>
+      item.remark?.toLowerCase()?.includes(String(remark).toLowerCase()),
+    );
+  }
+  if (startTime) {
+    listData = listData.filter((item) => item.createTime >= startTime);
+  }
+  if (endTime) {
+    listData = listData.filter((item) => item.createTime <= endTime);
+  }
+  if (['0', '1'].includes(status as string)) {
+    listData = listData.filter((item) => item.status === Number(status));
+  }
+  if (deptId) {
+    listData = listData.filter((item) => item.deptId === deptId);
+  }
+  return usePageResponseSuccess(page as string, pageSize as string, listData);
+});

apps/backend-mock/api/timezone/getTimezone.ts

@@ -0,0 +1,12 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { getTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  return useResponseSuccess(getTimezone());
+});

apps/backend-mock/api/timezone/getTimezoneOptions.ts

@@ -0,0 +1,11 @@
+import { eventHandler } from 'h3';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(() => {
+  const data = TIME_ZONE_OPTIONS.map((o) => ({
+    label: `${o.timezone} (GMT${o.offset >= 0 ? `+${o.offset}` : o.offset})`,
+    value: o.timezone,
+  }));
+  return useResponseSuccess(data);
+});

apps/backend-mock/api/timezone/setTimezone.ts

@@ -0,0 +1,26 @@
+import { eventHandler, readBody, setResponseStatus } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import {
+  unAuthorizedResponse,
+  useResponseError,
+  useResponseSuccess,
+} from '~/utils/response';
+import { setTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const body = await readBody<{ timezone?: unknown }>(event);
+  const timezone =
+    typeof body?.timezone === 'string' ? body.timezone : undefined;
+  const allowed = TIME_ZONE_OPTIONS.some((o) => o.timezone === timezone);
+  if (!timezone || !allowed) {
+    setResponseStatus(event, 400);
+    return useResponseError('Bad Request', 'Invalid timezone');
+  }
+  setTimezone(timezone);
+  return useResponseSuccess({});
+});

apps/backend-mock/api/upload.ts

@@ -0,0 +1,14 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  return useResponseSuccess({
+    url: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+  });
+  // return useResponseError("test")
+});

apps/backend-mock/utils/timezone-utils.ts

@@ -0,0 +1,9 @@
+let mockTimeZone: null | string = null;
+
+export const setTimezone = (timeZone: string) => {
+  mockTimeZone = timeZone;
+};
+
+export const getTimezone = () => {
+  return mockTimeZone;
+};

apps/web-antd/index.html

@@ -12,7 +12,7 @@
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
     <!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
-    <title><%= VITE_APP_TITLE %></title>
+    <title>%VITE_APP_TITLE%</title>
     <link rel="icon" href="/favicon.ico" />
     <script>
       // 生产环境下注入百度统计

apps/web-antd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.5.1",
+  "version": "5.7.0",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
@@ -41,15 +42,23 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@vueup/vue-quill": "^1.2.0",
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
+    "axios": "^1.10.0",
     "dayjs": "catalog:",
     "exceljs": "^4.4.0",
+    "html2canvas": "^1.4.1",
+    "js-base64": "^3.7.7",
+    "lodash-es": "^4.17.21",
+    "lucide-vue-next": "^0.487.0",
     "markdown-it": "^14.1.0",
+    "md-editor-v3": "^5.4.5",
     "pinia": "catalog:",
     "sortablejs": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:",
+    "xgplayer": "^3.0.24",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

apps/web-antd/postcss.config.mjs

@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config/postcss';

apps/web-antd/src/adapter/component/index.ts

@@ -3,55 +3,616 @@
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
  */
 
-import type { BaseFormComponentType } from '@vben/common-ui';
+/* eslint-disable vue/one-component-per-file */
 
-import type { Component, SetupContext } from 'vue';
+import type {
-import { h } from 'vue';
+  AutoCompleteProps,
+  ButtonProps,
+  CascaderProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  DatePickerProps,
+  DividerProps,
+  InputNumberProps,
+  InputProps,
+  MentionsProps,
+  RadioGroupProps,
+  RadioProps,
+  RateProps,
+  SelectProps,
+  SpaceProps,
+  SwitchProps,
+  TextAreaProps,
+  TimePickerProps,
+  TreeSelectProps,
+  UploadChangeParam,
+  UploadFile,
+  UploadProps,
+} from 'ant-design-vue';
+import type { RangePickerProps } from 'ant-design-vue/es/date-picker';
 
-import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+import type { Component, Ref } from 'vue';
-import { $t } from '@vben/locales';
+
+import type {
+  ApiComponentSharedProps,
+  BaseFormComponentType,
+  IconPickerProps,
+} from '@vben/common-ui';
+import type { Sortable } from '@vben/hooks';
+import type { Recordable } from '@vben/types';
 
 import {
-  AutoComplete,
+  computed,
-  Button,
+  defineAsyncComponent,
-  Cascader,
+  defineComponent,
-  Checkbox,
+  h,
-  CheckboxGroup,
+  nextTick,
-  DatePicker,
+  onMounted,
-  Divider,
+  onUnmounted,
-  Input,
+  ref,
-  InputNumber,
+  render,
-  InputPassword,
+  unref,
-  Mentions,
+  watch,
-  notification,
+} from 'vue';
-  Radio,
+
-  RadioGroup,
+import {
-  RangePicker,
+  ApiComponent,
-  Rate,
+  globalShareState,
-  Select,
+  IconPicker,
-  Space,
+  VCropper,
-  Switch,
+} from '@vben/common-ui';
-  Textarea,
+import { useSortable } from '@vben/hooks';
-  TimePicker,
+import { IconifyIcon } from '@vben/icons';
-  TreeSelect,
+import { $t } from '@vben/locales';
-  Upload,
+import { isEmpty } from '@vben/utils';
-} from 'ant-design-vue';
+
+import { message, Modal, notification } from 'ant-design-vue';
 
 import { registerComponent } from '#/components/form/component-map';
 
+type AdapterUploadProps = UploadProps & {
+  aspectRatio?: string;
+  crop?: boolean;
+  draggable?: boolean;
+  handleChange?: (event: UploadChangeParam) => void;
+  maxSize?: number;
+  onDragSort?: (oldIndex: number, newIndex: number) => void;
+  onHandleChange?: (event: UploadChangeParam) => void;
+};
+
+// ============================================================
+// 所有 antd 组件统一用 defineAsyncComponent 异步加载
+// ⚠️ 不要再从 'ant-design-vue' 同步 import 这些组件！
+//    否则会和下面的 const 声明冲突，导致
+//    "Identifier 'Xxx' has already been declared"
+// ============================================================
+
+const AutoComplete = defineAsyncComponent(
+  () => import('ant-design-vue/es/auto-complete'),
+);
+const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
+const Checkbox = defineAsyncComponent(
+  () => import('ant-design-vue/es/checkbox'),
+);
+const CheckboxGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
+);
+const DatePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/date-picker'),
+);
+const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
+const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
+const InputNumber = defineAsyncComponent(
+  () => import('ant-design-vue/es/input-number'),
+);
+const InputPassword = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
+);
+const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
+const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
+const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
+const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
+const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+const Cascader = defineAsyncComponent(
+  () => import('ant-design-vue/es/cascader'),
+);
+const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
+const Image = defineAsyncComponent(() => import('ant-design-vue/es/image'));
+const PreviewGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/image').then((res) => res.ImagePreviewGroup),
+);
+
+// ============================================================
+// withDefaultPlaceholder：给组件注入 i18n placeholder + ref 透传
+// ============================================================
+
 const withDefaultPlaceholder = <T extends Component>(
-  component: T,
+  component: Component,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
-  return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
+  return defineComponent({
-    const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`);
+    name: (component as any).name,
-    return h(component, { ...props, ...attrs, placeholder }, slots);
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      expose(
+        new Proxy(
+          {},
+          {
+            get: (_target, key) => innerRef.value?.[key],
+            has: (_target, key) => key in (innerRef.value || {}),
+          },
+        ),
+      );
+      return () =>
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
+    },
+  });
+};
+
+const IMAGE_EXTENSIONS = new Set([
+  'bmp',
+  'gif',
+  'jpeg',
+  'jpg',
+  'png',
+  'svg',
+  'webp',
+]);
+
+/**
+ * 检查是否为图片文件
+ */
+function isImageFile(file: UploadFile): boolean {
+  if (file.url) {
+    try {
+      const pathname = new URL(file.url, 'http://localhost').pathname;
+      const ext = pathname.split('.').pop()?.toLowerCase();
+      return ext ? IMAGE_EXTENSIONS.has(ext) : false;
+    } catch {
+      const ext = file.url?.split('.').pop()?.toLowerCase();
+      return ext ? IMAGE_EXTENSIONS.has(ext) : false;
+    }
+  }
+  if (!file.type) {
+    const ext = file.name?.split('.').pop()?.toLowerCase();
+    return ext ? IMAGE_EXTENSIONS.has(ext) : false;
+  }
+  return file.type.startsWith('image/');
+}
+
+/**
+ * 创建默认的上传按钮插槽
+ */
+function createDefaultUploadSlots(listType: string, placeholder: string) {
+  if (listType === 'picture-card') {
+    return { default: () => placeholder };
+  }
+  return {
+    default: () =>
+      h(
+        Button,
+        {
+          icon: h(IconifyIcon, {
+            icon: 'ant-design:upload-outlined',
+            class: 'mb-1 size-4',
+          }),
+        },
+        () => placeholder,
+      ),
   };
+}
+
+/**
+ * 获取文件的 Base64
+ */
+function getBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.addEventListener('load', () => resolve(reader.result as string));
+    reader.addEventListener('error', reject);
+  });
+}
+
+/**
+ * 预览图片
+ */
+async function previewImage(
+  file: UploadFile,
+  visible: Ref<boolean>,
+  fileList: Ref<UploadProps['fileList']>,
+) {
+  // 非图片文件直接打开链接
+  if (!isImageFile(file)) {
+    const url = file.url || file.preview;
+    if (url) {
+      window.open(url, '_blank');
+    } else {
+      message.error($t('ui.formRules.previewWarning'));
+    }
+    return;
+  }
+
+  const [ImageComponent, PreviewGroupComponent] = await Promise.all([
+    Image,
+    PreviewGroup,
+  ]);
+
+  // 过滤图片文件并生成预览
+  const imageFiles = (unref(fileList) || []).filter((f) => isImageFile(f));
+
+  for (const imgFile of imageFiles) {
+    if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
+      imgFile.preview = await getBase64(imgFile.originFileObj);
+    }
+  }
+
+  const container = document.createElement('div');
+  document.body.append(container);
+  let isUnmounted = false;
+
+  const currentIndex = imageFiles.findIndex((f) => f.uid === file.uid);
+
+  const PreviewWrapper = {
+    setup() {
+      return () => {
+        if (isUnmounted) return null;
+        return h(
+          PreviewGroupComponent,
+          {
+            class: 'hidden',
+            preview: {
+              visible: visible.value,
+              current: currentIndex,
+              onVisibleChange: (value: boolean) => {
+                visible.value = value;
+                if (!value) {
+                  setTimeout(() => {
+                    if (!isUnmounted && container) {
+                      isUnmounted = true;
+                      render(null, container);
+                      container.remove();
+                    }
+                  }, 300);
+                }
+              },
+            },
+          },
+          () =>
+            imageFiles.map((imgFile) =>
+              h(ImageComponent, {
+                key: imgFile.uid,
+                src: imgFile.url || imgFile.preview,
+              }),
+            ),
+        );
+      };
+    },
+  };
+
+  render(h(PreviewWrapper), container);
+}
+
+/**
+ * 图片裁剪操作
+ */
+function cropImage(file: File, aspectRatio: string | undefined) {
+  return new Promise<Blob | string | undefined>((resolve, reject) => {
+    const container = document.createElement('div');
+    document.body.append(container);
+
+    let isUnmounted = false;
+    let objectUrl: null | string = null;
+
+    const open = ref(true);
+    const cropperRef = ref<InstanceType<typeof VCropper> | null>(null);
+
+    const closeModal = () => {
+      open.value = false;
+      setTimeout(() => {
+        if (!isUnmounted && container) {
+          if (objectUrl) {
+            URL.revokeObjectURL(objectUrl);
+          }
+          isUnmounted = true;
+          render(null, container);
+          container.remove();
+        }
+      }, 300);
+    };
+
+    const CropperWrapper = {
+      setup() {
+        return () => {
+          if (isUnmounted) return null;
+          if (!objectUrl) {
+            objectUrl = URL.createObjectURL(file);
+          }
+          return h(
+            Modal,
+            {
+              open: open.value,
+              title: h('div', {}, [
+                $t('ui.crop.title'),
+                h(
+                  'span',
+                  {
+                    class: `${aspectRatio ? '' : 'hidden'} ml-2 text-sm text-gray-400 font-normal`,
+                  },
+                  $t('ui.crop.titleTip', [aspectRatio]),
+                ),
+              ]),
+              centered: true,
+              width: 548,
+              zIndex: 9999,
+              keyboard: false,
+              maskClosable: false,
+              closable: false,
+              cancelText: $t('common.cancel'),
+              okText: $t('ui.crop.confirm'),
+              destroyOnClose: true,
+              onOk: async () => {
+                const cropper = cropperRef.value;
+                if (!cropper) {
+                  reject(new Error('Cropper not found'));
+                  closeModal();
+                  return;
+                }
+                try {
+                  const dataUrl = await cropper.getCropImage();
+                  if (dataUrl) {
+                    resolve(dataUrl);
+                  } else {
+                    reject(new Error($t('ui.crop.errorTip')));
+                  }
+                } catch {
+                  reject(new Error($t('ui.crop.errorTip')));
+                } finally {
+                  closeModal();
+                }
+              },
+              onCancel() {
+                resolve('');
+                closeModal();
+              },
+            },
+            () =>
+              h(VCropper, {
+                ref: (refValue: any) => (cropperRef.value = refValue),
+                img: objectUrl as string,
+                aspectRatio,
+              }),
+          );
+        };
+      },
+    };
+
+    render(h(CropperWrapper), container);
+  });
+}
+
+/**
+ * 带预览功能的上传组件
+ */
+const withPreviewUpload = () => {
+  return defineComponent({
+    name: 'Upload',
+    emits: ['update:modelValue'],
+    setup(
+      props: any,
+      { attrs, slots, emit }: { attrs: any; emit: any; slots: any },
+    ) {
+      const previewVisible = ref<boolean>(false);
+      const placeholder = attrs?.placeholder || $t('ui.placeholder.upload');
+      const listType = attrs?.listType || attrs?.['list-type'] || 'text';
+      const fileList = ref<UploadProps['fileList']>(
+        attrs?.fileList || attrs?.['file-list'] || [],
+      );
+
+      const maxSize = computed(() => attrs?.maxSize ?? attrs?.['max-size']);
+      const aspectRatio = computed(
+        () => attrs?.aspectRatio ?? attrs?.['aspect-ratio'],
+      );
+
+      const handleBeforeUpload = async (
+        file: UploadFile,
+        originFileList: Array<File>,
+      ) => {
+        // 文件大小限制
+        if (maxSize.value && (file.size || 0) / 1024 / 1024 > maxSize.value) {
+          message.error($t('ui.formRules.sizeLimit', [maxSize.value]));
+          file.status = 'removed';
+          return false;
+        }
+
+        // 图片裁剪处理
+        if (
+          attrs.crop &&
+          !attrs.multiple &&
+          originFileList[0] &&
+          isImageFile(file)
+        ) {
+          file.status = 'removed';
+          const blob = await cropImage(originFileList[0], aspectRatio.value);
+          if (!blob) {
+            throw new Error($t('ui.crop.errorTip'));
+          }
+          return blob;
+        }
+
+        return attrs.beforeUpload?.(file) ?? true;
+      };
+
+      const handleChange = (event: UploadChangeParam) => {
+        try {
+          attrs.handleChange?.(event);
+          attrs.onHandleChange?.(event);
+        } catch (error) {
+          console.error(error);
+        }
+        fileList.value = event.fileList.filter(
+          (file) => file.status !== 'removed',
+        );
+        emit(
+          'update:modelValue',
+          event.fileList?.length ? fileList.value : undefined,
+        );
+      };
+
+      const handlePreview = async (file: UploadFile) => {
+        previewVisible.value = true;
+        await previewImage(file, previewVisible, fileList);
+      };
+
+      const renderUploadButton = () => {
+        if (attrs.disabled) return null;
+        return isEmpty(slots)
+          ? createDefaultUploadSlots(listType, placeholder)
+          : slots;
+      };
+
+      // 拖拽排序
+      const draggable = computed(
+        () => (attrs.draggable ?? false) && !attrs.disabled,
+      );
+      const uploadId = `upload-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+      const sortableInstance = ref<null | Sortable>(null);
+
+      const styleId = `upload-drag-style-${uploadId}`;
+
+      function injectDragStyle() {
+        if (!document.querySelector(`[id="${styleId}"]`)) {
+          const style = document.createElement('style');
+          style.id = styleId;
+          style.textContent = `
+            [data-upload-id="${uploadId}"] .ant-upload-list-item { cursor: move; }
+            [data-upload-id="${uploadId}"] .ant-upload-list-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
+          `;
+          document.head?.append(style);
+        }
+      }
+
+      function removeDragStyle() {
+        document.querySelector(`[id="${styleId}"]`)?.remove();
+      }
+
+      async function initSortable(retryCount = 0) {
+        if (!draggable.value) return;
+
+        injectDragStyle();
+        await nextTick();
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        const container = document.querySelector(
+          `[data-upload-id="${uploadId}"] .ant-upload-list`,
+        ) as HTMLElement | null;
+
+        if (!container) {
+          if (retryCount < 5) {
+            setTimeout(() => initSortable(retryCount + 1), 200);
+          }
+          return;
+        }
+
+        const { initializeSortable } = useSortable(container, {
+          animation: 300,
+          delay: 400,
+          delayOnTouchOnly: true,
+          filter:
+            '.ant-upload-select, .ant-upload-list-item-error, .ant-upload-list-item-uploading',
+          onEnd: (evt: { oldIndex?: number; newIndex?: number }) => {
+            const { oldIndex, newIndex } = evt;
+            if (
+              oldIndex === undefined ||
+              newIndex === undefined ||
+              oldIndex === newIndex
+            ) {
+              return;
+            }
+
+            const list = [...(fileList.value || [])];
+            const [movedItem] = list.splice(oldIndex, 1);
+            if (movedItem) {
+              list.splice(newIndex, 0, movedItem);
+              fileList.value = list;
+            }
+
+            attrs.onDragSort?.(oldIndex, newIndex);
+            emit('update:modelValue', fileList.value);
+          },
+        });
+
+        sortableInstance.value = await initializeSortable();
+      }
+
+      // 监听表单值变化
+      watch(
+        () => attrs.modelValue,
+        (res) => {
+          fileList.value = res;
+        },
+      );
+
+      onMounted(initSortable);
+      onUnmounted(() => {
+        sortableInstance.value?.destroy();
+        removeDragStyle();
+      });
+
+      return () =>
+        h(
+          'div',
+          { 'data-upload-id': uploadId, class: 'w-full' },
+          h(
+            Upload,
+            {
+              ...props,
+              ...attrs,
+              fileList: fileList.value,
+              beforeUpload: handleBeforeUpload,
+              onChange: handleChange,
+              onPreview: handlePreview,
+            },
+            renderUploadButton() as any,
+          ),
+        );
+    },
+  });
 };
 
 // 表单组件在这里加
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiCascader'
   | 'ApiSelect'
   | 'ApiTreeSelect'
   | 'AutoComplete'
@@ -61,6 +622,8 @@ export type ComponentType =
   | 'DatePicker'
   | 'DefaultButton'
   | 'Divider'
+  /** OA 场景表单的图片/文件素材选择（透传 acceptTypes 过滤类型） */
+  | 'GalleryPickLink'
   | 'IconPicker'
   | 'Input'
   | 'InputNumber'
@@ -81,68 +644,92 @@ export type ComponentType =
   | 'UploadImage'
   | 'UploadImageSortable'
   | 'UploadOssFile'
+  | 'UploadDraggerPaste'
   | BaseFormComponentType;
 
+/**
+ * 与 {@link ComponentType} 中注册的组件名一一对应，便于 Schema 上 `component` + `componentProps` 联动提示
+ */
+export interface ComponentPropsMap {
+  ApiCascader: ApiComponentSharedProps & CascaderProps;
+  ApiSelect: ApiComponentSharedProps & SelectProps;
+  ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps;
+  AutoComplete: AutoCompleteProps;
+  Cascader: CascaderProps;
+  Checkbox: CheckboxProps;
+  CheckboxGroup: CheckboxGroupProps;
+  DatePicker: DatePickerProps;
+  DefaultButton: ButtonProps;
+  Divider: DividerProps;
+  IconPicker: IconPickerProps;
+  Input: InputProps;
+  InputNumber: InputNumberProps;
+  InputPassword: InputProps;
+  Mentions: MentionsProps;
+  PrimaryButton: ButtonProps;
+  Radio: RadioProps;
+  RadioGroup: RadioGroupProps;
+  RangePicker: RangePickerProps;
+  Rate: RateProps;
+  Select: SelectProps;
+  Space: SpaceProps;
+  Switch: SwitchProps;
+  Textarea: TextAreaProps;
+  TimePicker: TimePickerProps;
+  TreeSelect: TreeSelectProps;
+  Upload: AdapterUploadProps;
+}
+
 async function initComponentAdapter() {
   const components: Partial<Record<ComponentType, Component>> = {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
+
-      return h(
+    ApiCascader: withDefaultPlaceholder(ApiComponent, 'select', {
-        ApiComponent,
+      component: Cascader,
-        {
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
-          placeholder: $t('ui.placeholder.select'),
+      loadingSlot: 'suffixIcon',
-          ...props,
+      modelPropName: 'value',
-          ...attrs,
+      visibleEvent: 'onVisibleChange',
-          component: Select,
+    }),
-          loadingSlot: 'suffixIcon',
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
-          visibleEvent: 'onDropdownVisibleChange',
+      component: Select,
-          modelPropName: 'value',
+      loadingSlot: 'suffixIcon',
-        },
+      modelPropName: 'value',
-        slots,
+      visibleEvent: 'onVisibleChange',
-      );
+    }),
-    },
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
-    ApiTreeSelect: (props, { attrs, slots }) => {
+      component: TreeSelect,
-      return h(
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
-        ApiComponent,
+      loadingSlot: 'suffixIcon',
-        {
+      modelPropName: 'value',
-          placeholder: $t('ui.placeholder.select'),
+      optionsPropName: 'treeData',
-          ...props,
+      visibleEvent: 'onVisibleChange',
-          ...attrs,
+    }),
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
     AutoComplete,
     Cascader,
     Checkbox,
     CheckboxGroup,
     DatePicker,
     // 自定义默认按钮
-    DefaultButton: (props, { attrs, slots }) => {
+    DefaultButton: (props: any, { attrs, slots }: any) => {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
-    IconPicker: (props, { attrs, slots }) => {
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
-      return h(
+      iconSlot: 'addonAfter',
-        IconPicker,
+      inputComponent: Input,
-        { iconSlot: 'addonAfter', inputComponent: Input, ...props, ...attrs },
+      modelValueProp: 'value',
-        slots,
+    }),
-      );
-    },
     Input: withDefaultPlaceholder(Input, 'input'),
-    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input', {
+      style: { width: '100%' },
+    }),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
     Mentions: withDefaultPlaceholder(Mentions, 'input'),
     // 自定义主要按钮
-    PrimaryButton: (props, { attrs, slots }) => {
+    PrimaryButton: (props: any, { attrs, slots }: any) => {
       return h(Button, { ...props, attrs, type: 'primary' }, slots);
     },
     Radio,
@@ -155,10 +742,10 @@ async function initComponentAdapter() {
     Textarea: withDefaultPlaceholder(Textarea, 'input'),
     TimePicker,
     TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
-    Upload,
+    Upload: withPreviewUpload(),
   };
 
-  // 自动注册自定义组件
+  // 自动注册 components/form 与 views/**/components/form 下的业务表单组件（如 Editor、Avatar）
   registerComponent(components);
   // 将组件注册到全局共享状态中
   globalShareState.setComponents(components);

apps/web-antd/src/adapter/form.ts

@@ -1,49 +1,84 @@
 import type {
+  VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
-  VbenFormProps,
+  FormValues,
 } from '@vben/common-ui';
 
-import type { ComponentType } from './component';
+import type { ComponentPropsMap, ComponentType } from './component';
 
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-setupVbenForm<ComponentType>({
+async function initSetupVbenForm() {
-  config: {
+  setupVbenForm<ComponentType>({
-    // ant design vue组件库默认都是 v-model:value
+    config: {
-    baseModelPropName: 'value',
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
 
-    // 一些组件是 v-model:checked 或者 v-model:fileList
+      // 一些组件是 v-model:checked 或者 v-model:fileList
-    modelPropNameMap: {
+      modelPropNameMap: {
-      Checkbox: 'checked',
+        Checkbox: 'checked',
-      Radio: 'checked',
+        Radio: 'checked',
-      Switch: 'checked',
+        Switch: 'checked',
-      Upload: 'fileList',
+        Upload: 'fileList',
-      UploadImage: 'modelValue',
+        UploadImage: 'modelValue',
-      UploadOssFile: 'modelValue',
+        UploadOssFile: 'modelValue',
+      },
     },
-  },
+    rules: {
-  defineRules: {
+      // 输入项目必填国际化适配
-    // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
-    required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
-      if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
-        return $t('ui.formRules.required', [ctx.label]);
+        }
-      }
+        return true;
-      return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+      /**
+       * 大陆手机号：必填 + 11 位且号段 13-19（与后端 UtilsService::checkPhone 一致）
+       * 表单字段 rules: 'mobile' 即可，无需再叠 required
+       */
+      mobile: (value, _params, ctx) => {
+        const phone = typeof value === 'string' ? value.trim() : value;
+        if (phone === undefined || phone === null || phone === '') {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        if (!/^1[3456789]\d{9}$/.test(String(phone))) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 选择项目必填国际化适配
+  });
-    selectRequired: (value, _params, ctx) => {
+}
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
 
-const useVbenForm = useForm<ComponentType>;
+function useVbenForm<
+  TFormValues extends FormValues = FormValues,
+  TSubmitValues extends FormValues = TFormValues,
+>(
+  options: FormProps<
+    ComponentType,
+    ComponentPropsMap,
+    TFormValues,
+    TSubmitValues
+  >,
+) {
+  return useForm<TFormValues, ComponentType, ComponentPropsMap, TSubmitValues>(
+    options,
+  );
+}
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
-export type VbenFormSchema = FormSchema<ComponentType>;
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
-export type { VbenFormProps };
+  FormSchema<ComponentType, ComponentPropsMap, TValues>;
+export type VbenFormProps<
+  TFormValues extends FormValues = FormValues,
+  TSubmitValues extends FormValues = TFormValues,
+> = FormProps<ComponentType, ComponentPropsMap, TFormValues, TSubmitValues>;

apps/web-antd/src/adapter/vxe-table.ts

@@ -1,6 +1,14 @@
+import type { FormValues } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { ComponentPropsMap, ComponentType } from './component';
+
 import { h } from 'vue';
 
-import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+import {
+  setupVbenVxeTable,
+  useVbenVxeGrid as useGrid,
+} from '@vben/plugins/vxe-table';
 
 import { Button, Image } from 'ant-design-vue';
 
@@ -33,14 +41,15 @@ setupVbenVxeTable({
         round: true,
         showOverflow: true,
         size: 'small',
-      },
+      } as VxeTableGridOptions,
     });
 
     // 表格配置项可以用 cellRender: { name: 'CellImage' },
     vxeUI.renderer.add('CellImage', {
-      renderTableDefault(_renderOpts, params) {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
         const { column, row } = params;
-        return h(Image, { src: row[column.field] });
+        return h(Image, { src: row[column.field], ...props });
       },
     });
 
@@ -62,6 +71,23 @@ setupVbenVxeTable({
   useVbenForm,
 });
 
-export { useVbenVxeGrid };
+export const useVbenVxeGrid = <
+  T extends Record<string, any>,
+  TFormValues extends FormValues = FormValues,
+  TSubmitValues extends FormValues = TFormValues,
+>(
+  ...rest: Parameters<
+    typeof useGrid<
+      T,
+      ComponentType,
+      ComponentPropsMap,
+      TFormValues,
+      TSubmitValues
+    >
+  >
+) =>
+  useGrid<T, ComponentType, ComponentPropsMap, TFormValues, TSubmitValues>(
+    ...rest,
+  );
 
 export type * from '@vben/plugins/vxe-table';

apps/web-antd/src/api/core/auth.ts

@@ -54,12 +54,15 @@ export namespace AuthApi {
  * 登录
  */
 export async function loginApi(data: AuthApi.LoginParams) {
+  // PC 管理端固定 web，供单机登录按端区分会话
+  const clientType = 'web';
   if (data.account) {
     return requestClient.post<AuthApi.LoginResult>('login', {
       account: data.account,
       password: data.password,
       code: data.code,
       admin_id: data.admin_id,
+      client_type: clientType,
     });
   }
 
@@ -67,6 +70,7 @@ export async function loginApi(data: AuthApi.LoginParams) {
     login_method: data.login_method || 'phone',
     password: data.password,
     code: data.code,
+    client_type: clientType,
   };
 
   if (data.login_method === 'phone') {

apps/web-antd/src/api/request.ts

@@ -1,18 +1,19 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { HttpResponse } from '@vben/request';
+import type { RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
   authenticateResponseInterceptor,
+  defaultResponseInterceptor,
   errorMessageResponseInterceptor,
   RequestClient,
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
-import { message } from 'ant-design-vue';
+import { message, Modal } from 'ant-design-vue';
 // eslint-disable-next-line n/no-extraneous-import
 import { Base64 } from 'js-base64';
 
@@ -29,14 +30,17 @@ import {downloadByData} from "#/util/tool";
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
-function createRequestClient(baseURL: string) {
+function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
+    ...options,
     baseURL,
   });
 
   /**
    * 重新认证逻辑
    */
+  /** 防重复：并发 401 只弹一次重新登录提示 */
+  let authModalShowing = false;
   async function doReAuthenticate() {
     const accessStore = useAccessStore();
     const authStore = useAuthStore();
@@ -47,6 +51,21 @@ function createRequestClient(baseURL: string) {
     ) {
       accessStore.setLoginExpired(true);
     } else {
+      // 被踢/登录失效时用模态框提示，确认后再退出
+      if (!authModalShowing) {
+        authModalShowing = true;
+        await new Promise<void>((resolve) => {
+          Modal.warning({
+            title: '登录失效',
+            content: '账号需重新登录',
+            okText: '重新登录',
+            centered: true,
+            onOk: () => resolve(),
+            onCancel: () => resolve(),
+          });
+        });
+        authModalShowing = false;
+      }
       await authStore.logout(true);
     }
   }
@@ -157,7 +176,9 @@ function createRequestClient(baseURL: string) {
   return client;
 }
 
-export const requestClient = createRequestClient(apiURL);
+export const requestClient = createRequestClient(apiURL, {
+  responseReturn: 'result',
+});
 
 export const baseRequestClient = new RequestClient({ baseURL: apiURL });
 

apps/web-antd/src/app.vue

@@ -9,7 +9,6 @@ import { App, ConfigProvider, theme } from 'ant-design-vue';
 
 import { antdLocale } from '#/locales';
 import { GlobalContextMenu } from '#/components/context-menu';
-import DoctorTransferFloat from '#/components/doctor-transfer-float/DoctorTransferFloat.vue';
 import { useWebSocket } from '#/views/business/chat/composables/useWebSocket';
 import { useChatStore } from '#/views/business/chat/stores/chat';
 import { useUserStore } from '#/views/business/chat/stores/user';
@@ -76,13 +75,6 @@ watch(userInfoLoaded, (loaded) => {
     initWebsocket();
   }
 });
-
-/** 诊所医生账号显示传方悬浮窗（有 doctor_id 且绑定门店） */
-const showDoctorTransferFloat = computed(() => {
-  const info = vbenUserStore.userInfo as Record<string, any> | null;
-  if (!info) return false;
-  return !!(info.doctor_id && info.store_id);
-});
 </script>
 
 <template>
@@ -90,7 +82,6 @@ const showDoctorTransferFloat = computed(() => {
     <App>
       <RouterView />
       <GlobalContextMenu />
-      <DoctorTransferFloat v-if="showDoctorTransferFloat" />
     </App>
   </ConfigProvider>
 </template>

apps/web-antd/src/bootstrap.ts

@@ -1,6 +1,7 @@
 import { createApp, watchEffect } from 'vue';
 
 import { registerAccessDirective } from '@vben/access';
+import { registerLoadingDirective } from '@vben/common-ui/es/loading';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
@@ -11,6 +12,7 @@ import { useTitle } from '@vueuse/core';
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
@@ -18,8 +20,26 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 初始化表单组件
+  await initSetupVbenForm();
+
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 1020,
+  // });
+
   const app = createApp(App);
 
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
+
   // 国际化 i18n 配置
   await setupI18n(app);
 
@@ -29,9 +49,17 @@ async function bootstrap(namespace: string) {
   // 安装权限指令
   registerAccessDirective(app);
 
+  // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
+  initTippy(app);
+
   // 配置路由及路由守卫
   app.use(router);
 
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
   // 动态更新标题
   watchEffect(() => {
     if (preferences.app.dynamicTitle) {

apps/web-antd/src/components/canvas-spreadsheet/commands/SetCellValueCommand.ts

@@ -1,12 +1,12 @@
-import type { SpreadsheetCommand } from '../types';
+import type { SpreadsheetCommand } from '../types';
-
+
-
+export function createSetCellValueCommand(
-
+  undo: () => void | Promise<void>,
-export function createSetCellValueCommand(
+  redo: () => void | Promise<void>,
-
+): SpreadsheetCommand {
-  undo: () => void | Promise<void>,
+  return {
-
+    label: 'setCellValue',
-  redo: () => void | Promise<void>,
+    undo,
-
+    redo,
-): SpreadsheetCommand {
+  };
-
+}

apps/web-antd/src/components/chinese-drug-name-bubble/chinese-drug-name-bubble.vue

@@ -0,0 +1,752 @@
+<script lang="ts" setup>
+/**
+ * 中药药名气泡选择器
+ * - 对齐诊断/医嘱 EntryKeywordBubble：Input 聚焦弹出 Teleport 浮层
+ * - 远程搜索药品（getProductListDoctorReception），支持药名/别名/首拼/全拼/数字
+ * - 列表展示拼音列；命中别名时展示匹配别名及其拼音
+ * - 选中后回传完整商品行，供接诊/复诊/特色方/常用方复用现有落库逻辑
+ */
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { LoadingOutlined, SearchOutlined } from '@ant-design/icons-vue';
+import { useDebounceFn } from '@vueuse/core';
+import { Empty, Input, Spin } from 'ant-design-vue';
+
+import {
+  rankByMatchScore,
+  splitHighlight,
+  type HighlightPart,
+} from '#/utils/dictSearchRank';
+import { getProductListDoctorReception } from '#/views/doctor/doctor-reception/api';
+
+export type ChineseDrugBubbleItem = {
+  id: number;
+  drug_id: number;
+  price: number;
+  buy_price?: number;
+  drug: Record<string, any>;
+  [key: string]: any;
+};
+
+const props = withDefaults(
+  defineProps<{
+    /** 已选药名（展示回填；打开搜索时仍可编辑关键词） */
+    displayName?: string;
+    /** 药品类型：1 中药，颗粒等由调用方传入 */
+    type?: number;
+    storeId?: number;
+    registerId?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    /** 卡片内紧凑宽度 */
+    compact?: boolean;
+    /** 额外 class，便于焦点跳转 querySelector */
+    inputClass?: string;
+  }>(),
+  {
+    displayName: '',
+    type: 1,
+    storeId: 0,
+    registerId: 0,
+    placeholder: '药名',
+    disabled: false,
+    compact: false,
+    inputClass: '',
+  },
+);
+
+const emit = defineEmits<{
+  select: [item: ChineseDrugBubbleItem];
+}>();
+
+const ROW_HEIGHT = 48;
+const HINT_HEIGHT = 34;
+const HEAD_HEIGHT = 32;
+const PANEL_PAD = 8;
+const PREFERRED_PANEL = 360;
+
+const containerRef = ref<HTMLElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+const listRef = ref<HTMLElement | null>(null);
+const inputRef = ref<{ focus?: () => void } | null>(null);
+const keyword = ref('');
+const loading = ref(false);
+const open = ref(false);
+/** 是否处于「正在搜」：true 时不把 displayName 强写回 keyword */
+const searching = ref(false);
+const highlightIndex = ref(0);
+const options = ref<ChineseDrugBubbleItem[]>([]);
+const scrollTop = ref(0);
+const listViewportH = ref(200);
+const panelStyle = ref<Record<string, string>>({});
+
+const totalHeight = computed(() => options.value.length * ROW_HEIGHT);
+const startIndex = computed(() =>
+  Math.max(0, Math.floor(scrollTop.value / ROW_HEIGHT) - 2),
+);
+const endIndex = computed(() => {
+  const visible = Math.ceil(listViewportH.value / ROW_HEIGHT) + 4;
+  return Math.min(options.value.length - 1, startIndex.value + visible);
+});
+const visibleRows = computed(() => {
+  const list = options.value;
+  const start = startIndex.value;
+  const end = endIndex.value;
+  if (list.length === 0 || end < start) return [];
+  return list.slice(start, end + 1).map((item, i) => ({
+    item,
+    index: start + i,
+  }));
+});
+const offsetY = computed(() => startIndex.value * ROW_HEIGHT);
+
+/**
+ * 同步展示名：未打开搜索时用 displayName 回填输入框
+ */
+watch(
+  () => props.displayName,
+  (name) => {
+    if (!searching.value && !open.value) {
+      keyword.value = String(name || '');
+    }
+  },
+  { immediate: true },
+);
+
+function partsOf(text: string): HighlightPart[] {
+  return splitHighlight(text, keyword.value.trim());
+}
+
+function drugNameOf(item: ChineseDrugBubbleItem): string {
+  return String(item?.drug?.drug_name || item?.drug_name || '').trim();
+}
+
+/** 关键词命中的别名（后端 matched_alias） */
+function matchedAliasOf(item: ChineseDrugBubbleItem): string {
+  return String(
+    item?.matched_alias || item?.drug?.matched_alias || '',
+  ).trim();
+}
+
+/**
+ * 拼音展示：命中别名时用别名拼音，否则用药名首拼(全拼)
+ */
+function pinyinLabelOf(item: ChineseDrugBubbleItem): string {
+  const aliasPy = String(
+    item?.matched_alias_pinyin || item?.drug?.matched_alias_pinyin || '',
+  ).trim();
+  if (matchedAliasOf(item) && aliasPy) return aliasPy;
+  const display = String(item?.drug?.pinyin_display || '').trim();
+  if (display) return display;
+  const simple = String(item?.drug?.pinyin_simple || '').trim();
+  const full = String(item?.drug?.pinyin_full || '').trim();
+  if (simple && full && simple.toLowerCase() !== full.toLowerCase()) {
+    return `${simple}(${full})`;
+  }
+  return simple || full || '-';
+}
+
+function unitLabelOf(item: ChineseDrugBubbleItem): string {
+  const unit = item?.drug?.unit || item?.unit;
+  if (typeof unit === 'object' && unit?.name) return String(unit.name);
+  return String(item?.drug?.specification || item?.specification || '').trim() || '-';
+}
+
+function priceLabelOf(item: ChineseDrugBubbleItem): string {
+  const p = Number(item?.price ?? 0);
+  return Number.isFinite(p) ? `¥${p.toFixed(2)}` : '-';
+}
+
+/**
+ * 面板 Teleport + fixed，避免接诊/Modal overflow 裁切
+ */
+function updatePanelPlacement() {
+  const el = containerRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const gap = 4;
+  const spaceBelow = vh - rect.bottom - PANEL_PAD;
+  const spaceAbove = rect.top - PANEL_PAD;
+  const placeTop = spaceBelow < 180 && spaceAbove > spaceBelow;
+  const avail = Math.max(140, placeTop ? spaceAbove : spaceBelow);
+  const panelMax = Math.min(PREFERRED_PANEL, avail);
+  listViewportH.value = Math.max(80, panelMax - HINT_HEIGHT - HEAD_HEIGHT);
+
+  // 含拼音列后加宽，避免别名/全拼被裁切
+  const PANEL_MIN_WIDTH = 560;
+  const width = Math.min(
+    Math.max(rect.width, PANEL_MIN_WIDTH),
+    vw - PANEL_PAD * 2,
+  );
+  let left = rect.left;
+  if (left + width > vw - PANEL_PAD) {
+    left = vw - PANEL_PAD - width;
+  }
+  if (left < PANEL_PAD) left = PANEL_PAD;
+
+  const base: Record<string, string> = {
+    position: 'fixed',
+    zIndex: '4000',
+    width: `${width}px`,
+    maxHeight: `${panelMax}px`,
+    left: `${left}px`,
+    right: 'auto',
+  };
+  if (placeTop) {
+    panelStyle.value = {
+      ...base,
+      top: 'auto',
+      bottom: `${Math.max(PANEL_PAD, vh - rect.top + gap)}px`,
+    };
+  } else {
+    panelStyle.value = {
+      ...base,
+      top: `${rect.bottom + gap}px`,
+      bottom: 'auto',
+    };
+  }
+}
+
+/**
+ * 远程搜药；空关键词不请求（与原中药 Select 一致）
+ */
+async function fetchDrugs(kw: string) {
+  const name = String(kw || '').trim();
+  if (!name) {
+    options.value = [];
+    loading.value = false;
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await getProductListDoctorReception({
+      name,
+      type: props.type,
+      store_id: props.storeId || 0,
+      ...(props.registerId > 0 ? { register_id: props.registerId } : {}),
+    });
+    const list = Array.isArray(res) ? res : [];
+    const mapped: ChineseDrugBubbleItem[] = list.map((item: any) => {
+      const drug = item.drug || {};
+      return {
+        ...item,
+        id: Number(item.id || 0),
+        drug_id: Number(item.drug_id || drug.id || 0),
+        price: Number(item.price ?? 0),
+        buy_price: item.buy_price,
+        drug: {
+          ...drug,
+          drug_name: drug.drug_name || item.drug_name || '',
+        },
+      };
+    });
+    options.value = rankByMatchScore(
+      mapped,
+      name,
+      (it) => drugNameOf(it),
+      (it) =>
+        [
+          it.drug?.pinyin_simple,
+          it.drug?.pinyin_full,
+          it.drug?.pinyin_display,
+          it.drug?.drug_alias,
+          it.matched_alias || it.drug?.matched_alias,
+          it.matched_alias_pinyin || it.drug?.matched_alias_pinyin,
+          it.drug?.search_digits,
+          it.drug?.specification,
+        ]
+          .map((v) => String(v || ''))
+          .join(' '),
+    );
+    highlightIndex.value = options.value.length > 0 ? 0 : -1;
+    scrollTop.value = 0;
+    if (listRef.value) listRef.value.scrollTop = 0;
+  } catch (e) {
+    console.error('中药药名搜索失败:', e);
+    options.value = [];
+  } finally {
+    loading.value = false;
+    nextTick(() => updatePanelPlacement());
+  }
+}
+
+const debouncedFetch = useDebounceFn((kw: string) => {
+  void fetchDrugs(kw);
+}, 280);
+
+function openPanel() {
+  if (props.disabled) return;
+  open.value = true;
+  searching.value = true;
+  nextTick(() => {
+    updatePanelPlacement();
+    if (keyword.value.trim()) {
+      debouncedFetch(keyword.value);
+    } else {
+      options.value = [];
+    }
+  });
+}
+
+function closePanel(restoreDisplay = true) {
+  open.value = false;
+  searching.value = false;
+  options.value = [];
+  highlightIndex.value = 0;
+  if (restoreDisplay) {
+    keyword.value = String(props.displayName || '');
+  }
+}
+
+function handleFocus() {
+  if (props.disabled) return;
+  // 聚焦时清空为搜索态，便于直接输入新药名
+  if (props.displayName && keyword.value === props.displayName) {
+    keyword.value = '';
+  }
+  openPanel();
+}
+
+function handleInput() {
+  searching.value = true;
+  if (!open.value) openPanel();
+  else updatePanelPlacement();
+  debouncedFetch(keyword.value);
+}
+
+function selectItem(item: ChineseDrugBubbleItem) {
+  const name = drugNameOf(item);
+  keyword.value = name;
+  searching.value = false;
+  open.value = false;
+  options.value = [];
+  emit('select', item);
+}
+
+/**
+ * 键盘高亮循环移动（与诊断 EntryKeywordBubble 一致：第一项再上键 → 最后一项）
+ */
+function moveHighlight(delta: number) {
+  if (options.value.length === 0) return;
+  const len = options.value.length;
+  let next = highlightIndex.value;
+  if (next < 0) next = 0;
+  else next = (next + delta + len) % len;
+  highlightIndex.value = next;
+  ensureRowVisible(highlightIndex.value);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (!open.value) {
+    if (e.key === 'ArrowDown' || e.key === 'Enter') {
+      e.preventDefault();
+      openPanel();
+    }
+    return;
+  }
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    closePanel(true);
+    return;
+  }
+  if (options.value.length === 0) return;
+  if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    e.preventDefault();
+    moveHighlight(1);
+  } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+    e.preventDefault();
+    moveHighlight(-1);
+  } else if (e.key === 'Enter') {
+    e.preventDefault();
+    const hit = options.value[highlightIndex.value];
+    if (hit) selectItem(hit);
+  }
+}
+
+function ensureRowVisible(index: number) {
+  const el = listRef.value;
+  if (!el || index < 0) return;
+  const top = index * ROW_HEIGHT;
+  const bottom = top + ROW_HEIGHT;
+  if (top < el.scrollTop) el.scrollTop = top;
+  else if (bottom > el.scrollTop + el.clientHeight) {
+    el.scrollTop = bottom - el.clientHeight;
+  }
+  // 同步虚拟列表切片（循环跳到首/尾时必须刷新可见区）
+  scrollTop.value = el.scrollTop;
+}
+
+function onListScroll() {
+  scrollTop.value = listRef.value?.scrollTop || 0;
+}
+
+function onDocPointerDown(e: MouseEvent) {
+  if (!open.value) return;
+  const t = e.target as Node;
+  if (containerRef.value?.contains(t)) return;
+  if (panelRef.value?.contains(t)) return;
+  closePanel(true);
+}
+
+function onWinChange() {
+  if (open.value) updatePanelPlacement();
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onDocPointerDown, true);
+  window.addEventListener('resize', onWinChange);
+  window.addEventListener('scroll', onWinChange, true);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onDocPointerDown, true);
+  window.removeEventListener('resize', onWinChange);
+  window.removeEventListener('scroll', onWinChange, true);
+});
+
+defineExpose({
+  focus() {
+    nextTick(() => {
+      const el = inputRef.value as any;
+      el?.focus?.();
+      const native = containerRef.value?.querySelector(
+        'input',
+      ) as HTMLInputElement | null;
+      native?.focus();
+    });
+  },
+  close() {
+    closePanel(true);
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="chinese-drug-name-bubble"
+    :class="[{ 'chinese-drug-name-bubble--compact': compact }, inputClass]"
+  >
+    <Input
+      ref="inputRef"
+      v-model:value="keyword"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      allow-clear
+      size="small"
+      @input="handleInput"
+      @focus="handleFocus"
+      @keydown="handleKeydown"
+    >
+      <template #prefix>
+        <LoadingOutlined v-if="loading" class="text-muted-foreground" />
+        <SearchOutlined v-else class="text-muted-foreground" />
+      </template>
+    </Input>
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="panelRef"
+        class="chinese-drug-name-bubble__panel"
+        :style="panelStyle"
+      >
+        <div class="chinese-drug-name-bubble__hint">
+          <span>↑↓←→ 循环切换 · Enter 选用 · Esc 关闭</span>
+          <span class="chinese-drug-name-bubble__count">
+            <template v-if="keyword.trim()">搜到 {{ options.length }} 条</template>
+            <template v-else>输入药名搜索</template>
+          </span>
+        </div>
+        <Spin :spinning="loading">
+          <Empty
+            v-if="!loading && options.length === 0"
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            :description="
+              keyword.trim()
+                ? '未找到匹配药材'
+                : '请输入药名/别名/拼音/数字搜索'
+            "
+            class="py-4"
+          />
+          <template v-else>
+            <div
+              class="chinese-drug-name-bubble__head"
+              :class="{ 'has-score': !!keyword.trim() }"
+            >
+              <span class="col-name">药名</span>
+              <span class="col-py">拼音</span>
+              <span class="col-spec">规格/单位</span>
+              <span class="col-price">价格</span>
+              <span v-if="keyword.trim()" class="col-score">匹配度</span>
+            </div>
+            <div
+              ref="listRef"
+              class="chinese-drug-name-bubble__list"
+              :style="{ height: `${listViewportH}px` }"
+              @scroll="onListScroll"
+            >
+              <div
+                class="chinese-drug-name-bubble__phantom"
+                :style="{ height: `${totalHeight}px` }"
+              />
+              <div
+                class="chinese-drug-name-bubble__virtual"
+                :style="{ transform: `translateY(${offsetY}px)` }"
+              >
+                <div
+                  v-for="{ item, index } in visibleRows"
+                  :key="`${item.drug_id}_${index}`"
+                  class="chinese-drug-name-bubble__row"
+                  :class="{
+                    'is-active': index === highlightIndex,
+                    'has-score': !!keyword.trim(),
+                  }"
+                  :style="{ height: `${ROW_HEIGHT}px` }"
+                  @mousedown.prevent="selectItem(item)"
+                  @mouseenter="highlightIndex = index"
+                >
+                  <span
+                    class="col-name"
+                    :title="
+                      matchedAliasOf(item)
+                        ? `${drugNameOf(item)}（别名：${matchedAliasOf(item)}）`
+                        : drugNameOf(item)
+                    "
+                  >
+                    <span class="col-name__main">
+                      <template
+                        v-for="(p, pi) in partsOf(drugNameOf(item))"
+                        :key="`n_${pi}`"
+                      >
+                        <em v-if="p.hit" class="hit">{{ p.text }}</em>
+                        <template v-else>{{ p.text }}</template>
+                      </template>
+                    </span>
+                    <span
+                      v-if="matchedAliasOf(item)"
+                      class="col-name__alias"
+                    >
+                      别名：
+                      <template
+                        v-for="(p, pi) in partsOf(matchedAliasOf(item))"
+                        :key="`a_${pi}`"
+                      >
+                        <em v-if="p.hit" class="hit">{{ p.text }}</em>
+                        <template v-else>{{ p.text }}</template>
+                      </template>
+                    </span>
+                  </span>
+                  <span class="col-py" :title="pinyinLabelOf(item)">
+                    <template v-if="pinyinLabelOf(item) === '-'">-</template>
+                    <template v-else>
+                      <template
+                        v-for="(p, pi) in partsOf(pinyinLabelOf(item))"
+                        :key="`py_${pi}`"
+                      >
+                        <em v-if="p.hit" class="hit">{{ p.text }}</em>
+                        <template v-else>{{ p.text }}</template>
+                      </template>
+                    </template>
+                  </span>
+                  <span class="col-spec" :title="unitLabelOf(item)">
+                    {{ unitLabelOf(item) }}
+                  </span>
+                  <span class="col-price">{{ priceLabelOf(item) }}</span>
+                  <span v-if="keyword.trim()" class="col-score">
+                    {{ Number(item.match_score || 0) }}%
+                  </span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </Spin>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.chinese-drug-name-bubble {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  /* 锁死宽度：避免接诊/复诊/特色方/常用方 flex 布局把药名框撑满整行 */
+  width: 100px !important;
+  min-width: 88px !important;
+  max-width: 110px !important;
+  flex: 0 0 100px !important;
+  overflow: hidden;
+}
+.chinese-drug-name-bubble--compact {
+  width: 100px !important;
+  min-width: 88px !important;
+  max-width: 110px !important;
+  flex: 0 0 100px !important;
+}
+.chinese-drug-name-bubble :deep(.ant-input-affix-wrapper) {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  padding-inline: 6px;
+  box-sizing: border-box;
+}
+.chinese-drug-name-bubble :deep(.ant-input-prefix) {
+  margin-inline-end: 2px;
+}
+.chinese-drug-name-bubble :deep(.ant-input) {
+  width: 100% !important;
+  min-width: 0 !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chinese-drug-name-bubble__panel {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--popover, var(--background)));
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+.chinese-drug-name-bubble__hint {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.35);
+}
+.chinese-drug-name-bubble__count {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+.chinese-drug-name-bubble__list {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.chinese-drug-name-bubble__phantom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+.chinese-drug-name-bubble__virtual {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.chinese-drug-name-bubble__head,
+.chinese-drug-name-bubble__row {
+  display: grid;
+  grid-template-columns: minmax(90px, 1.1fr) minmax(110px, 1.3fr) 90px 64px;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 13px;
+  align-items: center;
+  box-sizing: border-box;
+}
+.chinese-drug-name-bubble__head.has-score,
+.chinese-drug-name-bubble__row.has-score {
+  grid-template-columns: minmax(90px, 1.1fr) minmax(100px, 1.2fr) 80px 56px 48px;
+}
+.chinese-drug-name-bubble__head {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--popover, var(--background)));
+  border-bottom: 1px solid hsl(var(--border));
+}
+.chinese-drug-name-bubble__row {
+  cursor: pointer;
+  border-bottom: 1px solid hsl(var(--border) / 0.6);
+}
+.chinese-drug-name-bubble__row:hover,
+.chinese-drug-name-bubble__row.is-active {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+.col-name,
+.col-py,
+.col-spec {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.col-name {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  font-weight: 500;
+  white-space: normal;
+  line-height: 1.25;
+}
+.col-name__main {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.col-name__alias {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 400;
+  color: hsl(var(--muted-foreground));
+}
+.col-py {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+.col-spec {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+.col-price {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.col-score {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  color: #d4380d;
+  white-space: nowrap;
+}
+.chinese-drug-name-bubble__row.is-active .col-spec,
+.chinese-drug-name-bubble__row.is-active .col-py,
+.chinese-drug-name-bubble__row.is-active .col-name__alias {
+  color: inherit;
+  opacity: 0.85;
+}
+.chinese-drug-name-bubble__row.is-active .col-score {
+  color: inherit;
+}
+.hit {
+  font-style: normal;
+  color: #cf1322;
+  background: rgba(255, 214, 102, 0.55);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+</style>

apps/web-antd/src/components/chinese-drug-name-bubble/index.ts

@@ -0,0 +1,5 @@
+/**
+ * 中药药名气泡选择器
+ */
+export { default as ChineseDrugNameBubble } from './chinese-drug-name-bubble.vue';
+export type { ChineseDrugBubbleItem } from './chinese-drug-name-bubble.vue';

apps/web-antd/src/components/doctor-transfer-float/DoctorTransferFloat.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /**
- * 医生端 PC 传方悬浮窗：悬浮按钮 + 子窗口列表 + 状态操作
+ * 医生端 PC 传方入口：顶栏按钮 + 子窗口列表 + 状态操作
+ * 权限：有 doctor_id 且绑定 store_id 时由外层 v-if 控制，本组件只负责展示与操作
  */
 import {
   computed,
@@ -11,6 +12,7 @@ import {
 } from 'vue';
 
 import {
+  FileTextOutlined,
   ReloadOutlined,
   ZoomInOutlined,
   ZoomOutOutlined,
@@ -19,6 +21,7 @@ import { usePreferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
 
 import {
+  Badge,
   Button,
   Dropdown,
   Image,
@@ -29,10 +32,10 @@ import {
   Spin,
   Tag,
   Textarea,
+  Tooltip,
   message,
 } from 'ant-design-vue';
 
-import FloatFab from '#/components/float-fab/FloatFab.vue';
 import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
 import {
   DEFAULT_SUB_WINDOW_Z_INDEX,
@@ -355,12 +358,20 @@ defineExpose({ loadList });
 </script>
 
 <template>
-  <FloatFab
+  <div class="doctor-transfer-header-entry">
-    storage-key="pc_doctor_transfer_fab"
+    <Tooltip title="门店传方">
-    label="传方"
+      <Badge :count="pendingCount" :overflow-count="99" size="small">
-    :badge="pendingCount"
+        <Button
-    @click="openWindow"
+          type="text"
-  />
+          class="transfer-header-btn"
+          @click="openWindow"
+        >
+          <FileTextOutlined />
+          <span class="transfer-header-btn__text">传方</span>
+        </Button>
+      </Badge>
+    </Tooltip>
+  </div>
   <SubWindow
     v-model:open="windowOpen"
     title="门店传方"
@@ -848,4 +859,25 @@ defineExpose({ loadList });
   margin: 0 auto;
   user-select: none;
 }
+.doctor-transfer-header-entry {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+.transfer-header-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 32px;
+  padding: 0 8px;
+  color: hsl(var(--foreground));
+}
+.transfer-header-btn__text {
+  font-size: 13px;
+}
+@media (max-width: 640px) {
+  .transfer-header-btn__text {
+    display: none;
+  }
+}
 </style>

apps/web-antd/src/components/file-preview/FilePreviewModal.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+/**
+ * 通用文件预览：图片用 Ant Image；PDF fetch→blob→iframe；支持多文件切换
+ * 开票中心与素材库复用，避免两套预览逻辑
+ */
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+
+import { Button, Image, Modal, Spin, message } from 'ant-design-vue';
+
+const props = withDefaults(
+  defineProps<{
+    /** 是否显示 */
+    open: boolean;
+    /** 文件 URL 列表 */
+    files?: string[];
+    /** 弹窗标题前缀 */
+    title?: string;
+  }>(),
+  {
+    files: () => [],
+    title: '文件预览',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:open', v: boolean): void;
+}>();
+
+const currentIndex = ref(0);
+const previewIsImage = ref(false);
+const previewImageUrl = ref('');
+const previewPdfUrl = ref('');
+const previewLoading = ref(false);
+
+const visible = computed({
+  get: () => props.open,
+  set: (v: boolean) => emit('update:open', v),
+});
+
+const currentUrl = computed(() => props.files?.[currentIndex.value] || '');
+
+const displayTitle = computed(() => {
+  const name = (currentUrl.value || '').split('/').pop() || '';
+  const total = props.files?.length || 0;
+  if (total > 1) {
+    return `${props.title}（${currentIndex.value + 1}/${total}）${name ? ' - ' + name : ''}`;
+  }
+  return name ? `${props.title} - ${name}` : props.title;
+});
+
+function isImageUrl(url: string) {
+  return /\.(jpg|jpeg|png|gif|webp|bmp)(\?|$)/i.test(url || '');
+}
+
+function revokePdfBlob() {
+  if (previewPdfUrl.value && previewPdfUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(previewPdfUrl.value);
+  }
+  previewPdfUrl.value = '';
+}
+
+/**
+ * 加载当前文件到预览区
+ */
+async function loadCurrent() {
+  const url = currentUrl.value;
+  revokePdfBlob();
+  if (!url) {
+    message.info('暂无文件');
+    visible.value = false;
+    return;
+  }
+  if (isImageUrl(url)) {
+    previewIsImage.value = true;
+    previewImageUrl.value = url;
+    previewLoading.value = false;
+    return;
+  }
+  previewIsImage.value = false;
+  previewLoading.value = true;
+  try {
+    const resp = await fetch(url);
+    if (!resp.ok) throw new Error('文件加载失败');
+    const blob = await resp.blob();
+    const pdfBlob =
+      blob.type && blob.type !== 'application/octet-stream'
+        ? blob
+        : new Blob([blob], { type: 'application/pdf' });
+    previewPdfUrl.value = URL.createObjectURL(pdfBlob);
+  } catch {
+    message.error('预览失败，请尝试下载后查看');
+    visible.value = false;
+  } finally {
+    previewLoading.value = false;
+  }
+}
+
+function prevFile() {
+  if (currentIndex.value > 0) {
+    currentIndex.value -= 1;
+  }
+}
+
+function nextFile() {
+  if (props.files && currentIndex.value < props.files.length - 1) {
+    currentIndex.value += 1;
+  }
+}
+
+function handleClose() {
+  visible.value = false;
+}
+
+watch(
+  () => [props.open, props.files] as const,
+  ([open]) => {
+    if (open) {
+      currentIndex.value = 0;
+      loadCurrent();
+    } else {
+      revokePdfBlob();
+    }
+  },
+);
+
+watch(currentIndex, () => {
+  if (props.open) {
+    loadCurrent();
+  }
+});
+
+onBeforeUnmount(() => {
+  revokePdfBlob();
+});
+</script>
+
+<template>
+  <Modal
+    v-model:open="visible"
+    :title="displayTitle"
+    :footer="null"
+    width="860px"
+    destroy-on-close
+    @cancel="handleClose"
+  >
+    <div class="preview-wrap">
+      <div v-if="(files?.length || 0) > 1" class="nav">
+        <Button size="small" :disabled="currentIndex <= 0" @click="prevFile">上一份</Button>
+        <Button
+          size="small"
+          :disabled="currentIndex >= (files?.length || 0) - 1"
+          @click="nextFile"
+        >
+          下一份
+        </Button>
+      </div>
+      <Spin :spinning="previewLoading">
+        <div v-if="previewIsImage" class="img-box">
+          <Image :src="previewImageUrl" :preview="true" style="max-width: 100%" />
+        </div>
+        <iframe
+          v-else-if="previewPdfUrl"
+          :src="previewPdfUrl"
+          class="pdf-frame"
+          title="pdf-preview"
+        />
+      </Spin>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.preview-wrap {
+  min-height: 240px;
+  color: hsl(var(--foreground));
+}
+.nav {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.img-box {
+  text-align: center;
+  padding: 8px;
+  border-radius: 8px;
+  background: hsl(var(--muted) / 0.25);
+  border: 1px solid hsl(var(--border));
+}
+.pdf-frame {
+  width: 100%;
+  height: 70vh;
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  background: hsl(var(--background));
+}
+</style>

apps/web-antd/src/components/form/component-map.ts

@@ -1,7 +1,7 @@
-import type { CustomComponentType } from './types';
-
 import type { Component } from 'vue';
 
+import type { CustomComponentType } from './types';
+
 import { getFileNameWithoutExtension, toPascalCase } from '#/util/tool';
 
 const componentMap = new Map<CustomComponentType | string, Component>();

apps/web-antd/src/components/form/components/api-log-user-picker.vue

@@ -1,346 +1,346 @@
-<script setup lang="ts">
+<script setup lang="ts">
-
+import { computed, nextTick, ref, watch } from 'vue';
-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 { useDebounceFn, useVModel } from '@vueuse/core';
+import { searchApiLogUsers } from '#/views/log/api-log/api';
-
+
-import { Avatar, Empty, Input, Popover, Spin, Tabs, Tag } from 'ant-design-vue';
+defineOptions({
-
+  name: 'ApiLogUserPicker',
-
+  inheritAttrs: false,
-
+});
-import { searchApiLogUsers } from '#/views/log/api-log/api';
+
-
+export type ApiLogUserFilter = {
-
+  id: number;
-
+  user_type: 'admin' | 'patient' | 'doctor';
-defineOptions({
+  platform_type: 0 | 1 | 2;
-
+  name: string;
-  name: 'ApiLogUserPicker',
+  role_label: string;
-
+  avatar?: string;
-  inheritAttrs: false,
+};
-
+
-});
+type ApiLogUserOption = ApiLogUserFilter;
-
+
-
+type UserTab = 'admin' | 'patient' | 'doctor';
-
+
-export type ApiLogUserFilter = {
+const props = defineProps<{
-
+  value?: ApiLogUserFilter;
-  id: number;
+  disabled?: boolean;
-
+  onPlatformTypeChange?: (platformType: 0 | 1 | 2) => void;
-  user_type: 'admin' | 'patient' | 'doctor';
+}>();
-
+
-  platform_type: 0 | 1 | 2;
+const emits = defineEmits<{
-
+  'update:value': [value: ApiLogUserFilter | undefined];
-  name: string;
+}>();
-
+
-  role_label: string;
+const mValue = useVModel(props, 'value', emits, { passive: true });
-
+
-  avatar?: string;
+const open = ref(false);
-
+const loading = ref(false);
-};
+const searchKeyword = ref('');
-
+const activeTab = ref<UserTab>('admin');
-
+const options = ref<ApiLogUserOption[]>([]);
-
+const searchInputRef = ref<InstanceType<typeof Input> | null>(null);
-type ApiLogUserOption = ApiLogUserFilter;
+
-
+const TAB_ITEMS = [
-
+  { key: 'admin', label: '后台用户' },
-
+  { key: 'patient', label: '患者端用户' },
-type UserTab = 'admin' | 'patient' | 'doctor';
+  { key: 'doctor', label: '医生端用户' },
-
+] as const;
-
+
-
+const searchPlaceholder = computed(() => {
-const props = defineProps<{
+  if (activeTab.value === 'admin') return '搜索手机号或昵称';
-
+  if (activeTab.value === 'patient') return '搜索用户名字';
-  value?: ApiLogUserFilter;
+  return '搜索名字或手机号';
-
+});
-  disabled?: boolean;
+
-
+async function fetchOptions() {
-  onPlatformTypeChange?: (platformType: 0 | 1 | 2) => void;
+  const keyword = searchKeyword.value.trim();
-
+  if (!keyword) {
-}>();
+    options.value = [];
-
+    return;
-
+  }
-
+
-const emits = defineEmits<{
+  loading.value = true;
-
+  try {
-  'update:value': [value: ApiLogUserFilter | undefined];
+    const result = await searchApiLogUsers({
-
+      user_type: activeTab.value,
-}>();
+      keyword,
-
+      pageSize: 24,
-
+    });
-
+    options.value = result?.items ?? [];
-const mValue = useVModel(props, 'value', emits, { passive: true });
+  } finally {
-
+    loading.value = false;
-
+  }
-
+}
-const open = ref(false);
+
-
+const debouncedFetch = useDebounceFn(fetchOptions, 300);
-const loading = ref(false);
+
-
+watch([searchKeyword, activeTab], () => {
-const searchKeyword = ref('');
+  debouncedFetch();
-
+});
-const activeTab = ref<UserTab>('admin');
+
-
+function selectOption(item: ApiLogUserOption) {
-const options = ref<ApiLogUserOption[]>([]);
+  mValue.value = {
-
+    id: item.id,
-const searchInputRef = ref<InstanceType<typeof Input> | null>(null);
+    user_type: item.user_type,
-
+    platform_type: item.platform_type,
-
+    name: item.name,
-
+    role_label: item.role_label,
-const TAB_ITEMS = [
+    avatar: item.avatar,
-
+  };
-  { key: 'admin', label: '后台用户' },
+  props.onPlatformTypeChange?.(item.platform_type);
-
+  open.value = false;
-  { key: 'patient', label: '患者端用户' },
+  searchKeyword.value = '';
-
+  options.value = [];
-  { key: 'doctor', label: '医生端用户' },
+}
-
+
-] as const;
+function clearSelection(e: Event) {
-
+  e.stopPropagation();
-
+  mValue.value = undefined;
-
+}
-const searchPlaceholder = computed(() => {
+
-
+function onOpenChange(next: boolean) {
-  if (activeTab.value === 'admin') return '搜索手机号或昵称';
+  if (props.disabled) return;
-
+  open.value = next;
-  if (activeTab.value === 'patient') return '搜索用户名字';
+  if (next) {
-
+    searchKeyword.value = '';
-  return '搜索名字或手机号';
+    options.value = [];
-
+    nextTick(() => searchInputRef.value?.focus?.());
-});
+  }
-
+}
-
+
-
+watch(
-async function fetchOptions() {
+  () => props.disabled,
-
+  (disabled) => {
-  const keyword = searchKeyword.value.trim();
+    if (disabled) open.value = false;
-
+  },
-  if (!keyword) {
+);
-
+</script>
-    options.value = [];
+
-
+<template>
-    return;
+  <Popover
-
+    :open="open"
-  }
+    trigger="click"
-
+    placement="bottomLeft"
-
+    overlay-class-name="api-log-user-picker-popover"
-
+    @open-change="onOpenChange"
-  loading.value = true;
+  >
-
+    <template #content>
-  try {
+      <div class="api-log-user-panel">
-
+        <Tabs v-model:active-key="activeTab" size="small" class="api-log-user-tabs">
-    const result = await searchApiLogUsers({
+          <Tabs.TabPane
-
+            v-for="tab in TAB_ITEMS"
-      user_type: activeTab.value,
+            :key="tab.key"
-
+            :tab="tab.label"
-      keyword,
+          />
-
+        </Tabs>
-      pageSize: 24,
+        <Input
-
+          ref="searchInputRef"
-    });
+          v-model:value="searchKeyword"
-
+          allow-clear
-    options.value = result?.items ?? [];
+          :placeholder="searchPlaceholder"
-
+          class="api-log-user-search"
-  } finally {
+        />
-
+        <Spin :spinning="loading">
-    loading.value = false;
+          <div v-if="options.length" class="api-log-user-grid">
-
+            <button
-  }
+              v-for="item in options"
-
+              :key="`${item.user_type}-${item.id}`"
-}
+              type="button"
-
+              class="api-log-user-card"
-
+              :class="{
-
+                active:
-const debouncedFetch = useDebounceFn(fetchOptions, 300);
+                  mValue?.id === item.id && mValue?.user_type === item.user_type,
-
+              }"
-
+              @click="selectOption(item)"
-
+            >
-watch([searchKeyword, activeTab], () => {
+              <Avatar :src="item.avatar" :size="30">
-
+                {{ (item.name || '?').charAt(0) }}
-  debouncedFetch();
+              </Avatar>
-
+              <div class="api-log-user-card-id">#{{ item.id }}</div>
-});
+              <div class="api-log-user-card-name" :title="item.name">
-
+                {{ item.name }}
-
+              </div>
-
+              <Tag class="api-log-user-card-role" :bordered="false">
-function selectOption(item: ApiLogUserOption) {
+                {{ item.role_label }}
-
+              </Tag>
-  mValue.value = {
+            </button>
-
+          </div>
-    id: item.id,
+          <Empty
-
+            v-else
-    user_type: item.user_type,
+            :description="searchKeyword.trim() ? '无匹配用户' : '请输入关键词搜索'"
-
+            class="api-log-user-empty"
-    platform_type: item.platform_type,
+          />
-
+        </Spin>
-    name: item.name,
+      </div>
-
+    </template>
-    role_label: item.role_label,
+    <div class="api-log-user-trigger" :class="{ disabled: disabled }">
-
+      <div v-if="mValue" class="api-log-selected-card">
-    avatar: item.avatar,
+        <Avatar :src="mValue.avatar" :size="36">
-
+          {{ (mValue.name || '?').charAt(0) }}
-  };
+        </Avatar>
-
+        <div class="api-log-selected-meta">
-  props.onPlatformTypeChange?.(item.platform_type);
+          <div class="api-log-selected-name">{{ mValue.name }}</div>
-
+          <div class="api-log-selected-sub">
-  open.value = false;
+            #{{ mValue.id }} · {{ mValue.role_label }}
-
+          </div>
-  searchKeyword.value = '';
+        </div>
-
+        <span
-  options.value = [];
+          v-if="!disabled"
-
+          class="api-log-clear-btn"
-}
+          @click="clearSelection"
-
+        >
-
+          ×
-
+        </span>
-function clearSelection(e: Event) {
+      </div>
-
+      <div v-else class="api-log-trigger-placeholder">请选择操作用户</div>
-  e.stopPropagation();
+    </div>
-
+  </Popover>
-  mValue.value = undefined;
+</template>
-
+
-}
+<style scoped lang="scss">
-
+@use './picker-card-theme.scss' as theme;
-
+
-
+.api-log-user-trigger {
-function onOpenChange(next: boolean) {
+  width: 100%;
-
+}
-  if (props.disabled) return;
+
-
+.api-log-user-trigger.disabled {
-  open.value = next;
+  cursor: not-allowed;
-
+  opacity: 0.65;
-  if (next) {
+}
-
+
-    searchKeyword.value = '';
+.api-log-user-trigger:not(.disabled) {
-
+  cursor: pointer;
-    options.value = [];
+}
-
+
-    nextTick(() => searchInputRef.value?.focus?.());
+.api-log-selected-card {
-
+  @include theme.picker-selected-card;
-  }
+}
-
+
-}
+.api-log-selected-meta {
-
+  min-width: 0;
-
+  flex: 1;
-
+}
-watch(
+
-
+.api-log-selected-name {
-  () => props.disabled,
+  font-size: 14px;
-
+  font-weight: 500;
-  (disabled) => {
+  color: #1d2129;
-
+  line-height: 1.4;
-    if (disabled) open.value = false;
+  overflow: hidden;
-
+  text-overflow: ellipsis;
-  },
+  white-space: nowrap;
-
+}
-);
+
-
+.api-log-selected-sub {
-</script>
+  font-size: 12px;
-
+  color: #86909c;
-
+  line-height: 1.4;
-
+}
-<template>
+
-
+.api-log-trigger-placeholder {
-  <Popover
+  @include theme.picker-trigger-placeholder;
-
+}
-    :open="open"
+
-
+.api-log-clear-btn {
-    trigger="click"
+  @include theme.picker-clear-btn;
-
+}
-    placement="bottomLeft"
+
-
+.dark {
-    overlay-class-name="api-log-user-picker-popover"
+  .api-log-selected-card {
-
+    @include theme.picker-selected-card-dark-props;
-    @open-change="onOpenChange"
+  }
-
+
-  >
+  .api-log-selected-name {
-
+    @include theme.picker-text-primary-dark;
-    <template #content>
+  }
-
+
-      <div class="api-log-user-panel">
+  .api-log-selected-sub {
-
+    @include theme.picker-text-secondary-dark;
-        <Tabs v-model:active-key="activeTab" size="small" class="api-log-user-tabs">
+  }
-
+
-          <Tabs.TabPane
+  .api-log-trigger-placeholder {
-
+    @include theme.picker-placeholder-dark-props;
-            v-for="tab in TAB_ITEMS"
+  }
-
+
-            :key="tab.key"
+  .api-log-clear-btn {
-
+    @include theme.picker-clear-dark-props;
-            :tab="tab.label"
+  }
-
+}
-          />
+</style>
-
+
-        </Tabs>
+<style lang="scss">
-
+@use './picker-card-theme.scss' as theme;
-        <Input
+
-
+.api-log-user-picker-popover {
-          ref="searchInputRef"
+  .ant-popover-inner {
-
+    padding: 12px;
-          v-model:value="searchKeyword"
+  }
-
+
-          allow-clear
+  .api-log-user-panel {
-
+    width: 540px;
-          :placeholder="searchPlaceholder"
+    max-width: 86vw;
-
+  }
-          class="api-log-user-search"
+
-
+  .api-log-user-tabs {
-        />
+    margin-bottom: 8px;
-
+  }
-        <Spin :spinning="loading">
+
-
+  .api-log-user-search {
-          <div v-if="options.length" class="api-log-user-grid">
+    margin-bottom: 10px;
-
+  }
-            <button
+
-
+  .api-log-user-grid {
-              v-for="item in options"
+    display: grid;
-
+    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
-              :key="`${item.user_type}-${item.id}`"
+    gap: 8px;
-
+    max-height: 300px;
-              type="button"
+    overflow-y: auto;
-
+    padding: 2px;
-              class="api-log-user-card"
+  }
-
+
-              :class="{
+  .api-log-user-card {
-
+    @include theme.picker-card-base;
-                active:
+  }
-
+
-                  mValue?.id === item.id && mValue?.user_type === item.user_type,
+  .api-log-user-card-id {
-
+    @include theme.picker-card-sub;
-              }"
+  }
-
+
-              @click="selectOption(item)"
+  .api-log-user-card-name {
-
+    @include theme.picker-card-name;
-            >
+  }
-
+
-              <Avatar :src="item.avatar" :size="30">
+  .api-log-user-card-role {
-
+    margin: 0;
-                {{ (item.name || '?').charAt(0) }}
+    font-size: 11px;
-
+    line-height: 18px;
-              </Avatar>
+    padding: 0 6px;
-
+    max-width: 100%;
-              <div class="api-log-user-card-id">#{{ item.id }}</div>
+    overflow: hidden;
-
+    text-overflow: ellipsis;
-              <div class="api-log-user-card-name" :title="item.name">
+  }
-
+
-                {{ item.name }}
+  .api-log-user-empty {
-
+    margin: 16px 0;
-              </div>
+  }
-
+}
-              <Tag class="api-log-user-card-role" :bordered="false">
+
-
+.dark .api-log-user-picker-popover {
-                {{ item.role_label }}
+  .api-log-user-card {
-
+    @include theme.picker-card-dark-props;
-              </Tag>
+  }
-
+
-            </button>
+  .api-log-user-card-name {
-
+    @include theme.picker-text-primary-dark;
-          </div>
+  }
-
+
-          <Empty
+  .api-log-user-card-id {
-
+    @include theme.picker-text-secondary-dark;
-            v-else
+  }
-
+}
-            :description="searchKeyword.trim() ? '无匹配用户' : '请输入关键词搜索'"
+</style>
-
+

apps/web-antd/src/components/form/components/avatar.vue

@@ -79,7 +79,7 @@ const handleRemove = (e: Event) => {
       </div>
       <Icon v-else icon="ant-design:plus-outlined" />
     </Upload>
-    <GalleryPickLink @select="onGallerySelect" />
+    <GalleryPickLink :accept-types="[0]" @select="onGallerySelect" />
   </div>
 </template>
 <style lang="less" scoped>

apps/web-antd/src/components/form/components/editor.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { preferences } from '@vben/preferences';
+
 import { QuillEditor } from '@vueup/vue-quill';
-// eslint-disable-next-line n/no-extraneous-import
-import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import { useVModel } from '@vueuse/core';
 import { message } from 'ant-design-vue';
 
@@ -11,7 +11,9 @@ import { message } from 'ant-design-vue';
 import { uploadFile } from '#/api/core/upload';
 import { uploadToOss } from '#/utils/oss-upload';
 import { prepareImageForUpload } from '#/utils/prepare-image-upload';
-import { preferences } from '@vben/preferences';
+
+// eslint-disable-next-line n/no-extraneous-import
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
 
 const props = defineProps({
   value: {
@@ -140,26 +142,26 @@ const insertImageToEditor = (quill: any, imageUrl: string): void => {
 };
 /**
  * 图片上传函数
- * 
+ *
  * 该函数根据preferences配置的上传方式，选择使用OSS直传或后端上传：
  * - 'direct': OSS直传模式，文件直接从浏览器上传到阿里云OSS
  * - 'backend': 后端上传模式，文件先上传到后端服务器，再由后端上传到OSS
- * 
+ *
  * 上传方式说明：
  * 1. OSS直传（direct）：
  *    - 调用uploadToOss函数，直接上传到OSS
  *    - 减少服务器负载，上传速度更快
  *    - 支持上传进度回调（如果需要可以添加）
- * 
+ *
  * 2. 后端上传（backend）：
  *    - 调用uploadFile API，通过后端服务器上传
  *    - 兼容现有功能，所有上传逻辑由后端统一处理
- * 
+ *
  * 兼容性处理：
  * - 两种上传方式返回的数据结构保持一致：{ url: string }
  * - 上传成功或失败都会显示相应的提示信息
  * - 上传完成后，将isUpload标记设置为false，允许下次上传
- * 
+ *
  * @param {File} file - 要上传的图片文件
  * @returns {Promise<string>} - 返回上传后的图片URL，如果上传失败返回空字符串
  */
@@ -205,22 +207,22 @@ const uploadImage = async (file: File): Promise<string> => {
       key: 'imageUpload',
       duration: 2,
     });
-    
+
     // 重置上传标记，允许下次上传
     isUpload.value = false;
-    
+
     // 返回上传后的图片URL
     return data.url;
   } catch (error) {
     // 处理上传错误
     console.error('图片上传错误:', error);
-    
+
     // 显示错误提示
     message.error({ content: '图片上传失败', key: 'imageUpload', duration: 2 });
-    
+
     // 重置上传标记，允许重试
     isUpload.value = false;
-    
+
     // 返回空字符串，表示上传失败
     return '';
   }

apps/web-antd/src/components/form/components/gallery-pick-link.vue

@@ -8,11 +8,17 @@ const props = withDefaults(
     multiple?: boolean;
     maxCount?: number;
     disabled?: boolean;
+    /**
+     * 限制可选择的文件类型（透传给 image-gallery-picker，按 xk_file.type / xk_file_type.value 过滤）
+     * 例如图片：[0]；视频：[1]；文件：[6]；语音：[3]
+     */
+    acceptTypes?: number[];
   }>(),
   {
     multiple: false,
     maxCount: 1,
     disabled: false,
+    acceptTypes: () => [] as number[],
   },
 );
 
@@ -41,6 +47,7 @@ function onSelect(urls: string[]) {
       v-model:open="galleryOpen"
       :multiple="multiple"
       :max-count="maxCount"
+      :accept-types="acceptTypes"
       @select="onSelect"
     />
   </div>

apps/web-antd/src/components/form/components/image-gallery-picker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { Empty, Input, Modal, Pagination, Spin, Tabs } from 'ant-design-vue';
 
@@ -14,10 +14,18 @@ const props = withDefaults(
     open: boolean;
     multiple?: boolean;
     maxCount?: number;
+    /**
+     * 限制可选择的文件类型（按 xk_file_type.value 过滤）
+     * - 不传：显示全部类型（默认行为，保持向后兼容）
+     * - 传数组：只展示指定类型 tab，且自动锁定到第一个匹配的类型
+     * 例如图片：[0]；图片+视频：[0, 1]；文件：[6]
+     */
+    acceptTypes?: number[];
   }>(),
   {
     multiple: false,
     maxCount: 1,
+    acceptTypes: () => [] as number[],
   },
 );
 
@@ -34,6 +42,14 @@ const pageSize = ref(24);
 const pageSizeOptions = ['12', '24', '48'];
 const selected = ref<string[]>([]);
 
+/** 按 acceptTypes 隔离 localStorage，避免图片/视频选择器互相污染 */
+const storageKey = computed(
+  () =>
+    `file-picker-type-${
+      props.acceptTypes?.length ? props.acceptTypes.join('-') : 'all'
+    }`,
+);
+
 const {
   activeType,
   keyword,
@@ -42,14 +58,55 @@ const {
   buildListParams,
   fileTypes,
   typesLoading,
-} = useFileGalleryFilter('file-picker-active-type');
+} = useFileGalleryFilter(() => storageKey.value);
 
-let searchTimer: ReturnType<typeof setTimeout> | null = null;
+/**
+ * 实际渲染的 tabs（按 acceptTypes 过滤）
+ */
+const visibleTabs = computed(() => {
+  if (!props.acceptTypes || props.acceptTypes.length === 0) {
+    return tabs.value;
+  }
+  return tabs.value.filter(
+    (tab) => tab.value !== -1 && props.acceptTypes.includes(Number(tab.value)),
+  );
+});
+
+/**
+ * 强制锁定到 acceptTypes 首项（打开弹窗 / 类型字典就绪时调用）
+ */
+function lockAcceptType() {
+  const arr = props.acceptTypes;
+  if (!arr || arr.length === 0) {
+    return;
+  }
+  if (activeType.value !== arr[0]) {
+    setActiveType(arr[0]!);
+  }
+}
+
+/**
+ * 是否允许拉列表：有 acceptTypes 时需等类型字典加载完且 visibleTabs 非空
+ */
+function canLoadList() {
+  if (typesLoading.value) {
+    return false;
+  }
+  if (props.acceptTypes && props.acceptTypes.length > 0) {
+    return visibleTabs.value.length > 0;
+  }
+  return true;
+}
 
 async function load() {
+  if (!canLoadList()) {
+    return;
+  }
   loading.value = true;
   try {
-    const res = await getFileGalleryList(buildListParams(page.value, pageSize.value));
+    const res = await getFileGalleryList(
+      buildListParams(page.value, pageSize.value),
+    );
     const data = (res as any)?.data ?? res;
     items.value = data?.items ?? [];
     total.value = data?.total ?? 0;
@@ -58,21 +115,37 @@ async function load() {
   }
 }
 
+watch(
+  () => props.acceptTypes,
+  (arr) => {
+    if (!arr || arr.length === 0) {
+      return;
+    }
+    lockAcceptType();
+    page.value = 1;
+    void load();
+  },
+  { immediate: true },
+);
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
 watch(
   () => props.open,
   (val) => {
     if (val) {
       selected.value = [];
       page.value = 1;
-      if (!typesLoading.value) {
+      // 打开时再次按 acceptTypes 重锁，避免沿用其它选择器的视频 tab
-        void load();
+      lockAcceptType();
-      }
+      void load();
     }
   },
 );
 
 watch(typesLoading, (val) => {
   if (!val && props.open) {
+    lockAcceptType();
     void load();
   }
 });
@@ -143,6 +216,11 @@ function onSearch(value: string) {
 function itemIcon(item: FileGalleryItem) {
   return item.type_icon || resolveTypeIcon(item.type, fileTypes.value);
 }
+
+/** 图片类型展示缩略图（xk_file.type：0=图片；兼容历史错误写入的 1） */
+function isImageItem(item: FileGalleryItem) {
+  return Number(item.type) === 0 || Number(item.type) === 1;
+}
 </script>
 
 <template>
@@ -155,7 +233,7 @@ function itemIcon(item: FileGalleryItem) {
     @cancel="handleCancel"
   >
     <Tabs :active-key="String(activeType)" size="small" @change="onTabChange">
-      <Tabs.TabPane v-for="tab in tabs" :key="String(tab.value)">
+      <Tabs.TabPane v-for="tab in visibleTabs" :key="String(tab.value)">
         <template #tab>
           <span class="tab-label">
             <MIcon v-if="tab.icon" :icon="tab.icon" size="12" />
@@ -176,7 +254,7 @@ function itemIcon(item: FileGalleryItem) {
       />
     </div>
 
-    <Spin :spinning="loading">
+    <Spin :spinning="loading || typesLoading">
       <div v-if="items.length" class="gallery-grid">
         <div
           v-for="item in items"
@@ -185,10 +263,17 @@ function itemIcon(item: FileGalleryItem) {
           :class="{ active: isSelected(item.url) }"
           @click="toggleSelect(item.url)"
         >
-          <img v-if="item.type === 0" :src="item.url" alt="" class="gallery-thumb" />
+          <img
+            v-if="isImageItem(item)"
+            :src="item.url"
+            alt=""
+            class="gallery-thumb"
+          />
           <div v-else class="gallery-file-icon">
             <MIcon :icon="itemIcon(item)" size="28" />
-            <span class="file-name">{{ item.file_name || item.original_name || '未命名' }}</span>
+            <span class="file-name">{{
+              item.file_name || item.original_name || '未命名'
+            }}</span>
           </div>
           <div class="gallery-meta">
             <div class="file-title">

apps/web-antd/src/components/form/components/store-multi-search.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
 /**
- * 门店多选搜索组件
+ * 门店多选搜索（对齐开方关键字气泡交互）
- * - 普通输入框输入，下方气泡卡片展示匹配结果（名称 / 拼音首拼）
+ * - Teleport + fixed 锚定，避免搜索栏 overflow 裁切导致「气泡不见」
- * - 选中后在输入框下方用可关闭 Tag 展示「名称【id】」
+ * - 多选：点选后不关闭面板，已选项从列表剔除并以 Tag 展示
- * - 搜索结果默认高亮第一项，Enter 可直接选中
+ * - Enter / ↑↓ 键盘选用，Esc 关闭
- * - 样式使用主题 CSS 变量，自动适配暗色
  */
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue';
 
 import { LoadingOutlined, SearchOutlined } from '@ant-design/icons-vue';
 import { useDebounceFn, useVModel } from '@vueuse/core';
@@ -28,16 +34,11 @@ export type StoreSearchItem = {
 
 const props = withDefaults(
   defineProps<{
-    /** 已选门店 ID 列表 */
     value?: number[];
-    /** 限定类型：0诊所 1药店；不传则诊所+药店都可搜 */
+    /** 0诊所 1药店；不传则诊所+药店 */
     storeType?: 0 | 1;
     placeholder?: string;
     disabled?: boolean;
-    /**
-     * 外部已选门店详情（打开绑定弹窗时回填名称用）
-     * 仅用于 Tag 展示，不改变 value
-     */
     initialItems?: StoreSearchItem[];
   }>(),
   {
@@ -59,13 +60,15 @@ const mValue = useVModel(props, 'value', emits, {
 });
 
 const containerRef = ref<HTMLElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+const listRef = ref<HTMLElement | null>(null);
 const searchKeyword = ref('');
 const loading = ref(false);
 const showDropdown = ref(false);
 const highlightIndex = ref(-1);
 const options = ref<StoreSearchItem[]>([]);
-/** 已选门店详情（用于 Tag 展示名称） */
 const selectedMap = ref<Record<number, StoreSearchItem>>({});
+const panelStyle = ref<Record<string, string>>({});
 
 const selectedIds = computed(() =>
   Array.isArray(mValue.value) ? mValue.value.map(Number) : [],
@@ -78,28 +81,68 @@ const selectedItems = computed(() =>
   }),
 );
 
-/** 下拉中过滤掉已选 */
+/** 下拉中过滤掉已选，方便连续多选 */
 const visibleOptions = computed(() =>
   options.value.filter((item) => !selectedIds.value.includes(item.id)),
 );
 
-/**
- * 将初始/回填门店写入 selectedMap，便于 Tag 显示真实名称
- */
 function mergeInitialItems(items: StoreSearchItem[]) {
   if (!items?.length) return;
   const next = { ...selectedMap.value };
   for (const item of items) {
-    if (item?.id) {
+    if (item?.id) next[item.id] = item;
-      next[item.id] = item;
-    }
   }
   selectedMap.value = next;
 }
 
 /**
- * 请求后端门店搜索；有结果时默认高亮第一项
+ * 相对输入框视口坐标放置面板（与 EntryKeywordBubble 同思路）
  */
+function updatePanelPlacement() {
+  const el = containerRef.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const gap = 4;
+  const pad = 8;
+  const spaceBelow = vh - rect.bottom - pad;
+  const spaceAbove = rect.top - pad;
+  const placeTop = spaceBelow < 200 && spaceAbove > spaceBelow;
+  const avail = Math.max(160, placeTop ? spaceAbove : spaceBelow);
+  const maxH = Math.min(320, avail);
+  const width = Math.min(Math.max(rect.width, 360), vw - pad * 2);
+  let left = rect.left;
+  if (left + width > vw - pad) left = vw - pad - width;
+  if (left < pad) left = pad;
+
+  const base: Record<string, string> = {
+    position: 'fixed',
+    zIndex: '4000',
+    width: `${width}px`,
+    maxHeight: `${maxH}px`,
+    left: `${left}px`,
+    right: 'auto',
+  };
+  panelStyle.value = placeTop
+    ? {
+        ...base,
+        top: 'auto',
+        bottom: `${Math.max(pad, vh - rect.top + gap)}px`,
+      }
+    : {
+        ...base,
+        top: `${rect.bottom + gap}px`,
+        bottom: 'auto',
+      };
+}
+
+async function openPanel() {
+  showDropdown.value = true;
+  await nextTick();
+  updatePanelPlacement();
+}
+
 async function fetchOptions() {
   const keyword = searchKeyword.value.trim();
   if (!keyword) {
@@ -109,7 +152,7 @@ async function fetchOptions() {
     return;
   }
   loading.value = true;
-  showDropdown.value = true;
+  await openPanel();
   try {
     const res = await searchStoreOption({
       keyword,
@@ -119,8 +162,9 @@ async function fetchOptions() {
       limit: 20,
     });
     options.value = res?.items ?? [];
-    // 默认高亮第一项，Enter 可直接选中
+    highlightIndex.value = visibleOptions.value.length > 0 ? 0 : -1;
-    highlightIndex.value = options.value.length > 0 ? 0 : -1;
+    await nextTick();
+    updatePanelPlacement();
   } catch {
     options.value = [];
     highlightIndex.value = -1;
@@ -136,30 +180,36 @@ function handleInput() {
 }
 
 function handleFocus() {
-  if (visibleOptions.value.length > 0) {
+  if (searchKeyword.value.trim() && options.value.length > 0) {
-    showDropdown.value = true;
+    openPanel();
-    if (highlightIndex.value < 0) {
+    if (highlightIndex.value < 0 && visibleOptions.value.length > 0) {
       highlightIndex.value = 0;
     }
   }
 }
 
 /**
- * 选中一项：追加到 value，缓存名称，清空输入继续搜
+ * 多选：追加 ID，保留关键词与面板，不关闭气泡
  */
 function selectOption(item: StoreSearchItem) {
   if (selectedIds.value.includes(item.id)) return;
   selectedMap.value = { ...selectedMap.value, [item.id]: item };
   mValue.value = [...selectedIds.value, item.id];
-  searchKeyword.value = '';
+  // 高亮下一项（列表已剔除刚选的）
-  options.value = [];
+  nextTick(() => {
-  showDropdown.value = false;
+    if (visibleOptions.value.length === 0) {
-  highlightIndex.value = -1;
+      highlightIndex.value = -1;
+      return;
+    }
+    highlightIndex.value = Math.min(
+      Math.max(highlightIndex.value, 0),
+      visibleOptions.value.length - 1,
+    );
+    updatePanelPlacement();
+    scrollHighlightIntoView();
+  });
 }
 
-/**
- * 取消某个已选门店
- */
 function removeSelected(id: number) {
   mValue.value = selectedIds.value.filter((x) => x !== id);
   const next = { ...selectedMap.value };
@@ -167,19 +217,52 @@ function removeSelected(id: number) {
   selectedMap.value = next;
 }
 
+function closePanel() {
+  showDropdown.value = false;
+  highlightIndex.value = -1;
+}
+
+/** 仅改 list 的 scrollTop，表头固定不动 */
+function scrollHighlightIntoView() {
+  nextTick(() => {
+    const listEl = listRef.value;
+    if (!listEl || highlightIndex.value < 0) return;
+    const el = listEl.querySelector(
+      `[data-store-opt-index="${highlightIndex.value}"]`,
+    ) as HTMLElement | null;
+    if (!el) return;
+    const listRect = listEl.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const deltaTop = elRect.top - listRect.top;
+    const deltaBottom = elRect.bottom - listRect.bottom;
+    if (deltaTop < 0) {
+      listEl.scrollTop += deltaTop;
+    } else if (deltaBottom > 0) {
+      listEl.scrollTop += deltaBottom;
+    }
+  });
+}
+
 function handleKeydown(e: KeyboardEvent) {
-  if (!showDropdown.value || visibleOptions.value.length === 0) return;
+  if (!showDropdown.value || visibleOptions.value.length === 0) {
+    if (e.key === 'Escape') closePanel();
+    return;
+  }
+  const len = visibleOptions.value.length;
   switch (e.key) {
     case 'ArrowDown':
       e.preventDefault();
-      highlightIndex.value = Math.min(
+      // 头尾循环：最后一项再按下 → 回到第一项
-        Math.max(highlightIndex.value, 0) + 1,
+      highlightIndex.value =
-        visibleOptions.value.length - 1,
+        highlightIndex.value < 0 ? 0 : (highlightIndex.value + 1) % len;
-      );
+      scrollHighlightIntoView();
       break;
     case 'ArrowUp':
       e.preventDefault();
-      highlightIndex.value = Math.max(highlightIndex.value - 1, 0);
+      // 头尾循环：第一项再按上 → 跳到最后一项
+      highlightIndex.value =
+        highlightIndex.value <= 0 ? len - 1 : highlightIndex.value - 1;
+      scrollHighlightIntoView();
       break;
     case 'Enter':
       e.preventDefault();
@@ -190,35 +273,42 @@ function handleKeydown(e: KeyboardEvent) {
       }
       break;
     case 'Escape':
-      showDropdown.value = false;
+      e.preventDefault();
-      highlightIndex.value = -1;
+      closePanel();
       break;
   }
 }
 
 function handleClickOutside(e: MouseEvent) {
-  if (containerRef.value && !containerRef.value.contains(e.target as Node)) {
+  if (!showDropdown.value) return;
-    showDropdown.value = false;
+  const t = e.target as Node;
-    highlightIndex.value = -1;
+  if (containerRef.value?.contains(t) || panelRef.value?.contains(t)) return;
-  }
+  closePanel();
+}
+
+function onWinChange() {
+  if (showDropdown.value) updatePanelPlacement();
 }
 
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
+  document.addEventListener('mousedown', handleClickOutside);
+  window.addEventListener('resize', onWinChange);
+  window.addEventListener('scroll', onWinChange, true);
   mergeInitialItems(props.initialItems || []);
 });
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener('mousedown', handleClickOutside);
+  window.removeEventListener('resize', onWinChange);
+  window.removeEventListener('scroll', onWinChange, true);
 });
 
 watch(
   () => props.storeType,
   () => {
     options.value = [];
-    showDropdown.value = false;
+    closePanel();
     searchKeyword.value = '';
-    highlightIndex.value = -1;
   },
 );
 
@@ -227,6 +317,17 @@ watch(
   (items) => mergeInitialItems(items || []),
   { deep: true },
 );
+
+watch(visibleOptions, (list) => {
+  if (!showDropdown.value) return;
+  if (list.length === 0) {
+    highlightIndex.value = -1;
+    return;
+  }
+  if (highlightIndex.value >= list.length) {
+    highlightIndex.value = list.length - 1;
+  }
+});
 </script>
 
 <template>
@@ -246,33 +347,50 @@ watch(
       </template>
     </Input>
 
-    <!-- 气泡建议列表 -->
+    <Teleport to="body">
-    <div v-if="showDropdown" class="store-multi-search__dropdown">
+      <div
-      <Spin :spinning="loading">
+        v-if="showDropdown"
-        <Empty
+        ref="panelRef"
-          v-if="!loading && visibleOptions.length === 0"
+        class="store-multi-search__panel"
-          :image="Empty.PRESENTED_IMAGE_SIMPLE"
+        :style="panelStyle"
-          description="暂无匹配门店"
+      >
-          class="py-3"
+        <div class="store-multi-search__hint">
-        />
+          <span>↑↓ 循环切换 · Enter 选用 · Esc 关闭 · 可连续多选</span>
-        <div
+          <span class="store-multi-search__count">
-          v-for="(item, index) in visibleOptions"
+            剩 {{ visibleOptions.length }} 条可选
-          :key="item.id"
+          </span>
-          class="store-multi-search__option"
-          :class="{ 'is-active': index === highlightIndex }"
-          @mousedown.prevent="selectOption(item)"
-        >
-          <div class="store-multi-search__option-name">
-            {{ item.name }}【{{ item.id }}】
-          </div>
-          <div v-if="item.shouzimu" class="store-multi-search__option-sub">
-            首拼：{{ item.shouzimu }}
-          </div>
         </div>
-      </Spin>
+        <div class="store-multi-search__body">
-    </div>
+          <Spin :spinning="loading">
+            <Empty
+              v-if="!loading && visibleOptions.length === 0"
+              :image="Empty.PRESENTED_IMAGE_SIMPLE"
+              description="暂无匹配门店（或已全部选中）"
+              class="py-3"
+            />
+            <div ref="listRef" class="store-multi-search__list">
+              <button
+                v-for="(item, index) in visibleOptions"
+                :key="item.id"
+                type="button"
+                class="store-multi-search__option"
+                :class="{ 'is-active': index === highlightIndex }"
+                :data-store-opt-index="index"
+                @mousedown.prevent="selectOption(item)"
+              >
+                <div class="store-multi-search__option-name">
+                  {{ item.name }}【{{ item.id }}】
+                </div>
+                <div v-if="item.shouzimu" class="store-multi-search__option-sub">
+                  首拼：{{ item.shouzimu }}
+                </div>
+              </button>
+            </div>
+          </Spin>
+        </div>
+      </div>
+    </Teleport>
 
-    <!-- 已选 Tag -->
     <div v-if="selectedItems.length > 0" class="store-multi-search__tags">
       <Tag
         v-for="item in selectedItems"
@@ -288,40 +406,93 @@ watch(
 </template>
 
 <style scoped lang="scss">
-/* 只用框架主题变量，随亮暗/主题色自动适配 */
 .store-multi-search {
   position: relative;
   width: 100%;
 }
 
-.store-multi-search__dropdown {
+.store-multi-search__tags {
-  position: absolute;
+  display: flex;
-  z-index: 1050;
+  flex-wrap: wrap;
-  top: calc(100% + 4px);
+  gap: 6px;
-  left: 0;
+  margin-top: 8px;
-  right: 0;
+}
-  max-height: 280px;
+</style>
-  overflow-y: auto;
+
-  padding: 6px;
+<style lang="scss">
-  border-radius: 8px;
+/* Teleport 到 body，非 scoped，避免气泡被裁切/丢样式 */
-  background: hsl(var(--card));
+.store-multi-search__panel {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  background: hsl(var(--card, var(--background)));
   border: 1px solid hsl(var(--border));
   box-shadow:
-    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 8px 24px hsl(0 0% 0% / 0.12),
-    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 2px 8px hsl(0 0% 0% / 0.06);
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+.store-multi-search__hint {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.35);
+}
+
+.store-multi-search__count {
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 表头固定，仅 body/list 滚动 */
+.store-multi-search__body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.store-multi-search__body .ant-spin-nested-loading,
+.store-multi-search__body .ant-spin-container {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.store-multi-search__list {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 6px;
 }
 
 .store-multi-search__option {
+  display: block;
+  width: 100%;
+  text-align: left;
   padding: 8px 10px;
+  border: 0;
   border-radius: 6px;
   cursor: pointer;
+  background: transparent;
   transition: background 0.15s;
+}
 
-  &:hover,
+.store-multi-search__option:hover,
-  &.is-active {
+.store-multi-search__option.is-active {
-    background: hsl(var(--accent-hover));
+  background: hsl(var(--accent) / 0.85);
-  }
 }
 
 .store-multi-search__option-name {
@@ -336,11 +507,4 @@ watch(
   font-size: 12px;
   color: hsl(var(--muted-foreground));
 }
-
-.store-multi-search__tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 8px;
-}
 </style>

apps/web-antd/src/components/form/components/upload-dragger-paste.vue

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+/**
+ * 通用拖拽 + 粘贴上传：Dragger 点击/拖拽，下方外侧「开始监听粘贴」
+ * v-model 为已上传 URL 字符串数组；列表支持图片/PDF 预览（blob，避免直接下载）
+ */
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+
+import { preferences } from '@vben/preferences';
+import { Button, Image, Modal, Upload, message } from 'ant-design-vue';
+import type { UploadFile } from 'ant-design-vue';
+
+import { Icon } from '#/components/icon';
+import { uploadFile } from '#/api/core/upload';
+import { uploadToOss } from '#/utils/oss-upload';
+import {
+  matchAccept,
+  usePasteUploadListen,
+} from '#/utils/use-paste-upload-listen';
+
+defineOptions({ name: 'UploadDraggerPaste' });
+
+interface FileItem {
+  uid: string;
+  name: string;
+  status: 'uploading' | 'done' | 'error';
+  url: string;
+}
+
+interface Props {
+  modelValue?: string[];
+  accept?: string;
+  multiple?: boolean;
+  maxCount?: number;
+  /** 单文件最大 MB */
+  maxSizeMb?: number;
+  tip?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  accept: '.jpg,.jpeg,.png,.gif,.webp,.pdf,image/*,application/pdf',
+  multiple: true,
+  maxCount: 9,
+  maxSizeMb: 20,
+  tip: '点击或拖拽文件到此处上传',
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+}>();
+
+const UploadDragger = Upload.Dragger;
+const fileList = ref<FileItem[]>([]);
+const uploading = ref(false);
+
+/** 文件预览弹窗状态 */
+const previewVisible = ref(false);
+const previewTitle = ref('');
+const previewIsImage = ref(false);
+const previewImageUrl = ref('');
+const previewPdfUrl = ref('');
+const previewLoading = ref(false);
+
+const maxBytes = computed(() => props.maxSizeMb * 1024 * 1024);
+
+function syncFromValue(urls: string[]) {
+  fileList.value = (urls || []).map((url) => ({
+    uid: url,
+    name: url.split('/').pop() || 'file',
+    status: 'done' as const,
+    url,
+  }));
+}
+
+syncFromValue(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    const current = fileList.value
+      .filter((f) => f.status === 'done')
+      .map((f) => f.url);
+    if (JSON.stringify(val || []) !== JSON.stringify(current)) {
+      syncFromValue(val || []);
+    }
+  },
+  { deep: true },
+);
+
+function emitUrls() {
+  const urls = fileList.value
+    .filter((f) => f.status === 'done' && f.url)
+    .map((f) => f.url);
+  emit('update:modelValue', urls);
+}
+
+function isImageUrl(url: string) {
+  return /\.(jpg|jpeg|png|gif|webp|bmp)(\?|$)/i.test(url || '');
+}
+
+function revokePdfBlob() {
+  if (previewPdfUrl.value && previewPdfUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(previewPdfUrl.value);
+  }
+  previewPdfUrl.value = '';
+}
+
+/**
+ * 预览已上传文件：图片用 Image；PDF fetch 成 blob 后 iframe，避免 OSS 直接下载
+ */
+async function previewItem(item: FileItem) {
+  if (!item.url) return;
+  revokePdfBlob();
+  previewTitle.value = item.name || '预览';
+  if (isImageUrl(item.url)) {
+    previewIsImage.value = true;
+    previewImageUrl.value = item.url;
+    previewVisible.value = true;
+    return;
+  }
+  previewIsImage.value = false;
+  previewLoading.value = true;
+  previewVisible.value = true;
+  try {
+    const resp = await fetch(item.url);
+    if (!resp.ok) throw new Error('加载失败');
+    const blob = await resp.blob();
+    const pdfBlob =
+      blob.type && blob.type !== 'application/octet-stream'
+        ? blob
+        : new Blob([blob], { type: 'application/pdf' });
+    previewPdfUrl.value = URL.createObjectURL(pdfBlob);
+  } catch {
+    message.error('预览失败');
+    previewVisible.value = false;
+  } finally {
+    previewLoading.value = false;
+  }
+}
+
+function onPreviewClose() {
+  previewVisible.value = false;
+  revokePdfBlob();
+  previewImageUrl.value = '';
+}
+
+/**
+ * 上传单个文件并写入列表
+ */
+async function uploadOneFile(file: File) {
+  if (props.disabled) return;
+  const doneCount = fileList.value.filter((f) => f.status === 'done').length;
+  if (doneCount >= props.maxCount) {
+    message.warning(`最多上传 ${props.maxCount} 个文件`);
+    return;
+  }
+  if (!matchAccept(file, props.accept)) {
+    message.warning('文件类型不符合要求');
+    return;
+  }
+  if (file.size > maxBytes.value) {
+    message.warning(`文件不能超过 ${props.maxSizeMb}MB`);
+    return;
+  }
+
+  const uid = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  fileList.value = [
+    ...fileList.value,
+    { uid, name: file.name, status: 'uploading', url: '' },
+  ];
+  uploading.value = true;
+  try {
+    const uploadMethod = preferences.app.uploadMethod || 'direct';
+    const res =
+      uploadMethod === 'direct'
+        ? await uploadToOss({ file })
+        : await uploadFile({ file });
+    const url = res?.url || '';
+    if (!url) throw new Error('上传失败');
+    fileList.value = fileList.value.map((item) =>
+      item.uid === uid ? { ...item, status: 'done' as const, url } : item,
+    );
+    emitUrls();
+  } catch (e: any) {
+    fileList.value = fileList.value.filter((item) => item.uid !== uid);
+    message.error(e?.message || '上传失败');
+  } finally {
+    uploading.value = false;
+  }
+}
+
+/** Ant Design Upload customRequest */
+const customRequest = async (options: any) => {
+  const { file, onSuccess, onError } = options;
+  try {
+    await uploadOneFile(file as File);
+    onSuccess?.({});
+  } catch (e) {
+    onError?.(e);
+  }
+};
+
+function beforeUpload(file: File) {
+  if (props.disabled) return Upload.LIST_IGNORE;
+  const doneCount = fileList.value.filter((f) => f.status === 'done').length;
+  if (doneCount >= props.maxCount) {
+    message.warning(`最多上传 ${props.maxCount} 个文件`);
+    return Upload.LIST_IGNORE;
+  }
+  if (!matchAccept(file, props.accept)) {
+    message.warning('文件类型不符合要求');
+    return Upload.LIST_IGNORE;
+  }
+  if (file.size > maxBytes.value) {
+    message.warning(`文件不能超过 ${props.maxSizeMb}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  return true;
+}
+
+function handleRemove(file: UploadFile) {
+  fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
+  emitUrls();
+  return true;
+}
+
+const {
+  listening: pasteListening,
+  toggle: togglePaste,
+} = usePasteUploadListen({
+  get accept() {
+    return props.accept;
+  },
+  get maxSize() {
+    return maxBytes.value;
+  },
+  onFiles: async (files) => {
+    for (const file of files) {
+      const doneCount = fileList.value.filter((f) => f.status === 'done').length;
+      if (doneCount >= props.maxCount) {
+        message.warning(`最多上传 ${props.maxCount} 个文件`);
+        break;
+      }
+      await uploadOneFile(file);
+    }
+  },
+});
+
+function onTogglePaste() {
+  if (props.disabled) return;
+  togglePaste();
+  if (pasteListening.value) {
+    message.success('已开启粘贴监听，可 Ctrl+V 粘贴文件/截图');
+  } else {
+    message.info('已停止粘贴监听');
+  }
+}
+
+const showDragger = computed(() => {
+  if (!props.multiple) {
+    return fileList.value.filter((f) => f.status === 'done').length === 0;
+  }
+  return fileList.value.filter((f) => f.status === 'done').length < props.maxCount;
+});
+
+onBeforeUnmount(() => {
+  revokePdfBlob();
+});
+</script>
+
+<template>
+  <div class="upload-dragger-paste">
+    <UploadDragger
+      v-if="showDragger"
+      :file-list="[]"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled || uploading"
+      :before-upload="beforeUpload"
+      :custom-request="customRequest"
+      :show-upload-list="false"
+      :max-count="maxCount"
+    >
+      <p class="ant-upload-drag-icon">
+        <Icon icon="ant-design:inbox-outlined" class="text-4xl text-blue-500" />
+      </p>
+      <p class="ant-upload-text">{{ tip }}</p>
+      <p class="ant-upload-hint text-muted-foreground">
+        支持拖拽或点击选择，单文件不超过 {{ maxSizeMb }}MB
+      </p>
+    </UploadDragger>
+
+    <div v-if="fileList.length" class="mt-3 space-y-2">
+      <div
+        v-for="item in fileList"
+        :key="item.uid"
+        class="flex items-center gap-2 rounded border border-border bg-muted/20 px-3 py-2 text-sm text-foreground"
+      >
+        <Icon
+          :icon="
+            item.status === 'uploading'
+              ? 'ant-design:loading-outlined'
+              : item.status === 'error'
+                ? 'ant-design:close-circle-outlined'
+                : 'ant-design:paper-clip-outlined'
+          "
+          class="shrink-0"
+        />
+        <button
+          v-if="item.url"
+          type="button"
+          class="min-w-0 flex-1 truncate text-left text-primary"
+          @click="previewItem(item)"
+        >
+          {{ item.name }}
+        </button>
+        <span v-else class="min-w-0 flex-1 truncate text-muted-foreground">{{ item.name }}</span>
+        <Button
+          type="link"
+          size="small"
+          danger
+          :disabled="disabled"
+          @click="handleRemove(item as any)"
+        >
+          删除
+        </Button>
+      </div>
+    </div>
+
+    <!-- 粘贴监听按钮放在拖拽区域下方外侧 -->
+    <div class="mt-3">
+      <Button
+        :type="pasteListening ? 'primary' : 'default'"
+        :danger="pasteListening"
+        :disabled="disabled"
+        @click="onTogglePaste"
+      >
+        <Icon
+          :icon="pasteListening ? 'ant-design:stop-outlined' : 'ant-design:snippets-outlined'"
+          class="mr-1"
+        />
+        {{ pasteListening ? '停止监听粘贴' : '开始监听粘贴' }}
+      </Button>
+      <span v-if="pasteListening" class="ml-2 text-xs text-orange-500 dark:text-orange-400">
+        监听中：请将文件或截图 Ctrl+V 粘贴
+      </span>
+    </div>
+
+    <Modal
+      :open="previewVisible"
+      :title="previewTitle"
+      :footer="null"
+      width="80%"
+      destroy-on-close
+      @cancel="onPreviewClose"
+    >
+      <div v-if="previewLoading" class="py-16 text-center text-muted-foreground">加载中…</div>
+      <div v-else-if="previewIsImage" class="flex justify-center rounded border border-border bg-muted/25 p-2">
+        <Image :src="previewImageUrl" :preview="true" style="max-height: 70vh" />
+      </div>
+      <iframe
+        v-else-if="previewPdfUrl"
+        :src="previewPdfUrl"
+        class="h-[70vh] w-full rounded border border-border bg-background"
+        title="文件预览"
+      />
+    </Modal>
+  </div>
+</template>

apps/web-antd/src/components/form/components/upload-image-sortable.vue

@@ -24,12 +24,18 @@ interface Props {
   modelValue: string[];
   multiple?: boolean;
   maxCount?: number;
+  /**
+   * 素材库可选类型（透传 GalleryPickLink）
+   * xk_file.type：0=图片 1=视频；默认仅图片。不传会展示全部类型
+   */
+  acceptTypes?: number[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => [],
   multiple: true,
   maxCount: 9,
+  acceptTypes: () => [0],
 });
 
 const emit = defineEmits<{
@@ -345,6 +351,7 @@ onMounted(() => {
       v-if="showUploadButton"
       :multiple="multiple"
       :max-count="galleryRemainCount"
+      :accept-types="acceptTypes"
       @select="onGallerySelect"
     />
 

apps/web-antd/src/components/form/components/upload-image.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+/**
+ * 多图上传（picture-card）+ 下方「开始监听粘贴」支持截图/图片粘贴
+ */
 import { computed, ref, watch } from 'vue';
-import { Modal, Upload } from 'ant-design-vue';
+import { Button, Modal, Upload, message } from 'ant-design-vue';
 import type { UploadFile } from 'ant-design-vue';
 
 import GalleryPickLink from '#/components/form/components/gallery-pick-link.vue';
@@ -10,9 +13,12 @@ import {
   beforeImageUpload,
   resolveUploadFile,
 } from '#/utils/use-image-upload-pending';
+import { usePasteUploadListen } from '#/utils/use-paste-upload-listen';
 import { preferences } from '@vben/preferences';
 import { Icon } from '#/components/icon';
 
+defineOptions({ name: 'UploadImage' });
+
 interface FileItem {
   uid: string;
   name: string;
@@ -24,18 +30,26 @@ interface Props {
   modelValue: string[];
   multiple?: boolean;
   maxCount?: number;
+  /**
+   * 素材库可选类型（透传 GalleryPickLink）
+   * xk_file.type：0=图片 1=视频，默认仅图片
+   */
+  acceptTypes?: number[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => [],
   multiple: true,
   maxCount: 9,
+  acceptTypes: () => [0],
 });
 
 const emit = defineEmits<{
   'update:modelValue': [value: string[]];
 }>();
 
+const IMAGE_ACCEPT = 'image/*,.jpg,.jpeg,.png,.gif,.webp,.bmp';
+
 const fileList = ref<FileItem[]>([]);
 
 const initFileList = () => {
@@ -74,6 +88,41 @@ const updateModelValue = () => {
   emit('update:modelValue', urls);
 };
 
+/**
+ * 上传单个图片文件（点击上传与粘贴共用）
+ */
+async function uploadOneImage(file: File) {
+  const remain = props.maxCount - fileList.value.filter((f) => f.status === 'done').length;
+  if (remain <= 0) {
+    message.warning(`最多上传 ${props.maxCount} 张图片`);
+    return;
+  }
+  const actualFile = resolveUploadFile(file);
+  const uid = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  const uploadingFile: FileItem = {
+    uid,
+    name: actualFile.name || file.name || 'paste.png',
+    status: 'uploading',
+    url: '',
+  };
+  fileList.value = [...fileList.value, uploadingFile];
+  try {
+    const uploadMethod = preferences.app.uploadMethod || 'direct';
+    const res =
+      uploadMethod === 'direct'
+        ? await uploadToOss({ file: actualFile })
+        : await uploadFile({ file: actualFile });
+    fileList.value = fileList.value.map((item) =>
+      item.uid === uid ? { ...item, status: 'done' as const, url: res.url } : item,
+    );
+    updateModelValue();
+  } catch (error) {
+    console.error('上传失败', error);
+    fileList.value = fileList.value.filter((item) => item.uid !== uid);
+    message.error('上传失败');
+  }
+}
+
 const customRequest = async (options: any) => {
   const { file, onProgress, onSuccess, onError } = options;
   const actualFile = resolveUploadFile(file as File);
@@ -155,6 +204,30 @@ const showUploadButton = computed(() =>
 );
 
 const galleryRemainCount = computed(() => Math.max(props.maxCount - fileList.value.length, 0));
+
+const { listening: pasteListening, toggle: togglePaste } = usePasteUploadListen({
+  accept: IMAGE_ACCEPT,
+  maxSize: 20 * 1024 * 1024,
+  onFiles: async (files) => {
+    for (const file of files) {
+      const doneCount = fileList.value.filter((f) => f.status === 'done').length;
+      if (doneCount >= props.maxCount) {
+        message.warning(`最多上传 ${props.maxCount} 张图片`);
+        break;
+      }
+      await uploadOneImage(file);
+    }
+  },
+});
+
+function onTogglePaste() {
+  togglePaste();
+  if (pasteListening.value) {
+    message.success('已开启粘贴监听，可 Ctrl+V 粘贴图片/截图');
+  } else {
+    message.info('已停止粘贴监听');
+  }
+}
 </script>
 
 <template>
@@ -184,9 +257,29 @@ const galleryRemainCount = computed(() => Math.max(props.maxCount - fileList.val
       v-if="showUploadButton"
       :multiple="multiple"
       :max-count="galleryRemainCount"
+      :accept-types="acceptTypes"
       @select="onGallerySelect"
     />
 
+    <!-- 粘贴监听放在上传区下方外侧 -->
+    <div class="mt-2">
+      <Button
+        size="small"
+        :type="pasteListening ? 'primary' : 'default'"
+        :danger="pasteListening"
+        @click="onTogglePaste"
+      >
+        <Icon
+          :icon="pasteListening ? 'ant-design:stop-outlined' : 'ant-design:snippets-outlined'"
+          class="mr-1"
+        />
+        {{ pasteListening ? '停止监听粘贴' : '开始监听粘贴' }}
+      </Button>
+      <span v-if="pasteListening" class="ml-2 text-xs text-orange-500">
+        监听中：Ctrl+V 粘贴图片
+      </span>
+    </div>
+
     <Modal v-model:visible="previewVisible" :title="previewTitle" footer="" width="60%">
       <img alt="预览图片" style="width: 100%" :src="previewImage" />
     </Modal>

apps/web-antd/src/components/form/components/upload-oss-file.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
+/**
+ * OSS 文件上传（单文件 URL 字符串）
+ * 可选：从素材库选择（acceptTypes 过滤，如文件=6、语音=3）
+ */
 import { computed, ref, watch } from 'vue';
 
 import { preferences } from '@vben/preferences';
 import { Button, Upload } from 'ant-design-vue';
+
+import GalleryPickLink from '#/components/form/components/gallery-pick-link.vue';
 import { Icon } from '#/components/icon';
 import { uploadFile } from '#/api/core/upload';
 import { uploadToOss } from '#/utils/oss-upload';
@@ -17,11 +23,17 @@ interface FileItem {
 interface Props {
   modelValue?: string;
   maxCount?: number;
+  /** 素材库类型过滤，如 [6] 文件、[3] 语音 */
+  acceptTypes?: number[];
+  /** input accept，如 .pdf,.doc 或 audio/* */
+  accept?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
   maxCount: 1,
+  acceptTypes: () => [6],
+  accept: '.pdf,.doc,.docx,.zip,.rar,.txt,application/pdf,audio/*,*/*',
 });
 
 const emit = defineEmits<{
@@ -131,26 +143,50 @@ function handleRemove() {
   return true;
 }
 
+function onGallerySelect(urls: string[]) {
+  const url = urls[0] || '';
+  if (!url) return;
+  syncFileListFromValue(url);
+  updateModelValue();
+}
+
 const showUploadButton = computed(
   () => fileList.value.filter((item) => item.status !== 'error').length === 0,
 );
 </script>
 
 <template>
-  <Upload
+  <div class="upload-oss-file-wrap">
-    :file-list="fileList"
+    <Upload
-    :before-upload="beforeUpload"
+      :file-list="fileList"
-    :custom-request="customRequest"
+      :before-upload="beforeUpload"
-    :max-count="maxCount"
+      :custom-request="customRequest"
-    list-type="text"
+      :max-count="maxCount"
-    accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,image/*,application/pdf"
+      list-type="text"
-    @remove="handleRemove"
+      :accept="accept"
-  >
+      @remove="handleRemove"
-    <Button v-if="showUploadButton">
+    >
-      上传文件
+      <Button v-if="showUploadButton">
-      <template #icon>
+        上传文件
-        <Icon icon="ant-design:cloud-upload-outlined" />
+        <template #icon>
-      </template>
+          <Icon icon="ant-design:cloud-upload-outlined" />
-    </Button>
+        </template>
-  </Upload>
+      </Button>
+    </Upload>
+    <GalleryPickLink
+      v-if="showUploadButton"
+      :max-count="1"
+      :accept-types="acceptTypes"
+      @select="onGallerySelect"
+    />
+  </div>
 </template>
+
+<style scoped>
+.upload-oss-file-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+</style>

apps/web-antd/src/components/form/components/user-tag-select.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+/**
+ * 通用 Tag 选择器（带头像）
+ *
+ * - 基于 antd Select，multiple 模式默认开启，单选传 multiple=false
+ * - 已选项以 Tag 形式展示头像+名字：
+ *   - 有 avatar 用图片头像
+ *   - 无 avatar 用文本头像（取 label 首字符）
+ * - 下拉选项同样展示头像+名字
+ * - 选项数据：options: { value, label, avatar? }[]
+ */
+import { computed } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Avatar, Select, Tag } from 'ant-design-vue';
+
+defineOptions({
+  name: 'UserTagSelect',
+  inheritAttrs: false,
+});
+
+/** 单个选项结构 */
+export interface UserTagOption {
+  value: string | number;
+  label: string;
+  avatar?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 已选值数组（多选）或单值（单选时仍用数组包装） */
+    modelValue?: (string | number)[];
+    /** 选项列表 */
+    options: UserTagOption[];
+    /** 是否多选，默认 true */
+    multiple?: boolean;
+    /** 最大选择数，超出截断 */
+    maxCount?: number;
+    placeholder?: string;
+    allowClear?: boolean;
+    showSearch?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    modelValue: () => [],
+    multiple: true,
+    maxCount: 99,
+    placeholder: '请选择',
+    allowClear: true,
+    showSearch: true,
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [v: (string | number)[]];
+}>();
+
+// 双向绑定：useVModel 自动处理 modelValue 的读写
+const innerValue = useVModel(props, 'modelValue', emit, {
+  defaultValue: [] as (string | number)[],
+  passive: true,
+});
+
+/** 用于 Select 的 mode，单选时不传 mode */
+const selectMode = computed(() => (props.multiple ? 'multiple' : undefined));
+
+/** 按 value 索引选项，方便 tagRender/option 插槽快速查头像与名字 */
+const optionMap = computed(() => {
+  const map = new Map<string | number, UserTagOption>();
+  for (const opt of props.options) {
+    map.set(opt.value, opt);
+  }
+  return map;
+});
+
+/** 取某 value 对应的展示名 */
+function labelOf(value: string | number) {
+  return optionMap.value.get(value)?.label || String(value);
+}
+
+/** 取某 value 对应的头像 */
+function avatarOf(value: string | number) {
+  return optionMap.value.get(value)?.avatar;
+}
+
+/** 取首字符（文本头像） */
+function firstChar(label?: string) {
+  return (label || '?').trim().charAt(0) || '?';
+}
+
+/** 选项过滤：按 label 包含输入关键字 */
+function filterOption(input: string, option: any) {
+  const v = String(option?.label || '').toLowerCase();
+  return v.includes((input || '').toLowerCase());
+}
+
+/**
+ * change 处理：
+ * - 单选：把单值包成数组
+ * - 多选：超 maxCount 截断
+ */
+function onChange(v: any) {
+  if (!props.multiple) {
+    innerValue.value = v == null ? [] : [v];
+    return;
+  }
+  if (Array.isArray(v) && v.length > props.maxCount) {
+    v = v.slice(0, props.maxCount);
+  }
+  innerValue.value = v;
+}
+</script>
+
+<template>
+  <Select
+    :value="innerValue as any"
+    :mode="selectMode"
+    :options="options"
+    :placeholder="placeholder"
+    :allow-clear="allowClear"
+    :show-search="showSearch"
+    :filter-option="filterOption"
+    :disabled="disabled"
+    :max-tag-count="10"
+    option-filter-prop="label"
+    style="width: 100%"
+    @change="onChange"
+  >
+    <!-- 多选已选项展示头像+名字 -->
+    <template v-if="multiple" #tagRender="{ value, closable, onClose }">
+      <Tag :closable="closable" @close="onClose" class="user-tag-chip">
+        <Avatar :size="16" :src="avatarOf(value)">
+          {{ firstChar(labelOf(value)) }}
+        </Avatar>
+        <span class="user-tag-name">{{ labelOf(value) }}</span>
+      </Tag>
+    </template>
+
+    <!-- 下拉选项展示头像+名字 -->
+    <template #option="{ label, avatar }">
+      <div class="user-tag-option">
+        <Avatar :size="20" :src="avatar">{{ firstChar(label) }}</Avatar>
+        <span>{{ label }}</span>
+      </div>
+    </template>
+  </Select>
+</template>
+
+<style scoped>
+.user-tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+}
+
+.user-tag-name {
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-tag-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>

apps/web-antd/src/components/loading/PrescriptionLoading.vue

@@ -0,0 +1,714 @@
+<template>
+  <!--
+    AI 加载动画：处方=药丸；病历=病历本
+    type + text 由调用方传入；嵌入抽屉时默认不显示主题切换
+  -->
+  <div
+    ref="containerRef"
+    class="loading-wrapper"
+    :class="{ 'loading-wrapper--dark': isDark }"
+    :style="{ width: '100%', height: '100%' }"
+  >
+    <canvas ref="canvasRef" class="loading-canvas"></canvas>
+    <button
+      v-if="showToggle"
+      class="theme-toggle-btn"
+      :title="isDark ? '切换到亮色模式' : '切换到暗色模式'"
+      @click="toggleTheme"
+    >
+      <span class="theme-icon">
+        <svg
+          v-if="!isDark"
+          class="sun"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+        </svg>
+        <svg
+          v-else
+          class="moon"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      </span>
+<!--      <span class="theme-label">{{ isDark ? '亮色' : '暗色' }}</span>-->
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * AI 生成加载动画
+ * - type=prescription：中心画胶囊药丸
+ * - type=medical_record：中心画病历本
+ * - text：底部文案（可动态传）
+ */
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+export type AiLoadingType = 'prescription' | 'medical_record';
+
+const props = withDefaults(
+  defineProps<{
+    /** 动画类型：处方 / 病历 */
+    type?: AiLoadingType;
+    /** 底部文案 */
+    text?: string;
+    /** 是否显示主题切换（嵌入业务抽屉建议关闭） */
+    showToggle?: boolean;
+  }>(),
+  {
+    type: 'prescription',
+    text: '',
+    showToggle: false,
+  },
+);
+
+/** 未传文案时按 type 给默认值 */
+const displayText = computed(() => {
+  const t = String(props.text || '').trim();
+  if (t) return t;
+  return props.type === 'medical_record'
+    ? 'AI正在生成病历'
+    : 'AI正在生成处方';
+});
+
+const containerRef = ref<HTMLDivElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const isDark = ref(false);
+/** 画布循环里读取最新文案/类型，避免闭包过期 */
+const liveText = ref(displayText.value);
+const liveType = ref<AiLoadingType>(props.type);
+
+watch(
+  displayText,
+  (v) => {
+    liveText.value = v;
+  },
+  { immediate: true },
+);
+watch(
+  () => props.type,
+  (v) => {
+    liveType.value = v || 'prescription';
+  },
+  { immediate: true },
+);
+
+function detectAppDark(): boolean {
+  return (
+    document.documentElement.classList.contains('dark') ||
+    document.documentElement.getAttribute('data-theme') === 'dark' ||
+    document.documentElement.getAttribute('class')?.includes('dark') === true
+  );
+}
+
+function syncThemeFromApp() {
+  if (localStorage.getItem('prescription-loading-theme')) {
+    isDark.value = localStorage.getItem('prescription-loading-theme') === 'dark';
+    return;
+  }
+  isDark.value = detectAppDark();
+}
+
+function toggleTheme() {
+  isDark.value = !isDark.value;
+  localStorage.setItem(
+    'prescription-loading-theme',
+    isDark.value ? 'dark' : 'light',
+  );
+  resetParticles?.();
+}
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  life: number;
+  maxLife: number;
+  size: number;
+  color: { r: number; g: number; b: number };
+  type: 'circle' | 'cross';
+}
+
+interface ThemeColors {
+  textColor: string;
+  ringColor: string;
+  glowInner: string;
+  glowMiddle: string;
+  glowOuter: string;
+  particleBright: number;
+  iconShadow: string;
+}
+
+let animationId = 0;
+let resetParticles: (() => void) | null = null;
+let themeObserver: MutationObserver | null = null;
+let resizeObserver: ResizeObserver | null = null;
+let removeWindowResize: (() => void) | null = null;
+
+onMounted(async () => {
+  await nextTick();
+  syncThemeFromApp();
+  if (!containerRef.value || !canvasRef.value) return;
+
+  const canvas = canvasRef.value;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const container = containerRef.value;
+
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  let cssWidth = 0;
+  let cssHeight = 0;
+  let prevW = 0;
+  let prevH = 0;
+  let startTime: number | null = null;
+  let lastTime: number | null = null;
+  let particles: Particle[] = [];
+  const MAX_PARTICLES = 28;
+
+  resetParticles = () => {
+    particles = [];
+  };
+
+  function updateSize() {
+    const rect = container.getBoundingClientRect();
+    cssWidth = rect.width || 300;
+    cssHeight = rect.height || 280;
+    const pw = Math.round(cssWidth * dpr);
+    const ph = Math.round(cssHeight * dpr);
+    if (canvas.width !== pw || canvas.height !== ph) {
+      canvas.width = pw;
+      canvas.height = ph;
+      if (
+        prevW &&
+        (Math.abs(cssWidth - prevW) > 2 || Math.abs(cssHeight - prevH) > 2)
+      ) {
+        particles = [];
+      }
+      prevW = cssWidth;
+      prevH = cssHeight;
+    }
+  }
+
+  function createParticle(cx: number, cy: number, s: number): Particle {
+    const angle = Math.random() * Math.PI * 2;
+    const distance = s * (0.15 + Math.random() * 0.45);
+    const speed = s * (0.03 + Math.random() * 0.08);
+    const colors = [
+      { r: 61, g: 214, b: 208 },
+      { r: 74, g: 195, b: 190 },
+      { r: 93, g: 173, b: 226 },
+      { r: 46, g: 180, b: 170 },
+      { r: 100, g: 200, b: 215 },
+    ];
+    const color = colors[Math.floor(Math.random() * colors.length)]!;
+    return {
+      x: cx + Math.cos(angle) * distance,
+      y: cy + Math.sin(angle) * distance,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      life: 1,
+      maxLife: 1.8 + Math.random() * 2.5,
+      size: 1.2 + Math.random() * 2.8,
+      color,
+      type: Math.random() < 0.25 ? 'cross' : 'circle',
+    };
+  }
+
+  function updateParticles(dt: number, cx: number, cy: number, s: number) {
+    for (let i = particles.length - 1; i >= 0; i--) {
+      const p = particles[i]!;
+      p.life -= dt / p.maxLife;
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      p.vx *= 0.997;
+      p.vy *= 0.997;
+      if (p.life <= 0) particles.splice(i, 1);
+    }
+    while (particles.length < MAX_PARTICLES) {
+      const p = createParticle(cx, cy, s);
+      const ang = Math.random() * Math.PI * 2;
+      p.x = cx + Math.cos(ang) * s * 0.12 * Math.random();
+      p.y = cy + Math.sin(ang) * s * 0.12 * Math.random();
+      particles.push(p);
+    }
+  }
+
+  function drawParticle(
+    c: CanvasRenderingContext2D,
+    p: Particle,
+    bright: number,
+  ) {
+    const alpha = p.life;
+    const { r, g, b } = p.color;
+    const size = p.size * (0.7 + 0.3 * p.life);
+    const br = Math.min(255, Math.round(r * bright));
+    const bg = Math.min(255, Math.round(g * bright));
+    const bb = Math.min(255, Math.round(b * bright));
+    c.save();
+    c.globalAlpha = alpha;
+    if (p.type === 'cross') {
+      const len = size * 1.8;
+      const w = size * 0.55;
+      c.strokeStyle = `rgba(${br},${bg},${bb},${alpha})`;
+      c.lineWidth = w;
+      c.lineCap = 'round';
+      c.beginPath();
+      c.moveTo(p.x - len, p.y);
+      c.lineTo(p.x + len, p.y);
+      c.stroke();
+      c.beginPath();
+      c.moveTo(p.x, p.y - len);
+      c.lineTo(p.x, p.y + len);
+      c.stroke();
+      c.fillStyle = `rgba(255,255,255,${alpha * 0.9})`;
+      c.beginPath();
+      c.arc(p.x, p.y, size * 0.35, 0, Math.PI * 2);
+      c.fill();
+    } else {
+      c.shadowColor = `rgba(${br},${bg},${bb},${alpha * 0.7})`;
+      c.shadowBlur = size * 2.5;
+      c.fillStyle = `rgba(${br},${bg},${bb},${alpha})`;
+      c.beginPath();
+      c.arc(p.x, p.y, size, 0, Math.PI * 2);
+      c.fill();
+      c.shadowBlur = 0;
+      c.fillStyle = `rgba(255,255,255,${alpha * 0.6})`;
+      c.beginPath();
+      c.arc(p.x, p.y, size * 0.4, 0, Math.PI * 2);
+      c.fill();
+    }
+    c.restore();
+  }
+
+  /** 处方药丸（处方） */
+  function drawPill(
+    c: CanvasRenderingContext2D,
+    px: number,
+    py: number,
+    pw: number,
+    ph: number,
+    floatOff: number,
+    pulse: number,
+    shadowCol: string,
+  ) {
+    c.save();
+    const cx = px + pw / 2;
+    const cy = py + ph / 2;
+    const hw = (pw / 2) * pulse;
+    const hh = (ph / 2) * pulse;
+    const adjY = cy + floatOff;
+    const dx = cx - hw;
+    const dy = adjY - hh;
+    const dw = hw * 2;
+    const dh = hh * 2;
+    const rad = hh;
+    const path = new Path2D();
+    path.roundRect(dx, dy, dw, dh, rad);
+
+    c.shadowColor = shadowCol;
+    c.shadowBlur = hh * 0.7;
+    c.shadowOffsetY = hh * 0.25;
+    c.fillStyle = '#ffffff';
+    c.fill(path);
+    c.shadowColor = 'transparent';
+    c.shadowBlur = 0;
+    c.shadowOffsetY = 0;
+
+    c.save();
+    c.clip(path);
+    const leftGrad = c.createLinearGradient(dx, 0, dx + dw * 0.5, 0);
+    leftGrad.addColorStop(0, '#FDFBF7');
+    leftGrad.addColorStop(0.7, '#F5F1EA');
+    leftGrad.addColorStop(1, '#EDE8DF');
+    c.fillStyle = leftGrad;
+    c.fillRect(dx, dy, dw * 0.5, dh);
+
+    const rightGrad = c.createLinearGradient(dx + dw * 0.5, 0, dx + dw, 0);
+    rightGrad.addColorStop(0, '#5DD9D1');
+    rightGrad.addColorStop(0.5, '#3DD6D0');
+    rightGrad.addColorStop(1, '#2CB8B0');
+    c.fillStyle = rightGrad;
+    c.fillRect(dx + dw * 0.5, dy, dw * 0.5, dh);
+
+    c.strokeStyle = 'rgba(180,180,180,0.5)';
+    c.lineWidth = Math.max(0.6, hh * 0.06);
+    c.beginPath();
+    c.moveTo(dx + dw * 0.5, dy + 1);
+    c.lineTo(dx + dw * 0.5, dy + dh - 1);
+    c.stroke();
+
+    const hy = dy + dh * 0.15;
+    const hh2 = dh * 0.38;
+    const hp = new Path2D();
+    hp.roundRect(dx + dw * 0.06, hy, dw * 0.88, hh2, hh2 / 2);
+    c.fillStyle = 'rgba(255,255,255,0.45)';
+    c.fill(hp);
+    c.restore();
+
+    c.strokeStyle = 'rgba(200,200,200,0.5)';
+    c.lineWidth = Math.max(0.8, hh * 0.08);
+    c.stroke(path);
+    c.restore();
+  }
+
+  /** 病历本（病历） */
+  function drawMedicalRecord(
+    c: CanvasRenderingContext2D,
+    cx: number,
+    cy: number,
+    scale: number,
+    floatOff: number,
+    pulse: number,
+    shadowCol: string,
+  ) {
+    c.save();
+    const w = scale * 0.28 * pulse;
+    const h = scale * 0.34 * pulse;
+    const x = cx - w / 2;
+    const y = cy - h / 2 + floatOff;
+    const r = Math.max(4, scale * 0.018);
+    const path = new Path2D();
+    path.roundRect(x, y, w, h, r);
+
+    c.shadowColor = shadowCol;
+    c.shadowBlur = scale * 0.035;
+    c.shadowOffsetY = scale * 0.012;
+    c.fillStyle = '#ffffff';
+    c.fill(path);
+    c.shadowColor = 'transparent';
+    c.shadowBlur = 0;
+    c.shadowOffsetY = 0;
+
+    // 左侧装订条
+    c.fillStyle = '#3DD6D0';
+    c.fillRect(x, y + r * 0.2, w * 0.12, h - r * 0.4);
+
+    // 横线（像病历行）
+    c.strokeStyle = 'rgba(61,214,208,0.35)';
+    c.lineWidth = Math.max(1, scale * 0.004);
+    for (let i = 0; i < 4; i++) {
+      const ly = y + h * (0.32 + i * 0.14);
+      c.beginPath();
+      c.moveTo(x + w * 0.22, ly);
+      c.lineTo(x + w * 0.88, ly);
+      c.stroke();
+    }
+    // 顶部标题条
+    c.fillStyle = 'rgba(61,214,208,0.2)';
+    c.beginPath();
+    c.roundRect(x + w * 0.22, y + h * 0.12, w * 0.5, h * 0.08, 2);
+    c.fill();
+
+    c.strokeStyle = 'rgba(180,200,200,0.55)';
+    c.lineWidth = Math.max(0.8, scale * 0.005);
+    c.stroke(path);
+    c.restore();
+  }
+
+  function drawCross(
+    c: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    size: number,
+    alpha: number,
+    rot: number,
+  ) {
+    c.save();
+    c.translate(x, y);
+    c.rotate(rot);
+    c.globalAlpha = alpha;
+    const len = size;
+    const w = size * 0.3;
+    c.strokeStyle = '#3DD6D0';
+    c.lineWidth = w;
+    c.lineCap = 'round';
+    c.beginPath();
+    c.moveTo(-len, 0);
+    c.lineTo(len, 0);
+    c.stroke();
+    c.beginPath();
+    c.moveTo(0, -len);
+    c.lineTo(0, len);
+    c.stroke();
+    c.fillStyle = '#ffffff';
+    c.beginPath();
+    c.arc(0, 0, size * 0.25, 0, Math.PI * 2);
+    c.fill();
+    c.restore();
+  }
+
+  function getTheme(): ThemeColors {
+    const dark = isDark.value;
+    return {
+      textColor: dark ? '#d1d5db' : '#4a5568',
+      ringColor: dark ? 'rgba(255,255,255,0.25)' : 'rgba(180,195,200,0.45)',
+      glowInner: dark ? 'rgba(61,214,208,0.15)' : 'rgba(61,214,208,0.13)',
+      glowMiddle: dark ? 'rgba(61,214,208,0.05)' : 'rgba(61,214,208,0.04)',
+      glowOuter: 'rgba(61,214,208,0)',
+      particleBright: dark ? 1.4 : 1.0,
+      iconShadow: dark ? 'rgba(0,0,0,0.4)' : 'rgba(0,0,0,0.12)',
+    };
+  }
+
+  function draw(timestamp: number) {
+    updateSize();
+    if (cssWidth <= 0 || cssHeight <= 0) {
+      animationId = requestAnimationFrame(draw);
+      return;
+    }
+    if (startTime === null) {
+      startTime = timestamp;
+      lastTime = timestamp;
+    }
+    const elapsed = (timestamp - startTime) / 1000;
+    let dt = (timestamp - (lastTime ?? timestamp)) / 1000;
+    if (dt <= 0) dt = 0.016;
+    if (dt > 0.2) dt = 0.2;
+    lastTime = timestamp;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.save();
+    ctx.scale(dpr, dpr);
+
+    const cx = cssWidth / 2;
+    const cy = cssHeight / 2 - cssHeight * 0.04;
+    const scale = Math.min(cssWidth, cssHeight);
+    const orbitR = scale * 0.26;
+    const fontSize = Math.max(12, scale * 0.055);
+    const textY = cy + orbitR + fontSize * 2.4;
+    const text = liveText.value;
+    const animType = liveType.value;
+
+    const dashOff = elapsed * scale * 0.025;
+    const arcRot = elapsed * 3.5;
+    const arcLen = (100 * Math.PI) / 180;
+    const floatOff = Math.sin(elapsed * 2.5) * scale * 0.025;
+    const pulseS = 1 + Math.sin(elapsed * 3.7) * 0.04;
+    const textAlpha = 0.55 + 0.45 * Math.sin(elapsed * 1.6);
+    const theme = getTheme();
+
+    const grad = ctx.createRadialGradient(
+      cx,
+      cy,
+      orbitR * 0.15,
+      cx,
+      cy,
+      orbitR * 1.6,
+    );
+    grad.addColorStop(0, theme.glowInner);
+    grad.addColorStop(0.5, theme.glowMiddle);
+    grad.addColorStop(1, theme.glowOuter);
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, cssWidth, cssHeight);
+
+    ctx.save();
+    ctx.setLineDash([scale * 0.018, scale * 0.04]);
+    ctx.lineDashOffset = -dashOff;
+    ctx.strokeStyle = theme.ringColor;
+    ctx.lineWidth = Math.max(1, scale * 0.006);
+    ctx.beginPath();
+    ctx.arc(cx, cy, orbitR, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+
+    const arcS = arcRot;
+    const arcE = arcRot + arcLen;
+    const fx = cx + orbitR * Math.cos(arcE);
+    const fy = cy + orbitR * Math.sin(arcE);
+    ctx.save();
+    ctx.shadowColor = 'rgba(61,214,208,0.8)';
+    ctx.shadowBlur = scale * 0.04;
+    ctx.strokeStyle = '#3DD6D0';
+    ctx.lineWidth = Math.max(2, scale * 0.014);
+    ctx.lineCap = 'round';
+    ctx.beginPath();
+    ctx.arc(cx, cy, orbitR, arcS, arcE);
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.save();
+    ctx.shadowColor = 'rgba(255,255,255,0.9)';
+    ctx.shadowBlur = scale * 0.03;
+    ctx.fillStyle = '#ffffff';
+    ctx.beginPath();
+    ctx.arc(fx, fy, Math.max(2.5, scale * 0.014), 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+
+    // 中心图标：按 type 切换
+    if (animType === 'medical_record') {
+      drawMedicalRecord(ctx, cx, cy, scale, floatOff, pulseS, theme.iconShadow);
+    } else {
+      const pillW = scale * 0.34;
+      const pillH = scale * 0.1;
+      drawPill(
+        ctx,
+        cx - pillW / 2,
+        cy - pillH / 2,
+        pillW,
+        pillH,
+        floatOff,
+        pulseS,
+        theme.iconShadow,
+      );
+    }
+
+    for (let i = 0; i < 3; i++) {
+      const ang = elapsed * 1.8 + (i * Math.PI * 2) / 3;
+      const crossOrbitR = orbitR * 1.02;
+      const rx = cx + crossOrbitR * Math.cos(ang);
+      const ry = cy + crossOrbitR * Math.sin(ang);
+      const rs = Math.max(4, scale * 0.022);
+      const ra = 0.4 + 0.35 * Math.sin(elapsed * 3.2 + i * 1.7);
+      drawCross(ctx, rx, ry, rs, ra, elapsed * 0.9 + i);
+    }
+
+    updateParticles(dt, cx, cy, scale);
+    for (const p of particles) {
+      drawParticle(ctx, p, theme.particleBright);
+    }
+
+    ctx.save();
+    ctx.globalAlpha = textAlpha;
+    ctx.fillStyle = theme.textColor;
+    ctx.font = `${fontSize}px "PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.shadowColor = 'rgba(61,214,208,0.25)';
+    ctx.shadowBlur = fontSize * 0.6;
+    ctx.fillText(text, cx, textY);
+    ctx.restore();
+
+    const charW = fontSize * 0.55;
+    const dotsStartX = cx + (text.length / 2) * charW + fontSize * 0.5;
+    const dotR = Math.max(2, fontSize * 0.16);
+    const dotSpacing = fontSize * 0.7;
+    for (let i = 0; i < 3; i++) {
+      const phase = (elapsed * 2.8 + i * 1.0) % 3;
+      let brightness = phase < 1 ? phase : phase < 2 ? 2 - phase : 0;
+      brightness = brightness * brightness * (3 - 2 * brightness);
+      const alpha = 0.2 + brightness * 0.75;
+      const dx = dotsStartX + i * dotSpacing * 2.2;
+      ctx.save();
+      ctx.shadowColor = `rgba(61,214,208,${alpha * 0.8})`;
+      ctx.shadowBlur = dotR * 3;
+      ctx.fillStyle = `rgba(61,214,208,${alpha})`;
+      ctx.beginPath();
+      ctx.arc(dx, textY, dotR, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    }
+
+    ctx.restore();
+    animationId = requestAnimationFrame(draw);
+  }
+
+  updateSize();
+  animationId = requestAnimationFrame(draw);
+
+  if (window.ResizeObserver) {
+    resizeObserver = new ResizeObserver(() => updateSize());
+    resizeObserver.observe(container);
+  } else {
+    const onResize = () => updateSize();
+    window.addEventListener('resize', onResize);
+    removeWindowResize = () => window.removeEventListener('resize', onResize);
+  }
+
+  // 跟随应用 dark class（未手动锁定主题时）
+  themeObserver = new MutationObserver(() => {
+    if (!localStorage.getItem('prescription-loading-theme')) {
+      syncThemeFromApp();
+    }
+  });
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class', 'data-theme'],
+  });
+});
+
+onUnmounted(() => {
+  cancelAnimationFrame(animationId);
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  removeWindowResize?.();
+  removeWindowResize = null;
+  themeObserver?.disconnect();
+  themeObserver = null;
+  resetParticles = null;
+});
+</script>
+
+<style scoped>
+.loading-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 220px;
+  //background: #ffffff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.loading-wrapper--dark {
+  //background: #1e2227;
+}
+.loading-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.theme-toggle-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(128, 128, 128, 0.3);
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #4a5568;
+  backdrop-filter: blur(8px);
+  transition: all 0.25s;
+}
+.loading-wrapper--dark .theme-toggle-btn {
+  background: rgba(30, 34, 39, 0.9);
+  color: #d1d5db;
+}
+.theme-toggle-btn:hover {
+  border-color: #3dd6d0;
+  transform: scale(1.03);
+}
+.theme-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+</style>

apps/web-antd/src/components/modal/DoctorQrCodePreview.vue

@@ -105,7 +105,9 @@ const downloadQRCode = async (name: string, isQr = false) => {
             {{ doctorInfo.doctor.name }} {{ doctorInfo.doctor.title.name }}
           </div>
           <div class="qrAddress">
-            <span class="addressTitle">诊所地址：</span>{{ previewAddress }}
+            <span class="addressTitle">{{
+              Number(doctorInfo?.store?.type) === 1 ? '药店地址：' : '诊所地址：'
+            }}</span>{{ previewAddress }}
           </div>
           <Image :preview="false" :src="doctorInfo.qr_code" class="mt-3" height="30" width="30" />
           <h3 class="border-l-4 border-blue-500 pl-3 text-lg font-semibold">

apps/web-antd/src/components/modal/QrCodePreview.vue

@@ -1,5 +1,9 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+/**
+ * 诊所/药店二维码预览弹窗
+ * 按门店 type（0 诊所 / 1 药店）切换「诊所|药店」文案，列表页与门店卡片共用
+ */
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -11,6 +15,13 @@ const htmlToImage = ref('');
 const url = ref('');
 const previewTitle = ref('二维码');
 const previewAddress = ref('');
+/** 门店类型：0=诊所 1=药店，未传时按诊所示 */
+const storeType = ref(0);
+
+const isPharmacy = computed(() => Number(storeType.value) === 1);
+const kindLabel = computed(() => (isPharmacy.value ? '药店' : '诊所'));
+const addressLabel = computed(() => `${kindLabel.value}地址：`);
+
 const [Modal, modalApi] = useVbenModal({
   fullscreenButton: false,
   footer: false,
@@ -28,21 +39,28 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      const { values, title, address } =
+      const { values, title, address, type, store_type } =
-        modalApi.getData<Record<string, any>>();
+        modalApi.getData<Record<string, any>>() || {};
       if (values) {
         url.value = values;
         qrCodeUrl.value = values;
         previewTitle.value = title;
         previewAddress.value = address;
+        // 兼容 type / store_type 两种传参
+        storeType.value = Number(type ?? store_type ?? 0);
+        modalApi.setState({
+          confirmText: `保存${kindLabel.value}卡片图片`,
+          cancelText: `保存${kindLabel.value}二维码图片`,
+        });
       }
     }
   },
 });
+
 /**
- * 下载二维码
+ * 下载二维码卡片或纯二维码图片
- * @param name
+ * @param name 文件名后缀
- * @param isQr
+ * @param isQr true=只截二维码区域，false=截整张卡片
  */
 const downloadQRCode = async (name: string, isQr = false) => {
   const element = isQr ? qrCodeUrl.value : htmlToImage.value;
@@ -51,25 +69,24 @@ const downloadQRCode = async (name: string, isQr = false) => {
     allowTaint: true,
     logging: false,
   }).then((canvas) => {
-    // 创建a标签下载
+    const link = document.createElement('a');
-    const link = document.createElement('a'); // 创建a标签
+    link.href = canvas.toDataURL();
-    link.href = canvas.toDataURL(); // 是canvas对象的一种方法，用于将canvas对象转换为base64位编码
+    link.setAttribute('download', `${previewTitle.value}${name}.png`);
-    link.setAttribute('download', `${previewTitle.value}${name}.png`); // 利用了a标签的download 来下载 canvas图片
+    link.style.display = 'none';
-    link.style.display = 'none'; // 将图片隐藏起来
+    document.body.append(link);
-    document.body.append(link); // 插入到其中
     link.click();
   });
 };
 </script>
 <template>
-  <Modal :title="`${previewTitle}二维码`" class="w-[50%]">
+  <Modal :title="`${previewTitle}二维码`">
     <div class="qrBox" style="text-align: center">
       <div ref="htmlToImage" class="qrModal">
         <div id="qrcode" ref="qrCodeUrl" class="qrcode">
           <div class="qrTitle">{{ previewTitle }}</div>
           <Image :preview="false" :src="url" height="30" width="30" />
           <div class="qrAddress">
-            <span class="addressTitle">诊所地址：</span>{{ previewAddress }}
+            <span class="addressTitle">{{ addressLabel }}</span>{{ previewAddress }}
           </div>
         </div>
       </div>

apps/web-antd/src/components/oa-template-card-editor/BlockLibrary.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { BlockSchema } from './types';
+
+import MIcon from '#/components/icon/icon.vue';
+
+/**
+ * 左侧组件库：渲染所有可拖拽块类型
+ * 用户从这里拖动到中间画布（SortableJS 用 pull:clone 模式，左侧库不会减少）
+ */
+defineProps<{
+  /** 所有可拖拽块定义 */
+  blocks: BlockSchema[];
+}>();
+</script>
+
+<template>
+  <div class="block-library">
+    <div class="panel-header">
+      <span class="title">组件库</span>
+      <span class="hint">拖入画布</span>
+    </div>
+    <div class="block-list">
+      <div
+        v-for="block in blocks"
+        :key="block.type"
+        class="block-item"
+        :data-block-type="block.type"
+      >
+        <MIcon v-if="block.icon" :icon="block.icon" size="16" />
+        <span class="block-label">{{ block.label }}</span>
+      </div>
+      <div v-if="blocks.length === 0" class="empty-hint">暂无可拖入组件</div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.block-library {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  height: 100%;
+  border-right: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  background: var(--ant-color-fill-quaternary, #fafbfc);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  font-size: 13px;
+
+  .title {
+    font-weight: 600;
+    color: var(--ant-color-text, #1d2129);
+  }
+
+  .hint {
+    color: var(--ant-color-text-tertiary, #86909c);
+    font-size: 11px;
+  }
+}
+
+.block-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 8px;
+}
+
+.block-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  border: 1px dashed var(--ant-color-border, #c9cdd4);
+  border-radius: 4px;
+  background: var(--ant-color-bg-container, #fff);
+  font-size: 13px;
+  color: var(--ant-color-text-secondary, #4e5969);
+  cursor: grab;
+  user-select: none;
+  transition: all 0.15s;
+
+  &:hover {
+    border-color: var(--ant-color-primary, #165dff);
+    color: var(--ant-color-primary, #165dff);
+    background: var(--ant-color-primary-bg, #f2f7ff);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  .block-label {
+    flex: 1;
+  }
+}
+
+.empty-hint {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--ant-color-text-quaternary, #c9cdd4);
+  font-size: 12px;
+}
+</style>

apps/web-antd/src/components/oa-template-card-editor/Canvas.vue

@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import type { BlockInstance, BlockSchema } from './types';
+
+import { computed } from 'vue';
+
+import MIcon from '#/components/icon/icon.vue';
+
+/**
+ * 中间画布：按 targetArrayPath 分组渲染块实例
+ * 每个分组是一个 SortableJS 接收区，可拖入、排序、删除
+ */
+const props = defineProps<{
+  /** 所有块定义（按 type 查找对应 schema） */
+  blockSchemas: BlockSchema[];
+  /** 所有块实例（已拖入画布的） */
+  instances: BlockInstance[];
+  /** 当前选中的块实例 ID（高亮显示） */
+  selectedInstanceId?: string;
+}>();
+
+const emit = defineEmits<{
+  /** 选中块实例（点击时触发） */
+  select: [instanceId: string];
+  /** 删除块实例 */
+  remove: [instanceId: string];
+}>();
+
+/**
+ * 按 targetArrayPath 分组的渲染结构
+ * 每个分组对应一个 SortableJS 接收区
+ */
+const groupedRender = computed(() => {
+  // 收集所有出现的 targetArrayPath，按 blockSchemas 顺序排序
+  const orderedPaths: string[] = [];
+  const labelMap: Record<string, { label: string; maxCount?: number }> = {};
+  for (const schema of props.blockSchemas) {
+    if (!orderedPaths.includes(schema.targetArrayPath)) {
+      orderedPaths.push(schema.targetArrayPath);
+      labelMap[schema.targetArrayPath] = {
+        label: schema.targetArrayPath,
+        maxCount: schema.maxCount,
+      };
+    }
+  }
+
+  // 把 instances 按目标路径分组
+  const grouped: Record<string, BlockInstance[]> = {};
+  for (const inst of props.instances) {
+    const schema = props.blockSchemas.find((s) => s.type === inst.type);
+    if (!schema) continue;
+    const path = schema.targetArrayPath;
+    if (!grouped[path]) grouped[path] = [];
+    grouped[path].push(inst);
+  }
+
+  return orderedPaths.map((path) => ({
+    path,
+    label: labelMap[path]?.label ?? path,
+    maxCount: labelMap[path]?.maxCount,
+    items: grouped[path] ?? [],
+  }));
+});
+
+/**
+ * 获取块实例的 schema 定义
+ */
+function getSchema(type: string): BlockSchema | undefined {
+  return props.blockSchemas.find((s) => s.type === type);
+}
+
+/**
+ * 获取块实例的简要描述（属性面板编辑的字段值预览）
+ */
+function getInstanceSummary(inst: BlockInstance): string {
+  const schema = getSchema(inst.type);
+  if (!schema) return '';
+  const firstField = schema.fields[0];
+  if (!firstField) return '';
+  // 嵌套路径取最末级
+  const path = firstField.name.split('.');
+  let value: any = inst.data;
+  for (const key of path) {
+    value = value?.[key];
+  }
+  return value ? String(value) : '（未填写）';
+}
+
+function handleClick(instanceId: string) {
+  emit('select', instanceId);
+}
+
+function handleRemove(instanceId: string) {
+  emit('remove', instanceId);
+}
+</script>
+
+<template>
+  <div class="canvas">
+    <div class="panel-header">
+      <span class="title">画布</span>
+      <span class="hint">拖入 / 排序 / 点击编辑属性</span>
+    </div>
+    <div class="canvas-body">
+      <div
+        v-for="group in groupedRender"
+        :key="group.path"
+        class="canvas-group"
+      >
+        <div class="group-header">
+          <span class="group-label">{{ group.label }}</span>
+          <span class="group-count">
+            {{ group.items.length }}{{ group.maxCount ? `/${group.maxCount}` : '' }}
+          </span>
+        </div>
+        <div
+          class="group-dropzone"
+          :data-target-array-path="group.path"
+        >
+          <div
+            v-for="inst in group.items"
+            :key="inst.id"
+            class="instance-item"
+            :class="{ selected: inst.id === selectedInstanceId }"
+            :data-instance-id="inst.id"
+            @click.stop="handleClick(inst.id)"
+          >
+            <div class="instance-info">
+              <MIcon
+                v-if="getSchema(inst.type)?.icon"
+                :icon="getSchema(inst.type)!.icon"
+                size="14"
+              />
+              <div class="instance-text">
+                <div class="instance-label">{{ getSchema(inst.type)?.label }}</div>
+                <div class="instance-summary">{{ getInstanceSummary(inst) }}</div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="instance-remove"
+              title="删除"
+              @click.stop="handleRemove(inst.id)"
+            >
+              ×
+            </button>
+          </div>
+          <div v-if="group.items.length === 0" class="empty-dropzone">
+            拖入组件
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.canvas {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  background: var(--ant-color-bg-container, #fff);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  font-size: 13px;
+
+  .title {
+    font-weight: 600;
+    color: var(--ant-color-text, #1d2129);
+  }
+
+  .hint {
+    color: var(--ant-color-text-tertiary, #86909c);
+    font-size: 11px;
+  }
+}
+
+.canvas-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.canvas-group {
+  margin-bottom: 20px;
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 12px;
+
+  .group-label {
+    color: var(--ant-color-text-secondary, #4e5969);
+    font-weight: 500;
+    font-family: 'JetBrains Mono', monospace;
+  }
+
+  .group-count {
+    color: var(--ant-color-text-tertiary, #86909c);
+  }
+}
+
+.group-dropzone {
+  min-height: 60px;
+  padding: 8px;
+  border: 2px dashed var(--ant-color-border, #d9d9d9);
+  border-radius: 6px;
+  background: var(--ant-color-fill-quaternary, #fafbfc);
+}
+
+.empty-dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  color: var(--ant-color-text-quaternary, #c9cdd4);
+  font-size: 12px;
+}
+
+.instance-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  margin-bottom: 6px;
+  border: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  border-radius: 4px;
+  background: var(--ant-color-bg-container, #fff);
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:hover {
+    border-color: var(--ant-color-primary, #165dff);
+  }
+
+  &.selected {
+    border-color: var(--ant-color-primary, #165dff);
+    background: var(--ant-color-primary-bg, #f2f7ff);
+    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.15);
+  }
+}
+
+.instance-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.instance-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.instance-label {
+  font-size: 13px;
+  color: var(--ant-color-text, #1d2129);
+  font-weight: 500;
+}
+
+.instance-summary {
+  font-size: 11px;
+  color: var(--ant-color-text-tertiary, #86909c);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.instance-remove {
+  width: 18px;
+  height: 18px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--ant-color-text-tertiary, #86909c);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover {
+    background: var(--ant-color-error, #f53f3f);
+    color: #fff;
+  }
+}
+</style>

apps/web-antd/src/components/oa-template-card-editor/JsonPreview.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Button, message } from 'ant-design-vue';
+
+/**
+ * JSON 实时预览面板
+ * - 显示最终生成的 JSON 字符串（语法高亮，简单的 key/string 高亮）
+ * - 提供「复制 JSON」按钮（一键拷贝到剪贴板）
+ */
+const props = defineProps<{
+  /** 最终生成的 JSON 数据 */
+  value: Record<string, any>;
+}>();
+
+const formattedJson = computed(() => {
+  try {
+    return JSON.stringify(props.value, null, 2);
+  } catch {
+    return '// JSON 序列化失败';
+  }
+});
+
+/**
+ * 简单的 JSON 语法高亮
+ * 匹配 key / string / number / boolean 并套用不同颜色 span
+ */
+const highlightedHtml = computed(() => {
+  const escape = (s: string) =>
+    s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const json = escape(formattedJson.value);
+  return json
+    .replace(
+      /("(?:\\.|[^"\\])*")(\s*:)/g,
+      '<span class="json-key">$1</span>$2',
+    )
+    .replace(
+      /:\s*("(?:\\.|[^"\\])*")/g,
+      ': <span class="json-string">$1</span>',
+    )
+    .replace(/:\s*(-?\d+(?:\.\d+)?)/g, ': <span class="json-number">$1</span>')
+    .replace(/:\s*(true|false|null)/g, ': <span class="json-bool">$1</span>');
+});
+
+async function handleCopy() {
+  try {
+    await navigator.clipboard.writeText(formattedJson.value);
+    message.success('JSON 已复制');
+  } catch {
+    message.error('复制失败，请手动选择');
+  }
+}
+</script>
+
+<template>
+  <div class="json-preview">
+    <div class="panel-header">
+      <span class="title">JSON 预览</span>
+      <Button size="small" type="link" @click="handleCopy">复制 JSON</Button>
+    </div>
+    <pre class="json-body" v-html="highlightedHtml" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.json-preview {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  height: 100%;
+  border-left: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  /* JSON 代码面板保留 VS Code Dark+ 风格暗底（无论浅色/暗色主题） */
+  background: #1e1e1e;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid #374151;
+  font-size: 13px;
+
+  .title {
+    font-weight: 600;
+    color: #e5e7eb;
+  }
+}
+
+.json-body {
+  flex: 1;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #d4d4d4;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* JSON 语法高亮颜色 */
+:deep(.json-key) {
+  color: #9cdcfe;
+}
+
+:deep(.json-string) {
+  color: #ce9178;
+}
+
+:deep(.json-number) {
+  color: #b5cea8;
+}
+
+:deep(.json-bool) {
+  color: #569cd6;
+}
+</style>

apps/web-antd/src/components/oa-template-card-editor/PropertyPanel.vue

@@ -0,0 +1,348 @@
+<script setup lang="ts">
+import type { BlockInstance, BlockSchema, FixedField, FormFieldSchema } from './types';
+
+import { computed, watch } from 'vue';
+
+import { Empty, Input, InputNumber, Radio, RadioGroup, Select, Textarea } from 'ant-design-vue';
+
+import GalleryPickLink from '#/components/form/components/gallery-pick-link.vue';
+
+/**
+ * 右侧属性面板：根据选中块的字段 schema 渲染表单
+ * - 顶层固定字段（fixedFields）：渲染在顶部，不可删除
+ * - 选中块的 fields：渲染在下方
+ * - 图片类型字段用 GalleryPickLink（透传 acceptTypes）
+ */
+const props = defineProps<{
+  /** 顶层固定字段定义 */
+  fixedFields?: FixedField[];
+  /** 顶层固定字段当前值 */
+  fixedValues?: Record<string, any>;
+  /** 当前选中的块定义（可能为空） */
+  selectedBlockSchema?: BlockSchema;
+  /** 当前选中的块实例（可能为空） */
+  selectedInstance?: BlockInstance;
+}>();
+
+const emit = defineEmits<{
+  /** 顶层固定字段值变化 */
+  'update:fixedValues': [value: Record<string, any>];
+  /** 选中块实例数据变化 */
+  'update:instance': [instance: BlockInstance];
+}>();
+
+/**
+ * 设置顶层固定字段的值
+ * 支持 a.b.c 嵌套路径
+ */
+function setFixedValue(path: string, value: any) {
+  const next = { ...(props.fixedValues || {}) };
+  setByPath(next, path, value);
+  emit('update:fixedValues', next);
+}
+
+/**
+ * 设置选中块实例的字段值
+ */
+function setInstanceValue(path: string, value: any) {
+  if (!props.selectedInstance) return;
+  const nextData = { ...props.selectedInstance.data };
+  setByPath(nextData, path, value);
+  emit('update:instance', {
+    ...props.selectedInstance,
+    data: nextData,
+  });
+}
+
+/**
+ * 按 a.b.c 路径设置对象嵌套属性（不可变更新）
+ */
+function setByPath(obj: Record<string, any>, path: string, value: any) {
+  const keys = path.split('.');
+  let cursor: any = obj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const k = keys[i]!;
+    if (!cursor[k] || typeof cursor[k] !== 'object') {
+      cursor[k] = {};
+    } else {
+      cursor[k] = { ...cursor[k] };
+    }
+    cursor = cursor[k];
+  }
+  cursor[keys[keys.length - 1]!] = value;
+}
+
+/**
+ * 按 a.b.c 路径读取对象嵌套属性
+ */
+function getByPath(obj: Record<string, any> | undefined, path: string): any {
+  if (!obj) return undefined;
+  const keys = path.split('.');
+  let cursor: any = obj;
+  for (const k of keys) {
+    if (cursor == null) return undefined;
+    cursor = cursor[k];
+  }
+  return cursor;
+}
+
+const hasAnyField = computed(() => {
+  return (
+    (props.fixedFields && props.fixedFields.length > 0) ||
+    (props.selectedBlockSchema && props.selectedBlockSchema.fields.length > 0)
+  );
+});
+
+// 当选中的块变化时，触发 watch 让父级感知（用于属性面板切换的动画/数据初始化）
+watch(
+  () => props.selectedInstance?.id,
+  () => {
+    // 仅做依赖追踪，实际更新在用户交互时通过 emit 触发
+  },
+);
+</script>
+
+<template>
+  <div class="property-panel">
+    <div class="panel-header">
+      <span class="title">属性</span>
+      <span v-if="selectedBlockSchema" class="hint">{{ selectedBlockSchema.label }}</span>
+    </div>
+    <div class="panel-body">
+      <!-- 顶层固定字段 -->
+      <div v-if="fixedFields && fixedFields.length > 0" class="field-section">
+        <div class="section-title">基础信息</div>
+        <div
+          v-for="field in fixedFields"
+          :key="field.name"
+          class="form-row"
+        >
+          <label class="form-label">
+            {{ field.label }}
+            <span v-if="field.required" class="required">*</span>
+          </label>
+          <!-- 文本 -->
+          <Input
+            v-if="!field.type || field.type === 'string' || field.type === 'url'"
+            :value="getByPath(fixedValues, field.name)"
+            :placeholder="field.placeholder"
+            allow-clear
+            size="small"
+            @update:value="setFixedValue(field.name, $event)"
+          />
+          <!-- 数字 -->
+          <InputNumber
+            v-else-if="field.type === 'number'"
+            :value="getByPath(fixedValues, field.name)"
+            :placeholder="field.placeholder"
+            size="small"
+            style="width: 100%"
+            @update:value="setFixedValue(field.name, $event)"
+          />
+          <!-- 多行文本 -->
+          <Textarea
+            v-else-if="field.type === 'textarea'"
+            :value="getByPath(fixedValues, field.name)"
+            :placeholder="field.placeholder"
+            :rows="3"
+            size="small"
+            @update:value="setFixedValue(field.name, $event)"
+          />
+          <!-- 下拉选择 -->
+          <Select
+            v-else-if="field.type === 'select'"
+            :value="getByPath(fixedValues, field.name)"
+            :options="field.options"
+            :placeholder="field.placeholder"
+            size="small"
+            @update:value="setFixedValue(field.name, $event)"
+          />
+          <!-- 单选 -->
+          <RadioGroup
+            v-else-if="field.type === 'radio'"
+            :value="getByPath(fixedValues, field.name)"
+            size="small"
+            @update:value="setFixedValue(field.name, $event)"
+          >
+            <Radio
+              v-for="opt in field.options"
+              :key="String(opt.value)"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </Radio>
+          </RadioGroup>
+          <!-- 图片素材 -->
+          <div v-else-if="field.type === 'image'" class="image-picker-row">
+            <Input
+              :value="getByPath(fixedValues, field.name)"
+              :placeholder="field.placeholder || '从素材库选择图片'"
+              size="small"
+              read-only
+            />
+            <GalleryPickLink
+              :accept-types="field.acceptTypes || [0]"
+              @select="(urls) => setFixedValue(field.name, urls[0] || '')"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 选中块的属性字段 -->
+      <div v-if="selectedBlockSchema && selectedInstance" class="field-section">
+        <div class="section-title">{{ selectedBlockSchema.label }}属性</div>
+        <div
+          v-for="field in selectedBlockSchema.fields"
+          :key="field.name"
+          class="form-row"
+        >
+          <label class="form-label">
+            {{ field.label }}
+            <span v-if="field.required" class="required">*</span>
+          </label>
+          <Input
+            v-if="!field.type || field.type === 'string' || field.type === 'url'"
+            :value="getByPath(selectedInstance.data, field.name)"
+            :placeholder="field.placeholder"
+            allow-clear
+            size="small"
+            @update:value="setInstanceValue(field.name, $event)"
+          />
+          <InputNumber
+            v-else-if="field.type === 'number'"
+            :value="getByPath(selectedInstance.data, field.name)"
+            :placeholder="field.placeholder"
+            size="small"
+            style="width: 100%"
+            @update:value="setInstanceValue(field.name, $event)"
+          />
+          <Textarea
+            v-else-if="field.type === 'textarea'"
+            :value="getByPath(selectedInstance.data, field.name)"
+            :placeholder="field.placeholder"
+            :rows="3"
+            size="small"
+            @update:value="setInstanceValue(field.name, $event)"
+          />
+          <Select
+            v-else-if="field.type === 'select'"
+            :value="getByPath(selectedInstance.data, field.name)"
+            :options="field.options"
+            :placeholder="field.placeholder"
+            size="small"
+            @update:value="setInstanceValue(field.name, $event)"
+          />
+          <RadioGroup
+            v-else-if="field.type === 'radio'"
+            :value="getByPath(selectedInstance.data, field.name)"
+            size="small"
+            @update:value="setInstanceValue(field.name, $event)"
+          >
+            <Radio
+              v-for="opt in field.options"
+              :key="String(opt.value)"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </Radio>
+          </RadioGroup>
+          <div v-else-if="field.type === 'image'" class="image-picker-row">
+            <Input
+              :value="getByPath(selectedInstance.data, field.name)"
+              :placeholder="field.placeholder || '从素材库选择图片'"
+              size="small"
+              read-only
+            />
+            <GalleryPickLink
+              :accept-types="field.acceptTypes || [0]"
+              @select="(urls) => setInstanceValue(field.name, urls[0] || '')"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 未选中任何块时的提示 -->
+      <Empty
+        v-if="!hasAnyField"
+        description="点击画布中的块以编辑属性"
+        :image-style="{ height: '60px' }"
+        style="margin-top: 60px"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.property-panel {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  height: 100%;
+  border-left: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  background: var(--ant-color-bg-container, #fff);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  font-size: 13px;
+
+  .title {
+    font-weight: 600;
+    color: var(--ant-color-text, #1d2129);
+  }
+
+  .hint {
+    color: var(--ant-color-text-tertiary, #86909c);
+    font-size: 11px;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.field-section {
+  margin-bottom: 24px;
+}
+
+.section-title {
+  margin-bottom: 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--ant-color-split, #f2f3f5);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ant-color-text-secondary, #4e5969);
+}
+
+.form-row {
+  margin-bottom: 12px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: var(--ant-color-text-secondary, #4e5969);
+
+  .required {
+    margin-left: 2px;
+    color: var(--ant-color-error, #f53f3f);
+  }
+}
+
+.image-picker-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+</style>

apps/web-antd/src/components/oa-template-card-editor/index.vue

@@ -0,0 +1,522 @@
+<script setup lang="ts">
+import type { BlockInstance, BlockSchema, FixedField } from './types';
+
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import type Sortable from 'sortablejs';
+import type { SortableOptions } from 'sortablejs';
+
+import { Button, message } from 'ant-design-vue';
+
+import BlockLibrary from './BlockLibrary.vue';
+import Canvas from './Canvas.vue';
+import JsonPreview from './JsonPreview.vue';
+import PropertyPanel from './PropertyPanel.vue';
+
+/**
+ * 通用拖拽式可视化编辑器
+ *
+ * 用途：把「左侧组件库 → 中间画布拖拽组装 → 右侧属性面板 → 自动生成 JSON」
+ *      做成 schema 驱动的通用组件，未来 OA / 工单 / 通知等任何场景需要可视化拼装 JSON 都能复用。
+ *
+ * 核心机制：
+ * - 左侧库 + 画布各分组共用同一个 SortableJS group（pull:clone 模式：左侧库克隆到画布）
+ * - 拖入 / 排序 / 删除时同步内部 instances 状态
+ * - 通过 computed 把「fixedFields 值 + 各 targetArrayPath 数组」合并成最终 JSON，emit 给父级
+ *
+ * SortableJS 用法参照项目内 views/system/role/components/quick-nav-transfer.vue
+ */
+
+const props = withDefaults(
+  defineProps<{
+    /** 双向绑定的 JSON 数据 */
+    modelValue: Record<string, any>;
+    /** 块定义 schema（决定左侧能拖入哪些块、各自有哪些字段） */
+    schema: BlockSchema[];
+    /** 是否显示 JSON 预览面板 */
+    showJsonPreview?: boolean;
+    /** 顶层固定字段（不可拖拽，固定显示在属性面板顶部） */
+    fixedFields?: FixedField[];
+  }>(),
+  {
+    showJsonPreview: true,
+    fixedFields: () => [] as FixedField[],
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Record<string, any>];
+}>();
+
+// ====== 内部状态 ======
+
+/** 所有块实例（按拖入顺序） */
+const instances = ref<BlockInstance[]>([]);
+/** 当前选中的块实例 ID */
+const selectedInstanceId = ref<string>('');
+/** 顶层固定字段值 */
+const fixedValues = ref<Record<string, any>>({});
+/** 顶层固定字段 + 块数组组装后的最终 JSON（双向同步给父级） */
+const assembledJson = computed<Record<string, any>>(() => {
+  const result: Record<string, any> = { ...fixedValues.value };
+  // 按 targetArrayPath 收集块实例数据
+  for (const schema of props.schema) {
+    const path = schema.targetArrayPath;
+    const items = instances.value
+      .filter((inst) => inst.type === schema.type)
+      .map((inst) => {
+        // 深拷贝避免引用问题
+        const data = JSON.parse(JSON.stringify(inst.data));
+        // 移除内部使用的 id 字段（如果有）
+        delete data._blockType;
+        return data;
+      });
+    if (items.length > 0) {
+      // 设置嵌套路径
+      setByPath(result, path, items);
+    }
+  }
+  return result;
+});
+
+/** 当前选中的块实例对象 */
+const selectedInstance = computed<BlockInstance | undefined>(() => {
+  return instances.value.find((i) => i.id === selectedInstanceId.value);
+});
+
+/** 当前选中的块 schema */
+const selectedBlockSchema = computed<BlockSchema | undefined>(() => {
+  if (!selectedInstance.value) return undefined;
+  return props.schema.find((s) => s.type === selectedInstance.value!.type);
+});
+
+// ====== SortableJS 实例管理 ======
+
+const editorRootRef = ref<HTMLElement>();
+const libraryRef = ref<HTMLElement>();
+/** 画布中各分组的 dropzone DOM 引用（key = targetArrayPath） */
+const dropzoneRefs = ref<Record<string, HTMLElement>>({});
+const librarySortable = ref<Sortable | null>(null);
+const dropzoneSortables = ref<Record<string, Sortable>>({});
+
+/**
+ * 动态导入 SortableJS（参照 quick-nav-transfer.vue 模式）
+ */
+async function createSortable(
+  el: HTMLElement,
+  options: SortableOptions = {},
+): Promise<Sortable> {
+  const mod = await import(
+    // @ts-expect-error sortablejs modular esm path
+    'sortablejs/modular/sortable.complete.esm.js'
+  );
+  return mod.default.create(el, {
+    animation: 200,
+    ...options,
+  }) as Sortable;
+}
+
+/**
+ * 初始化 SortableJS 实例
+ * 1. 左侧组件库：pull:clone 模式（拖出后元素保留）
+ * 2. 画布各分组：pull:clone/put，跨组可移动
+ */
+async function initSortables() {
+  destroySortables();
+  await nextTick();
+
+  if (libraryRef.value) {
+    librarySortable.value = await createSortable(libraryRef.value, {
+      group: {
+        name: 'template-editor',
+        pull: 'clone',
+        put: false, // 左侧库不接受拖入
+      },
+      sort: false, // 左侧库不排序
+      onEnd: handleLibraryDragEnd,
+    });
+  }
+
+  // 通过 querySelector 直接查询画布中的所有 dropzone DOM（避免父子组件 DOM 引用传递）
+  const editorRoot = editorRootRef.value;
+  const dropzoneEls = editorRoot?.querySelectorAll('.group-dropzone[data-target-array-path]') ?? [];
+  dropzoneEls.forEach((el) => {
+    const path = el.getAttribute('data-target-array-path');
+    if (!path) return;
+    dropzoneRefs.value[path] = el as HTMLElement;
+    void createSortable(el as HTMLElement, {
+      group: {
+        name: 'template-editor',
+        pull: true,
+        put: true,
+      },
+      onAdd: (evt) => handleDropzoneAdd(evt, path),
+      onRemove: (evt) => handleDropzoneRemove(evt, path),
+      onUpdate: (evt) => handleDropzoneUpdate(evt, path),
+    }).then((s) => {
+      dropzoneSortables.value[path] = s;
+    });
+  });
+}
+
+function destroySortables() {
+  librarySortable.value?.destroy();
+  librarySortable.value = null;
+  for (const sortable of Object.values(dropzoneSortables.value)) {
+    sortable.destroy();
+  }
+  dropzoneRefs.value = {};
+  dropzoneSortables.value = {};
+}
+
+/**
+ * 设置 dropzone DOM 引用（Canvas 子组件通过回调注入）
+ */
+function setDropzoneRef(path: string, el: HTMLElement | null) {
+  if (el) {
+    dropzoneRefs.value[path] = el;
+  } else {
+    delete dropzoneRefs.value[path];
+  }
+}
+
+// ====== 拖拽事件处理（在 SortableJS 修改 DOM 后，同步到 Vue 状态） ======
+
+/**
+ * 左侧库 → 画布的拖拽结束回调
+ * SortableJS 会把左侧库的元素 clone 一份移到画布 DOM，我们要：
+ * 1. 移除 DOM 中被克隆过去的元素（由 Vue 重新渲染）
+ * 2. 在 instances 中追加新块
+ */
+function handleLibraryDragEnd(evt: any) {
+  // 如果只是库内拖动（没拖到画布），不做处理
+  if (!evt.to || !evt.to.classList.contains('group-dropzone')) {
+    return;
+  }
+  const blockType = evt.item?.dataset?.blockType;
+  if (!blockType) return;
+
+  // 检查 maxCount 限制
+  const schema = props.schema.find((s) => s.type === blockType);
+  if (!schema) return;
+
+  const targetPath = schema.targetArrayPath;
+  const currentCount = instances.value.filter(
+    (i) => props.schema.find((s) => s.type === i.type)?.targetArrayPath === targetPath,
+  ).length;
+  if (schema.maxCount && currentCount >= schema.maxCount) {
+    // 移除 SortableJS 已经克隆到画布 DOM 的元素
+    evt.item?.remove();
+    message.warning(`「${schema.label}」最多 ${schema.maxCount} 项`);
+    return;
+  }
+
+  // 移除 SortableJS 已经克隆到画布 DOM 的元素（Vue 会重新渲染）
+  evt.item?.remove();
+
+  // 根据 SortableJS 在画布 DOM 中的位置，计算插入位置
+  // 简化处理：直接追加到末尾（实现严格的位置同步太复杂，先保留追加行为）
+  const newInstance: BlockInstance = {
+    id: generateId(),
+    type: blockType,
+    data: schema.defaultValue ? JSON.parse(JSON.stringify(schema.defaultValue)) : {},
+  };
+  instances.value = [...instances.value, newInstance];
+  selectedInstanceId.value = newInstance.id;
+}
+
+/**
+ * 画布分组间或分组内的添加事件（块从其他分组拖入）
+ */
+function handleDropzoneAdd(_evt: any, _path: string) {
+  // SortableJS 自动处理 DOM 顺序，但因为 Vue 控制渲染，需要同步状态
+  syncInstancesFromDom();
+}
+
+function handleDropzoneRemove(_evt: any, _path: string) {
+  syncInstancesFromDom();
+}
+
+function handleDropzoneUpdate(_evt: any, _path: string) {
+  syncInstancesFromDom();
+}
+
+/**
+ * 从画布 DOM 同步块实例状态
+ * SortableJS 修改了 DOM 后，从 DOM 重新读取 instanceId 顺序
+ */
+function syncInstancesFromDom() {
+  const newInstances: BlockInstance[] = [];
+  for (const path of Object.keys(dropzoneRefs.value)) {
+    const el = dropzoneRefs.value[path];
+    if (!el) continue;
+    const items = el.querySelectorAll('[data-instance-id]');
+    items.forEach((item) => {
+      const id = item.getAttribute('data-instance-id');
+      if (!id) return;
+      const existing = instances.value.find((i) => i.id === id);
+      if (existing) {
+        newInstances.push(existing);
+      }
+    });
+  }
+  instances.value = newInstances;
+}
+
+/**
+ * 删除块实例
+ */
+function removeInstance(id: string) {
+  instances.value = instances.value.filter((i) => i.id !== id);
+  if (selectedInstanceId.value === id) {
+    selectedInstanceId.value = '';
+  }
+}
+
+/**
+ * 选中块实例
+ */
+function selectInstance(id: string) {
+  selectedInstanceId.value = id;
+}
+
+/**
+ * 更新顶层固定字段值（PropertyPanel 触发）
+ */
+function updateFixedValues(values: Record<string, any>) {
+  fixedValues.value = values;
+}
+
+/**
+ * 更新块实例数据（PropertyPanel 触发）
+ */
+function updateInstance(updated: BlockInstance) {
+  instances.value = instances.value.map((i) =>
+    i.id === updated.id ? updated : i,
+  );
+}
+
+// ====== 工具函数 ======
+
+function generateId(): string {
+  return `inst_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+/**
+ * 按 a.b.c 路径设置对象嵌套属性（不可变更新）
+ */
+function setByPath(obj: Record<string, any>, path: string, value: any) {
+  const keys = path.split('.');
+  let cursor: any = obj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const k = keys[i]!;
+    if (!cursor[k]) cursor[k] = {};
+    cursor = cursor[k];
+  }
+  cursor[keys[keys.length - 1]!] = value;
+}
+
+/**
+ * 按 a.b.c 路径读取对象嵌套属性
+ */
+function getByPath(obj: Record<string, any> | undefined, path: string): any {
+  if (!obj) return undefined;
+  const keys = path.split('.');
+  let cursor: any = obj;
+  for (const k of keys) {
+    if (cursor == null) return undefined;
+    cursor = cursor[k];
+  }
+  return cursor;
+}
+
+// ====== modelValue 双向同步 ======
+
+/**
+ * 监听 modelValue 变化，反向初始化内部状态（用于编辑场景回显）
+ */
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!val || Object.keys(val).length === 0) {
+      // 重置
+      instances.value = [];
+      fixedValues.value = {};
+      selectedInstanceId.value = '';
+      return;
+    }
+    // 简化处理：只在 modelValue 引用变化时才反解析（避免无限循环）
+    // 从 modelValue 还原 fixedValues 和 instances
+    const newFixed: Record<string, any> = {};
+    for (const field of props.fixedFields || []) {
+      const v = getByPath(val, field.name);
+      if (v !== undefined) {
+        setByPath(newFixed, field.name, v);
+      }
+    }
+    fixedValues.value = newFixed;
+
+    // 从各 targetArrayPath 还原 instances
+    const newInstances: BlockInstance[] = [];
+    for (const schema of props.schema) {
+      const arr = getByPath(val, schema.targetArrayPath);
+      if (Array.isArray(arr)) {
+        for (const item of arr) {
+          newInstances.push({
+            id: generateId(),
+            type: schema.type,
+            data: JSON.parse(JSON.stringify(item)),
+          });
+        }
+      }
+    }
+    instances.value = newInstances;
+  },
+  { immediate: false, deep: false },
+);
+
+/**
+ * 监听 assembledJson 变化，emit 给父级
+ */
+watch(
+  assembledJson,
+  (val) => {
+    // 浅比较避免不必要的 emit
+    const current = JSON.stringify(props.modelValue || {});
+    const next = JSON.stringify(val);
+    if (current !== next) {
+      emit('update:modelValue', val);
+    }
+  },
+  { deep: true },
+);
+
+// 监听 schema 变化时重置 SortableJS（画布 DOM 可能重建）
+watch(
+  () => props.schema,
+  () => {
+    void nextTick(() => initSortables());
+  },
+);
+
+onMounted(async () => {
+  // 初始化 fixedValues（从 props.fixedFields 的 defaultValue）
+  for (const field of props.fixedFields || []) {
+    if (field.defaultValue !== undefined) {
+      setByPath(fixedValues.value, field.name, field.defaultValue);
+    }
+  }
+  // 从 modelValue 回显数据
+  if (props.modelValue && Object.keys(props.modelValue).length > 0) {
+    for (const field of props.fixedFields || []) {
+      const v = getByPath(props.modelValue, field.name);
+      if (v !== undefined) {
+        setByPath(fixedValues.value, field.name, v);
+      }
+    }
+    for (const schema of props.schema) {
+      const arr = getByPath(props.modelValue, schema.targetArrayPath);
+      if (Array.isArray(arr)) {
+        for (const item of arr) {
+          instances.value.push({
+            id: generateId(),
+            type: schema.type,
+            data: JSON.parse(JSON.stringify(item)),
+          });
+        }
+      }
+    }
+  }
+  await nextTick();
+  await initSortables();
+});
+
+onUnmounted(() => {
+  destroySortables();
+});
+
+// 暴露给父组件
+defineExpose({
+  initSortables,
+});
+</script>
+
+<template>
+  <div ref="editorRootRef" class="template-editor">
+    <div class="editor-toolbar">
+      <span class="title">模板编辑器</span>
+      <Button
+        size="small"
+        type="link"
+        @click="initSortables"
+      >
+        重置拖拽
+      </Button>
+    </div>
+    <div class="editor-main">
+      <!-- 左侧：组件库（用 ref 暴露给 SortableJS 初始化） -->
+      <div ref="libraryRef">
+        <BlockLibrary :blocks="schema" />
+      </div>
+
+      <!-- 中间：画布 -->
+      <Canvas
+        :block-schemas="schema"
+        :instances="instances"
+        :selected-instance-id="selectedInstanceId"
+        @select="selectInstance"
+        @remove="removeInstance"
+      />
+
+      <!-- 右侧：属性面板 -->
+      <PropertyPanel
+        :fixed-fields="fixedFields"
+        :fixed-values="fixedValues"
+        :selected-block-schema="selectedBlockSchema"
+        :selected-instance="selectedInstance"
+        @update:fixed-values="updateFixedValues"
+        @update:instance="updateInstance"
+      />
+
+      <!-- 最右侧：JSON 预览（可选） -->
+      <JsonPreview
+        v-if="showJsonPreview"
+        :value="assembledJson"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.template-editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 480px;
+  border: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--ant-color-bg-container, #fff);
+}
+
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  background: var(--ant-color-fill-quaternary, #fafbfc);
+  font-size: 13px;
+
+  .title {
+    font-weight: 600;
+    color: var(--ant-color-text, #1d2129);
+  }
+}
+
+.editor-main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+</style>

apps/web-antd/src/components/oa-template-card-editor/types.ts

@@ -0,0 +1,99 @@
+/**
+ * 通用拖拽式可视化编辑器类型定义
+ *
+ * 设计目标：把「左侧组件库 → 中间画布拖拽 → 右侧属性面板 → 自动生成 JSON」
+ * 做成 schema 驱动的通用编辑器，未来任何需要拼装 JSON 结构的场景都能复用。
+ *
+ * 核心概念：
+ * - BlockSchema：可拖拽块定义（左侧组件库中展示，决定属性面板渲染什么字段）
+ * - FormFieldSchema：单个字段定义（驱动右侧属性面板表单渲染）
+ * - 块的 instances 按 targetArrayPath 分组存到画布，每组数量不超过 maxCount
+ */
+
+/**
+ * 字段类型枚举
+ * - string：单行文本
+ * - number：数字
+ * - textarea：多行文本
+ * - select：下拉选择
+ * - radio：单选按钮组
+ * - image：图片素材选择（用 GalleryPickLink，acceptTypes 限定图片）
+ * - url：URL 链接
+ */
+export type FormFieldType =
+  | 'image'
+  | 'number'
+  | 'radio'
+  | 'select'
+  | 'string'
+  | 'textarea'
+  | 'url';
+
+/**
+ * 单个字段定义（驱动属性面板表单渲染）
+ */
+export interface FormFieldSchema {
+  /** 字段名（在 payload 对象中的 key，支持 a.b.c 嵌套路径） */
+  name: string;
+  /** 中文标签 */
+  label: string;
+  /** 字段类型 */
+  type: FormFieldType;
+  /** 占位提示 */
+  placeholder?: string;
+  /** 是否必填 */
+  required?: boolean;
+  /** select / radio 类型的选项列表 */
+  options?: { label: string; value: any }[];
+  /** 图片字段：限定素材库文件类型（如 [0] 只显示图片） */
+  acceptTypes?: number[];
+  /** 最大长度 */
+  maxLength?: number;
+  /** 默认值 */
+  defaultValue?: any;
+}
+
+/**
+ * 可拖拽块定义（左侧组件库中展示，决定画布上能放什么块、各块有哪些字段）
+ */
+export interface BlockSchema {
+  /** 块类型标识（唯一） */
+  type: string;
+  /** 块显示名（如「二级标题+文本项」「跳转链接项」） */
+  label: string;
+  /** 块图标（Iconify） */
+  icon: string;
+  /** 该块的字段定义（驱动右侧属性面板表单渲染） */
+  fields: FormFieldSchema[];
+  /**
+   * 该块在最终 JSON 中放到的数组路径
+   * 例如 'horizontal_content_list' 表示拖入的块实例会被收集到 result.horizontal_content_list 数组
+   * 多个块共用同一个 targetArrayPath 即被收集到同一数组
+   */
+  targetArrayPath: string;
+  /** 该数组路径下最多允许的块数量（如企微 jump_list 最多 3 项） */
+  maxCount?: number;
+  /** 块实例的默认值（拖入时初始化） */
+  defaultValue?: Record<string, any>;
+}
+
+/**
+ * 画布中的块实例（拖入后生成的实际数据）
+ */
+export interface BlockInstance {
+  /** 块实例唯一 ID（用于 SortableJS 拖拽排序追踪） */
+  id: string;
+  /** 关联的块类型（对应 BlockSchema.type） */
+  type: string;
+  /** 块实例的当前数据（属性面板编辑后会更新这里） */
+  data: Record<string, any>;
+}
+
+/**
+ * 顶层固定字段（不可拖拽删除，固定显示在属性面板顶部）
+ * 用于 card_type / main_title / source 等必填顶层字段
+ */
+export interface FixedField extends FormFieldSchema {
+  /** 字段在最终 JSON 中的路径（支持 a.b.c 嵌套，如 'main_title.title'） */
+  name: string;
+}

apps/web-antd/src/components/store-card/StoreCardModal.vue

@@ -8,6 +8,7 @@ import type { Dayjs } from 'dayjs';
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
 
 import dayjs from 'dayjs';
 import {
@@ -35,9 +36,15 @@ import {
 } 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 } from '#/views/system/admin/_shared/platform-admin-role';
 
 const RangePicker = DatePicker.RangePicker;
 
+const userStore = useUserStore();
+// 是否允许「添加医生」：超管/管理员/省经理/市经理/业务员
+const canAddDoctor = computed(() => canAddStoreDoctor(userStore.userInfo));
+
 const storeId = ref(0);
 const loading = ref(false);
 const activeTab = ref('basic');
@@ -64,10 +71,13 @@ const stats = computed(() => cardData.value?.stats_summary ?? {});
 const doctorList = computed(() => cardData.value?.doctor_list ?? []);
 const isClinic = computed(() => Number(store.value?.type) === 0);
 const isPharmacy = computed(() => Number(store.value?.type) === 1);
+/** 按门店类型区分诊所/药店文案，避免药店仍显示「诊所」 */
+const storeKindLabel = computed(() => (isPharmacy.value ? '药店' : '诊所'));
+const qrTabLabel = computed(() => `${storeKindLabel.value}二维码`);
 const modalTitle = computed(() => {
   const name = store.value?.name;
   if (!name) return '门店详情';
-  return isPharmacy.value ? `药店详情 · ${name}` : `诊所详情 · ${name}`;
+  return `${storeKindLabel.value}详情 · ${name}`;
 });
 
 const drugTypeOptions = [
@@ -121,6 +131,25 @@ const [DoctorModal, DoctorModalApi] = useVbenModal({
   connectedComponent: DoctorCardModal,
 });
 
+/** 添加医生弹窗：诊所详情医生团队 Tab 内入口 */
+const [AddDoctorModal, AddDoctorModalApi] = useVbenModal({
+  connectedComponent: AddDoctorFromStoreModal,
+});
+
+/**
+ * 打开「添加医生」弹窗：默认绑定当前门店，提交成功后刷新医生团队列表
+ */
+const openAddDoctorModal = () => {
+  AddDoctorModalApi.setData({
+    storeId: storeId.value,
+    storeName: (store.value as any)?.name || '',
+    onSuccess: () => {
+      loadCard();
+    },
+  });
+  AddDoctorModalApi.open();
+};
+
 function searchTimeParam(): [string, string] {
   return [
     searchTime.value[0].format('YYYY-MM-DD 00:00:00'),
@@ -256,6 +285,7 @@ function clinicTypeText(v: number) {
 
 <template>
   <Modal :title="modalTitle">
+    <AddDoctorModal />
     <Spin :spinning="loading">
       <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>
@@ -399,6 +429,15 @@ 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>
+            </div>
             <Empty v-if="doctorList.length === 0" description="暂无医生" />
             <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
               <div
@@ -443,7 +482,7 @@ function clinicTypeText(v: number) {
           </div>
         </Tabs.TabPane>
 
-        <Tabs.TabPane key="qr" tab="门店二维码">
+        <Tabs.TabPane key="qr" :tab="qrTabLabel">
           <div class="flex flex-col items-center gap-4 py-6 pl-4">
             <template v-if="cardData?.qr_code || store.qr_code">
               <Image
@@ -452,13 +491,13 @@ function clinicTypeText(v: number) {
                 :preview="true"
               />
               <div class="text-sm text-muted-foreground">
-                {{ store.name }} 门店二维码
+                {{ store.name }} {{ qrTabLabel }}
               </div>
             </template>
             <template v-else>
-              <Empty description="尚未生成二维码" />
+              <Empty :description="`尚未生成${storeKindLabel}二维码`" />
               <Button type="primary" :loading="generatingQr" @click="ensureQrCode">
-                生成二维码
+                生成{{ storeKindLabel }}二维码
               </Button>
             </template>
           </div>

apps/web-antd/src/components/vip/HeaderVipBadge.vue

@@ -0,0 +1,349 @@
+<script lang="ts" setup>
+/**
+ * 顶栏 VIP 徽标：点击弹出诊所端风格会员气泡卡
+ * 展示等级名（不展示 CUSTOM/V1 等编码）、开通信息、已开功能，并可查看开通记录
+ */
+import { computed, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
+
+import { Button, Popover } from 'ant-design-vue';
+
+import { useAuthStore } from '#/store';
+
+import VipBadgeCombo from './VipBadgeCombo.vue';
+import VipStoreRecordsModal from './VipStoreRecordsModal.vue';
+
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const popoverOpen = ref(false);
+const refreshing = ref(false);
+
+const vip = computed(() => (userStore.userInfo as any)?.vip || null);
+const storeId = computed(() => Number((userStore.userInfo as any)?.store_id || 0));
+const storeName = computed(
+  () =>
+    String(
+      (userStore.userInfo as any)?.store_name ||
+        (userStore.userInfo as any)?.store?.name ||
+        '',
+    ),
+);
+
+const show = computed(() => !!vip.value);
+
+/** 只展示等级名称，不展示 CUSTOM/V1 等编码 */
+const levelName = computed(
+  () => String(vip.value?.level_name || '').trim() || '普通会员',
+);
+
+const durationLabel = computed(
+  () => String(vip.value?.duration_label || '').trim() || '普通会员',
+);
+
+/** 当前等级已开功能列表 */
+const features = computed(() => {
+  const list = vip.value?.features;
+  return Array.isArray(list) ? list : [];
+});
+
+/** 到期文案 */
+const expireText = computed(() => {
+  const v = vip.value;
+  if (!v) return '默认会员';
+  if (v.is_lifetime) return '永久有效';
+  const expireAt = Number(v.expire_at || 0);
+  if (!expireAt) {
+    if ((v.level_code || 'V0') === 'V0') return '默认会员';
+    return '永久有效';
+  }
+  if (typeof v.expire_at === 'string' && String(v.expire_at).includes('-')) {
+    return `有效期至 ${v.expire_at}`;
+  }
+  const d = new Date(expireAt * 1000);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `有效期至 ${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+});
+
+/** 开通时间文案（opened_at 为时间戳）；无数据返回空串 */
+const openedAtText = computed(() => {
+  const ts = Number(vip.value?.opened_at || 0);
+  if (!ts) return '';
+  const d = new Date(ts * 1000);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+});
+
+const openTypeText = computed(() =>
+  String(vip.value?.open_type_txt || '').trim(),
+);
+const operatorText = computed(() => {
+  const name = String(vip.value?.operator_name || '').trim();
+  if (name) return name;
+  const id = Number(vip.value?.operator_id || 0);
+  if (id > 0) return `管理员#${id}`;
+  return '';
+});
+
+/** 是否有开通流水信息：无则整块隐藏，避免展示「—」占位 */
+const hasOpenInfo = computed(() => {
+  const v = vip.value;
+  if (!v) return false;
+  return !!(
+    openTypeText.value ||
+    operatorText.value ||
+    Number(v.opened_at || 0) > 0 ||
+    Number(v.open_record_id || 0) > 0
+  );
+});
+
+const hasVipVisual = computed(
+  () => !!(vip.value?.badge_url || vip.value?.duration_badge_url),
+);
+
+const [RecordsModalComp, recordsModalApi] = useVbenModal({
+  connectedComponent: VipStoreRecordsModal,
+});
+
+/**
+ * 打开气泡时刷新 my-info
+ * 为什么：登录态里的 vip 可能是旧缓存，缺少开通人/开通方式
+ */
+watch(popoverOpen, async (open) => {
+  if (!open || refreshing.value) return;
+  refreshing.value = true;
+  try {
+    await authStore.fetchUserInfo();
+  } catch {
+    // 刷新失败仍展示本地缓存
+  } finally {
+    refreshing.value = false;
+  }
+});
+
+/** 打开本门店开通记录弹窗 */
+function openRecords() {
+  if (!storeId.value) return;
+  popoverOpen.value = false;
+  recordsModalApi.setData({
+    store_id: storeId.value,
+    store_name: storeName.value,
+  });
+  recordsModalApi.open();
+}
+</script>
+
+<template>
+  <div v-if="show" class="mr-2 flex items-center">
+    <Popover
+      v-model:open="popoverOpen"
+      trigger="click"
+      placement="bottomRight"
+      overlay-class-name="header-vip-popover"
+      :overlay-inner-style="{ padding: '0', background: 'transparent', boxShadow: 'none' }"
+    >
+      <template #content>
+        <div class="header-vip-bubble">
+          <!-- 诊所端风格会员卡头图 -->
+          <div class="header-vip-hero">
+            <VipBadgeCombo
+              v-if="hasVipVisual"
+              size="lg"
+              :badge-url="vip?.badge_url"
+              :duration-badge-url="vip?.duration_badge_url"
+              :level-name="levelName"
+              :duration-label="durationLabel"
+            />
+            <div v-else class="header-vip-hero__placeholder">V</div>
+            <div class="header-vip-hero__info">
+              <div class="header-vip-hero__title">{{ levelName }}</div>
+              <div class="header-vip-hero__sub">{{ durationLabel }}</div>
+              <div class="header-vip-hero__expire">{{ expireText }}</div>
+            </div>
+          </div>
+          <div class="header-vip-body">
+            <div v-if="hasOpenInfo" class="header-vip-rows">
+              <div v-if="openTypeText" class="header-vip-row">
+                <span class="header-vip-row__label">开通方式</span>
+                <span class="header-vip-row__value">{{ openTypeText }}</span>
+              </div>
+              <div v-if="operatorText" class="header-vip-row">
+                <span class="header-vip-row__label">开通人</span>
+                <span class="header-vip-row__value">{{ operatorText }}</span>
+              </div>
+              <div v-if="openedAtText" class="header-vip-row">
+                <span class="header-vip-row__label">开通时间</span>
+                <span class="header-vip-row__value">{{ openedAtText }}</span>
+              </div>
+            </div>
+            <div
+              class="header-vip-features"
+              :class="{ 'header-vip-features--alone': !hasOpenInfo }"
+            >
+              <div class="header-vip-features__title">已开功能</div>
+              <div v-if="features.length" class="header-vip-features__list">
+                <span
+                  v-for="item in features"
+                  :key="item.code"
+                  class="header-vip-feature-tag"
+                  :title="item.description || item.name"
+                >
+                  {{ item.name }}
+                </span>
+              </div>
+              <div v-else class="header-vip-features__empty">暂无开通功能</div>
+            </div>
+            <Button
+              v-if="storeId > 0 && hasOpenInfo"
+              type="primary"
+              block
+              size="small"
+              class="mt-3"
+              @click="openRecords"
+            >
+              查看开通记录
+            </Button>
+          </div>
+        </div>
+      </template>
+      <div
+        class="header-vip-trigger"
+        role="button"
+        tabindex="0"
+        @keydown.enter.prevent="popoverOpen = !popoverOpen"
+      >
+        <VipBadgeCombo
+          size="sm"
+          :badge-url="vip.badge_url"
+          :duration-badge-url="vip.duration_badge_url"
+          :level-name="levelName"
+          :duration-label="durationLabel"
+        />
+      </div>
+    </Popover>
+    <RecordsModalComp />
+  </div>
+</template>
+
+<style scoped>
+.header-vip-trigger {
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 2px;
+  transition: background 0.15s ease;
+}
+.header-vip-trigger:hover {
+  background: hsl(var(--primary) / 0.1);
+}
+.header-vip-bubble {
+  width: 320px;
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card, var(--background)));
+  box-shadow: 0 8px 24px hsl(var(--foreground) / 0.12);
+}
+.header-vip-hero {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  background: linear-gradient(135deg, #2c3e50 0%, #3d5a40 50%, #6acdbb 100%);
+}
+.header-vip-hero__placeholder {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.18);
+  color: #fff;
+  font-size: 28px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.header-vip-hero__info {
+  min-width: 0;
+  color: #fff;
+}
+.header-vip-hero__title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+.header-vip-hero__sub {
+  margin-top: 4px;
+  font-size: 13px;
+  opacity: 0.9;
+}
+.header-vip-hero__expire {
+  margin-top: 4px;
+  font-size: 12px;
+  opacity: 0.78;
+}
+.header-vip-body {
+  padding: 12px 14px 14px;
+}
+.header-vip-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.header-vip-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.header-vip-row__label {
+  flex-shrink: 0;
+  color: hsl(var(--muted-foreground));
+}
+.header-vip-row__value {
+  text-align: right;
+  color: hsl(var(--foreground));
+  word-break: break-all;
+}
+.header-vip-features {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid hsl(var(--border));
+}
+.header-vip-features--alone {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+.header-vip-features__title {
+  font-size: 12px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  margin-bottom: 8px;
+}
+.header-vip-features__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.header-vip-feature-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.12);
+  border: 1px solid hsl(var(--primary) / 0.25);
+}
+.header-vip-features__empty {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+html.dark .header-vip-hero,
+.dark .header-vip-hero {
+  background: linear-gradient(135deg, #1a2332 0%, #243528 50%, #2d6b5f 100%);
+}
+</style>

apps/web-antd/src/components/vip/StoreVipCell.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+/**
+ * 诊所列表 VIP 单元格：徽标+会员名+到期时间，点击打开 VIP 入口弹窗
+ */
+import { computed } from 'vue';
+
+import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
+import { formatVipDurationExpireLine } from '#/utils/vip';
+
+const props = defineProps<{
+  vip?: Record<string, any> | null;
+}>();
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+/** 副行展示时长类型与到期，方便列表一眼看到过期时间 */
+const subText = computed(() => formatVipDurationExpireLine(props.vip));
+</script>
+<template>
+  <div
+    class="store-vip-cell"
+    role="button"
+    tabindex="0"
+    @click.stop="emit('click')"
+    @keydown.enter.prevent="emit('click')"
+  >
+    <VipBadgeCombo
+      size="sm"
+      :badge-url="vip?.badge_url"
+      :duration-badge-url="vip?.duration_badge_url"
+      :level-name="vip?.level_name"
+      :duration-label="vip?.duration_label"
+    />
+    <div class="store-vip-cell__text">
+      <div class="store-vip-cell__name">{{ vip?.level_name || '普通会员' }}</div>
+      <div class="store-vip-cell__sub">{{ subText }}</div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.store-vip-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 4px 8px 4px 4px;
+  border-radius: 10px;
+  transition: background 0.15s ease;
+  max-width: 100%;
+}
+.store-vip-cell:hover {
+  background: rgba(106, 205, 187, 0.12);
+}
+.store-vip-cell__text {
+  min-width: 0;
+  line-height: 1.25;
+}
+.store-vip-cell__name {
+  font-size: 13px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.store-vip-cell__sub {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+html.dark .store-vip-cell:hover,
+.dark .store-vip-cell:hover {
+  background: rgba(106, 205, 187, 0.2);
+}
+</style>

apps/web-antd/src/components/vip/StoreVipMemberCard.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+/**
+ * 诊所设置「基础资料」会员卡片
+ * 大尺寸等级徽标 + 期限丝带叠加，展示等级名与到期时间
+ */
+import { computed } from 'vue';
+
+import VipBadgeCombo from './VipBadgeCombo.vue';
+
+const props = defineProps<{
+  vip?: Record<string, any> | null;
+}>();
+
+const hasVipVisual = computed(() => {
+  const v = props.vip;
+  return !!(v && (v.badge_url || v.duration_badge_url));
+});
+
+const expireText = computed(() => {
+  const v = props.vip;
+  if (!v) return '默认会员';
+  if (v.is_lifetime) return '永久有效';
+  const expireAt = Number(v.expire_at || 0);
+  if (!expireAt) {
+    if ((v.level_code || 'V0') === 'V0') return '默认会员';
+    return '永久有效';
+  }
+  if (typeof v.expire_at === 'string' && String(v.expire_at).includes('-')) {
+    return `有效期至 ${v.expire_at}`;
+  }
+  const d = new Date(expireAt * 1000);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `有效期至 ${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+});
+</script>
+<template>
+  <div class="store-vip-card">
+    <VipBadgeCombo
+      v-if="hasVipVisual"
+      size="xl"
+      :badge-url="vip?.badge_url"
+      :duration-badge-url="vip?.duration_badge_url"
+      :level-name="vip?.level_name"
+      :duration-label="vip?.duration_label"
+    />
+    <div v-else class="store-vip-card__placeholder">V</div>
+    <div class="store-vip-card__info">
+      <div class="store-vip-card__title">
+        {{ vip?.level_name || '普通会员' }}
+      </div>
+      <div class="store-vip-card__sub">
+        {{ vip?.duration_label || '普通会员' }}
+      </div>
+      <div class="store-vip-card__expire">{{ expireText }}</div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.store-vip-card {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 20px 28px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #2c3e50 0%, #3d5a40 50%, #6acdbb 100%);
+  box-shadow: 0 8px 24px rgba(44, 62, 80, 0.16);
+  margin-bottom: 24px;
+}
+.store-vip-card__placeholder {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.18);
+  color: #fff;
+  font-size: 48px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.store-vip-card__info {
+  min-width: 0;
+  color: #fff;
+}
+.store-vip-card__title {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+  margin-bottom: 6px;
+}
+.store-vip-card__sub {
+  font-size: 14px;
+  opacity: 0.9;
+  margin-bottom: 6px;
+}
+.store-vip-card__expire {
+  font-size: 13px;
+  opacity: 0.78;
+}
+html.dark .store-vip-card,
+.dark .store-vip-card {
+  background: linear-gradient(135deg, #1a2332 0%, #243528 50%, #2d6b5f 100%);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+</style>

apps/web-antd/src/components/vip/VipBadgeCombo.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+/**
+ * VIP 组合徽标：等级徽标在下，期限丝带（透明底）叠在上方绑定
+ * size: sm 顶栏 / md 表格 / lg 详情 / xl 诊所设置会员卡
+ */
+withDefaults(
+  defineProps<{
+    badgeUrl?: string;
+    durationBadgeUrl?: string;
+    levelName?: string;
+    durationLabel?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+  }>(),
+  {
+    badgeUrl: '',
+    durationBadgeUrl: '',
+    levelName: '',
+    durationLabel: '',
+    size: 'md',
+  },
+);
+</script>
+<template>
+  <div
+    v-if="badgeUrl || durationBadgeUrl"
+    class="vip-badge-combo"
+    :class="[`vip-badge-combo--${size}`]"
+    :title="[durationLabel, levelName].filter(Boolean).join(' · ')"
+  >
+    <img
+      v-if="badgeUrl"
+      class="vip-badge-combo__level"
+      :src="badgeUrl"
+      :alt="levelName || '会员等级'"
+    />
+    <img
+      v-if="durationBadgeUrl"
+      class="vip-badge-combo__ribbon"
+      :src="durationBadgeUrl"
+      :alt="durationLabel || '会员类型'"
+    />
+  </div>
+  <span v-else>-</span>
+</template>
+<style scoped>
+.vip-badge-combo {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.vip-badge-combo__level {
+  object-fit: contain;
+  display: block;
+  position: relative;
+  z-index: 1;
+}
+.vip-badge-combo__ribbon {
+  position: absolute;
+  left: 50%;
+  bottom: 8%;
+  transform: translateX(-50%);
+  z-index: 2;
+  object-fit: contain;
+  pointer-events: none;
+}
+.vip-badge-combo--sm {
+  width: 52px;
+  height: 52px;
+}
+.vip-badge-combo--sm .vip-badge-combo__level {
+  width: 48px;
+  height: 48px;
+}
+.vip-badge-combo--sm .vip-badge-combo__ribbon {
+  width: 72px;
+  height: 28px;
+}
+.vip-badge-combo--md {
+  width: 64px;
+  height: 64px;
+}
+.vip-badge-combo--md .vip-badge-combo__level {
+  width: 56px;
+  height: 56px;
+}
+.vip-badge-combo--md .vip-badge-combo__ribbon {
+  width: 84px;
+  height: 30px;
+}
+.vip-badge-combo--lg {
+  width: 96px;
+  height: 96px;
+}
+.vip-badge-combo--lg .vip-badge-combo__level {
+  width: 84px;
+  height: 84px;
+}
+.vip-badge-combo--lg .vip-badge-combo__ribbon {
+  width: 120px;
+  height: 42px;
+}
+.vip-badge-combo--xl {
+  width: 140px;
+  height: 140px;
+}
+.vip-badge-combo--xl .vip-badge-combo__level {
+  width: 120px;
+  height: 120px;
+}
+.vip-badge-combo--xl .vip-badge-combo__ribbon {
+  width: 168px;
+  height: 58px;
+}
+</style>

apps/web-antd/src/components/vip/VipGate.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+/**
+ * VIP 权限显隐全局组件
+ * 用法：
+ *   <VipGate code="medical_record">有权限才渲染</VipGate>
+ *   <VipGate :code="VIP_FEATURE.AI_PRESCRIPTION" :vip="receptionVip">...</VipGate>
+ * 接诊/复诊务必传 :vip="履约诊所vip"，不要只靠登录态
+ */
+import { computed } from 'vue';
+
+import {
+  hasVipPermission,
+  levelAtLeast,
+  type StoreVipInfo,
+} from '#/utils/vip';
+
+const props = withDefaults(
+  defineProps<{
+    /** 权限码（与 xk_vip_feature.code / 等级 permissions 对齐） */
+    code?: string;
+    /** 最低等级编码 */
+    minLevel?: string;
+    /**
+     * 指定 VIP 来源（挂号履约诊所）；不传则用登录态 userInfo.vip
+     */
+    vip?: StoreVipInfo | string[] | null;
+    /** 无权限时是否渲染 fallback 插槽（默认不渲染） */
+    fallback?: boolean;
+  }>(),
+  {
+    code: '',
+    minLevel: '',
+    fallback: false,
+  },
+);
+
+const allowed = computed(() => {
+  if (props.code) {
+    // 传了 :vip 则按履约诊所判；未传则回落登录态
+    if (props.vip !== undefined) {
+      return hasVipPermission(props.code, props.vip);
+    }
+    return hasVipPermission(props.code);
+  }
+  if (props.minLevel) {
+    const vipObj = Array.isArray(props.vip) ? null : (props.vip ?? null);
+    return levelAtLeast(props.minLevel, vipObj);
+  }
+  return true;
+});
+</script>
+
+<template>
+  <slot v-if="allowed" />
+  <slot v-else-if="fallback" name="fallback" />
+</template>

apps/web-antd/src/components/vip/VipHubModal.vue

@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+/**
+ * 门店 VIP 入口弹窗
+ * 先展示两张操作卡片：开通/升级、开通记录；再分别打开对应子弹窗
+ */
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
+import VipStoreRecordsModal from '#/components/vip/VipStoreRecordsModal.vue';
+import VipUpgradeModal from '#/components/vip/VipUpgradeModal.vue';
+import { formatVipExpireAt } from '#/utils/vip';
+
+const gridApi = ref<any>();
+const onSuccess = ref<null | (() => void)>(null);
+const storeId = ref(0);
+const storeName = ref('');
+const vip = ref<Record<string, any> | null>(null);
+
+const title = computed(
+  () => `VIP管理 - ${storeName.value || storeId.value || ''}`,
+);
+
+/** 当前等级 + 时长类型 */
+const currentLevelText = computed(() => {
+  const v = vip.value;
+  if (!v) return '当前：普通会员';
+  const name = String(v.level_name || '').trim();
+  const code = String(v.level_code || '').trim();
+  const duration = String(v.duration_label || '').trim();
+  const level =
+    name && code ? `${name}（${code}）` : name || code || '普通会员';
+  return duration ? `当前：${level} · ${duration}` : `当前：${level}`;
+});
+
+/** 到期时间独立一行，打开弹窗时一眼可见 */
+const currentExpireText = computed(() => {
+  const v = vip.value;
+  if (!v) return '';
+  const code = String(v.level_code || 'V0').trim() || 'V0';
+  if (code === 'V0') return '';
+  const expire = formatVipExpireAt(v, {
+    lifetimeText: '终身',
+    withPrefix: false,
+  });
+  if (!expire) return '';
+  return expire === '终身' ? '到期时间：终身' : `到期时间：${expire}`;
+});
+
+const [UpgradeModalComp, upgradeModalApi] = useVbenModal({
+  connectedComponent: VipUpgradeModal,
+});
+const [RecordsModalComp, recordsModalApi] = useVbenModal({
+  connectedComponent: VipStoreRecordsModal,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  class: 'w-[640px]',
+  showConfirmButton: false,
+  cancelText: '关闭',
+  onCancel() {
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      storeId.value = 0;
+      storeName.value = '';
+      vip.value = null;
+      gridApi.value = null;
+      onSuccess.value = null;
+      return;
+    }
+    const data = modalApi.getData<Record<string, any>>() || {};
+    storeId.value = Number(data.store_id || 0);
+    storeName.value = String(data.store_name || '');
+    vip.value = data.vip || null;
+    gridApi.value = data.gridApi || null;
+    onSuccess.value = data.onSuccess || null;
+    modalApi.setState({ title: title.value });
+  },
+});
+
+/**
+ * 打开开通/升级弹窗
+ * 为什么不直接嵌在本弹窗：升级表单已有独立组件，复用可保持交互一致
+ */
+function openUpgrade() {
+  if (!storeId.value) return;
+  upgradeModalApi.setData({
+    store_id: storeId.value,
+    store_name: storeName.value,
+    vip: vip.value,
+    gridApi: gridApi.value,
+    onSuccess: () => {
+      onSuccess.value?.();
+      gridApi.value?.query?.();
+    },
+  });
+  upgradeModalApi.open();
+}
+
+/** 打开当前门店开通记录（含开通人） */
+function openRecords() {
+  if (!storeId.value) return;
+  recordsModalApi.setData({
+    store_id: storeId.value,
+    store_name: storeName.value,
+  });
+  recordsModalApi.open();
+}
+</script>
+
+<template>
+  <Modal>
+    <div class="vip-hub-current mb-4">
+      <VipBadgeCombo
+        size="md"
+        :badge-url="vip?.badge_url"
+        :duration-badge-url="vip?.duration_badge_url"
+        :level-name="vip?.level_name"
+        :duration-label="vip?.duration_label"
+      />
+      <div class="vip-hub-current__meta">
+        <div class="vip-hub-current__text">{{ currentLevelText }}</div>
+        <div v-if="currentExpireText" class="vip-hub-current__expire">
+          {{ currentExpireText }}
+        </div>
+      </div>
+    </div>
+    <div class="vip-hub-grid">
+      <button type="button" class="vip-hub-card" @click="openUpgrade">
+        <div class="vip-hub-card__icon">↑</div>
+        <div class="vip-hub-card__title">开通 / 升级</div>
+        <div class="vip-hub-card__desc">
+          为该门店开通或调整会员等级与时长
+        </div>
+      </button>
+      <button type="button" class="vip-hub-card" @click="openRecords">
+        <div class="vip-hub-card__icon">☰</div>
+        <div class="vip-hub-card__title">开通记录</div>
+        <div class="vip-hub-card__desc">
+          查看历史开通流水与开通人
+        </div>
+      </button>
+    </div>
+  </Modal>
+  <UpgradeModalComp />
+  <RecordsModalComp />
+</template>
+
+<style scoped>
+.vip-hub-current {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 10px;
+  background: hsl(var(--muted) / 0.25);
+}
+.vip-hub-current__meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.vip-hub-current__text {
+  font-size: 13px;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+.vip-hub-current__expire {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+.vip-hub-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.vip-hub-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  min-height: 148px;
+  padding: 18px 16px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 12px;
+  background: hsl(var(--card, var(--background)));
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background 0.15s,
+    box-shadow 0.15s;
+}
+.vip-hub-card:hover {
+  border-color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.08);
+  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.2);
+}
+.vip-hub-card__icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.12);
+}
+.vip-hub-card__title {
+  font-size: 16px;
+  font-weight: 650;
+  color: hsl(var(--foreground));
+}
+.vip-hub-card__desc {
+  font-size: 12px;
+  line-height: 1.5;
+  color: hsl(var(--muted-foreground));
+}
+@media (max-width: 560px) {
+  .vip-hub-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

apps/web-antd/src/components/vip/VipStoreRecordsModal.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+/**
+ * 门店 VIP 开通记录弹窗
+ * 按 store_id 拉取开通流水，重点展示开通人、等级、时效与开通时间
+ */
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Empty, Pagination, Spin, Tag } from 'ant-design-vue';
+
+import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
+import { getVipRecordList } from '#/views/system/vip/record/api';
+
+const storeId = ref(0);
+const storeName = ref('');
+const loading = ref(false);
+const items = ref<any[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+
+const title = computed(
+  () => `开通记录 - ${storeName.value || storeId.value || ''}`,
+);
+
+/**
+ * 拉取当前门店开通记录
+ * 为什么单独封装：弹窗打开、翻页都要复用同一套查询参数
+ */
+async function loadList() {
+  if (!storeId.value) {
+    items.value = [];
+    total.value = 0;
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await getVipRecordList({
+      page: page.value,
+      pageSize: pageSize.value,
+      store_id: storeId.value,
+    });
+    items.value = Array.isArray(res?.items) ? res.items : [];
+    total.value = Number(res?.total || 0);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 等级展示：只展示名称，不展示 CUSTOM/V1 等编码 */
+function levelLabel(row: Record<string, any>) {
+  return String(row?.level_name || '').trim() || '—';
+}
+
+/** 开通人兜底：无操作人时标明系统/未知 */
+function operatorLabel(row: Record<string, any>) {
+  const name = String(row?.operator_name || '').trim();
+  if (name) return name;
+  const id = Number(row?.operator_id || 0);
+  if (id > 0) return `管理员#${id}`;
+  return '—';
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  class: 'w-[820px]',
+  showConfirmButton: false,
+  cancelText: '关闭',
+  onCancel() {
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      storeId.value = 0;
+      storeName.value = '';
+      items.value = [];
+      total.value = 0;
+      page.value = 1;
+      return;
+    }
+    const data = modalApi.getData<Record<string, any>>() || {};
+    storeId.value = Number(data.store_id || 0);
+    storeName.value = String(data.store_name || '');
+    page.value = 1;
+    modalApi.setState({ title: title.value });
+    await loadList();
+  },
+});
+
+/** 分页切换 */
+function onPageChange(current: number, size: number) {
+  page.value = current;
+  pageSize.value = size;
+  loadList();
+}
+</script>
+
+<template>
+  <Modal>
+    <Spin :spinning="loading">
+      <Empty
+        v-if="!loading && !items.length"
+        description="暂无开通记录"
+      />
+      <div v-else class="vip-record-list">
+        <div
+          v-for="row in items"
+          :key="row.id"
+          class="vip-record-card"
+        >
+          <div class="vip-record-card__badge">
+            <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"
+            />
+          </div>
+          <div class="vip-record-card__body">
+            <div class="vip-record-card__title">
+              {{ levelLabel(row) }}
+              <Tag class="ml-2">{{ row.duration_label || '—' }}</Tag>
+              <Tag color="blue">{{ row.open_type_txt || '—' }}</Tag>
+            </div>
+            <div class="vip-record-card__meta">
+              <span>开通人：{{ operatorLabel(row) }}</span>
+              <span>开通时间：{{ row.created_at || '—' }}</span>
+              <span>到期：{{ row.expire_at || '—' }}</span>
+            </div>
+            <div class="vip-record-card__meta">
+              <span>原价 ¥{{ row.original_price ?? '0.00' }}</span>
+              <span>实付 ¥{{ row.pay_amount ?? '0.00' }}</span>
+              <span v-if="row.remark">备注：{{ row.remark }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="total > 0" class="mt-4 flex justify-end">
+        <Pagination
+          v-model:current="page"
+          v-model:page-size="pageSize"
+          :total="total"
+          size="small"
+          show-size-changer
+          @change="onPageChange"
+        />
+      </div>
+    </Spin>
+  </Modal>
+</template>
+
+<style scoped>
+.vip-record-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 520px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+.vip-record-card {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding: 12px 14px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 10px;
+  background: hsl(var(--card, var(--background)));
+}
+.vip-record-card__badge {
+  flex-shrink: 0;
+}
+.vip-record-card__body {
+  min-width: 0;
+  flex: 1;
+}
+.vip-record-card__title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+.vip-record-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  margin-top: 6px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+</style>

apps/web-antd/src/components/vip/VipUpgradeModal.vue

@@ -0,0 +1,496 @@
+<script lang="ts" setup>
+/**
+ * VIP 升级/开通弹窗
+ * 等级/时长用两行横向滑动单选卡片，预览丝带随所选时长自动切换
+ */
+import { computed, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Input, InputNumber, message } from 'ant-design-vue';
+
+import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
+import { getVipDurationOption } from '#/views/system/vip/duration/api';
+import { getVipLevelOption } from '#/views/system/vip/level/api';
+import {
+  getVipDurationPresets,
+  openVipStore,
+} from '#/views/system/vip/store/api';
+
+/** 时长预设 → 时效类型 code（与后端 VipDurationHelper 对齐；keep 走当前会员 duration_type） */
+const PRESET_TO_DURATION: Record<string, string> = {
+  '7d': 'trial',
+  '1w': 'week',
+  '1m': 'month',
+  '3m': 'month',
+  '6m': 'month',
+  '1y': 'year',
+  xy: 'year',
+  lifetime: 'lifetime',
+};
+
+const gridApi = ref<any>();
+const onSuccess = ref<null | (() => void)>(null);
+const storeId = ref(0);
+const storeName = ref('');
+/** 打开弹窗时带入的当前门店 VIP，用于判断能否「继承剩余时间」 */
+const currentVip = ref<Record<string, any> | null>(null);
+const levelId = ref<number | undefined>();
+const durationPreset = ref<string | undefined>();
+const customYears = ref<number | undefined>();
+const remark = ref('');
+
+const levels = ref<any[]>([]);
+const presets = ref<{ label: string; value: string }[]>([]);
+const durationTypes = ref<any[]>([]);
+
+const selectedLevel = computed(() =>
+  levels.value.find((i) => i.id === levelId.value),
+);
+
+/**
+ * 是否可继承剩余时间：非普通会员（非 V0）且未过期
+ * 普通会员没有可继承的到期时间，不展示/不默认 keep
+ */
+const canKeepDuration = computed(() => {
+  const v = currentVip.value;
+  if (!v) return false;
+  const code = String(v.level_code || 'V0').trim() || 'V0';
+  if (code === 'V0') return false;
+  const expireAt = Number(v.expire_at || 0);
+  // expire_at=0 表示终身，视为可继承；>0 须未过期
+  if (expireAt > 0 && expireAt * 1000 <= Date.now()) return false;
+  return true;
+});
+
+/** 按时长预设解析对应丝带资源 */
+function ribbonByPreset(preset?: string) {
+  if (preset === 'keep') {
+    const code = String(currentVip.value?.duration_type || '').trim();
+    if (!code) return null;
+    return durationTypes.value.find((i) => i.code === code) || null;
+  }
+  const code = PRESET_TO_DURATION[preset || ''] || '';
+  if (!code) return null;
+  return durationTypes.value.find((i) => i.code === code) || null;
+}
+
+const selectedDurationType = computed(() =>
+  ribbonByPreset(durationPreset.value),
+);
+
+/** 时长卡片：普通会员隐藏 keep；其它预设照常 */
+const durationCards = computed(() =>
+  presets.value
+    .filter((p) => p.value !== 'keep' || canKeepDuration.value)
+    .map((p) => {
+      const ribbon = ribbonByPreset(p.value);
+      return {
+        ...p,
+        ribbonUrl: ribbon?.badge_url || '',
+        ribbonName: ribbon?.name || '',
+      };
+    }),
+);
+
+const previewBadgeUrl = computed(() => selectedLevel.value?.badge_url || '');
+const previewRibbonUrl = computed(
+  () => selectedDurationType.value?.badge_url || '',
+);
+const previewLevelName = computed(
+  () => selectedLevel.value?.name || '请选择等级',
+);
+const previewDurationLabel = computed(() => {
+  if (!durationPreset.value) return '请选择时长';
+  if (durationPreset.value === 'keep') {
+    const label = String(currentVip.value?.duration_label || '').trim();
+    const expireHint = formatVipExpireHint(currentVip.value);
+    if (label && expireHint) return `继承剩余：${label}（${expireHint}）`;
+    if (label) return `继承剩余：${label}`;
+    return '继承剩余时间（不改动）';
+  }
+  const preset = presets.value.find((p) => p.value === durationPreset.value);
+  return preset?.label || selectedDurationType.value?.name || '请选择时长';
+});
+
+/**
+ * 格式化当前会员到期提示（终身 / 已格式化字符串 / 时间戳）
+ */
+function formatVipExpireHint(v: Record<string, any> | null | undefined): string {
+  if (!v) return '';
+  if (v.is_lifetime) return '终身';
+  const raw = v.expire_at;
+  if (raw == null || raw === '' || raw === 0) return '';
+  if (typeof raw === 'string' && Number.isNaN(Number(raw))) {
+    return `至 ${raw}`;
+  }
+  const n = Number(raw);
+  if (!(n > 0)) return '';
+  const d = new Date(n * 1000);
+  if (Number.isNaN(d.getTime())) return '';
+  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())}:${pad(d.getSeconds())}`;
+}
+
+const title = computed(() => `升级VIP - ${storeName.value || storeId.value}`);
+
+/** 选择会员等级 */
+function selectLevel(id: number) {
+  levelId.value = id;
+}
+
+/** 选择开通时长（同步驱动预览丝带） */
+function selectDuration(value: string) {
+  durationPreset.value = value;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    if (!levelId.value) {
+      message.warning('请选择会员等级');
+      return;
+    }
+    if (!durationPreset.value) {
+      message.warning('请选择开通时长');
+      return;
+    }
+    if (
+      durationPreset.value === 'xy' &&
+      !(Number(customYears.value) > 0)
+    ) {
+      message.warning('请填写有效年数');
+      return;
+    }
+    modalApi.setState({ confirmLoading: true });
+    try {
+      await openVipStore({
+        store_id: storeId.value,
+        level_id: levelId.value,
+        duration_preset: durationPreset.value,
+        custom_years: customYears.value || 0,
+        remark: remark.value || '',
+      });
+      message.success('开通成功');
+      gridApi.value?.query?.();
+      onSuccess.value?.();
+      modalApi.close();
+    } finally {
+      modalApi.setState({ confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      levelId.value = undefined;
+      durationPreset.value = undefined;
+      customYears.value = undefined;
+      remark.value = '';
+      currentVip.value = null;
+      return;
+    }
+    const data = modalApi.getData<Record<string, any>>() || {};
+    gridApi.value = data.gridApi;
+    onSuccess.value = data.onSuccess || null;
+    storeId.value = Number(data.store_id || 0);
+    storeName.value = data.store_name || '';
+    currentVip.value = data.vip || null;
+    const [levelList, presetList, durationList] = await Promise.all([
+      getVipLevelOption(),
+      getVipDurationPresets(),
+      getVipDurationOption(),
+    ]);
+    levels.value = levelList || [];
+    presets.value = (presetList || []).map((i: any) => ({
+      label: i.label,
+      value: i.value,
+    }));
+    durationTypes.value = durationList || [];
+    // 回填当前 VIP 等级（便于续期/改档）
+    if (data.vip?.level_id) {
+      levelId.value = Number(data.vip.level_id);
+    }
+    // 非普通会员：默认选「继承剩余时间」，到期日不改动
+    if (canKeepDuration.value) {
+      durationPreset.value = 'keep';
+    }
+  },
+});
+
+watch(durationPreset, (v) => {
+  if (v !== 'xy') customYears.value = undefined;
+});
+</script>
+<template>
+  <Modal :title="title" class="w-[50%]">
+    <!-- 预览：徽标卡片 + 丝带（随时长自动适配） -->
+    <div class="vip-upgrade-preview mb-5">
+      <VipBadgeCombo
+        size="xl"
+        :badge-url="previewBadgeUrl"
+        :duration-badge-url="previewRibbonUrl"
+        :level-name="previewLevelName"
+        :duration-label="previewDurationLabel"
+      />
+      <div class="vip-upgrade-preview__text">
+        <div class="vip-upgrade-preview__title">{{ previewLevelName }}</div>
+        <div class="vip-upgrade-preview__sub">{{ previewDurationLabel }}</div>
+        <div v-if="selectedLevel" class="vip-upgrade-preview__price">
+          原价 ¥{{ selectedLevel.price }} · 管理员开通实付 ¥0
+        </div>
+      </div>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <div class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-200">
+          会员等级
+        </div>
+        <div class="vip-pick-scroll" role="listbox" aria-label="会员等级">
+          <button
+            v-for="item in levels"
+            :key="item.id"
+            type="button"
+            class="vip-pick-card"
+            :class="{ 'vip-pick-card--active': levelId === item.id }"
+            role="option"
+            :aria-selected="levelId === item.id"
+            @click="selectLevel(item.id)"
+          >
+            <img
+              v-if="item.badge_url"
+              :src="item.badge_url"
+              alt=""
+              class="vip-pick-card__badge"
+            />
+            <div
+              v-else
+              class="vip-pick-card__badge vip-pick-card__badge--empty"
+            >
+              {{ item.code }}
+            </div>
+            <div class="vip-pick-card__name">{{ item.name }}</div>
+            <div class="vip-pick-card__meta">
+              {{ item.code }} · ¥{{ item.price }}
+            </div>
+          </button>
+        </div>
+      </div>
+      <div>
+        <div class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-200">
+          开通时长
+        </div>
+        <div class="vip-pick-scroll" role="listbox" aria-label="开通时长">
+          <button
+            v-for="item in durationCards"
+            :key="item.value"
+            type="button"
+            class="vip-pick-card vip-pick-card--duration"
+            :class="{ 'vip-pick-card--active': durationPreset === item.value }"
+            role="option"
+            :aria-selected="durationPreset === item.value"
+            @click="selectDuration(item.value)"
+          >
+            <img
+              v-if="item.ribbonUrl"
+              :src="item.ribbonUrl"
+              alt=""
+              class="vip-pick-card__ribbon"
+            />
+            <div
+              v-else
+              class="vip-pick-card__ribbon vip-pick-card__ribbon--empty"
+            >
+              丝带
+            </div>
+            <div class="vip-pick-card__name">{{ item.label }}</div>
+          </button>
+        </div>
+      </div>
+      <div v-if="durationPreset === 'xy'">
+        <div class="mb-1 text-sm text-gray-600 dark:text-gray-300">
+          自定义年数
+        </div>
+        <InputNumber
+          v-model:value="customYears"
+          class="w-full"
+          :min="1"
+          :max="99"
+          placeholder="请输入年数"
+        />
+      </div>
+      <div>
+        <div class="mb-1 text-sm text-gray-600 dark:text-gray-300">备注</div>
+        <Input.TextArea v-model:value="remark" :rows="2" placeholder="选填" />
+      </div>
+    </div>
+  </Modal>
+</template>
+<style scoped>
+.vip-upgrade-preview {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 20px 24px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #2c3e50 0%, #3d5a40 50%, #6acdbb 100%);
+  color: #fff;
+}
+.vip-upgrade-preview__title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+.vip-upgrade-preview__sub {
+  font-size: 13px;
+  opacity: 0.9;
+  margin-bottom: 6px;
+}
+.vip-upgrade-preview__price {
+  font-size: 12px;
+  opacity: 0.8;
+}
+/* 两行 + 横向滑动的单选卡片轨道 */
+.vip-pick-scroll {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(2, minmax(0, auto));
+  grid-auto-columns: 112px;
+  gap: 10px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 4px 2px 10px;
+  scroll-snap-type: x proximity;
+  -webkit-overflow-scrolling: touch;
+}
+.vip-pick-scroll::-webkit-scrollbar {
+  height: 6px;
+}
+.vip-pick-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.18);
+  border-radius: 999px;
+}
+.vip-pick-card {
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 108px;
+  padding: 10px 8px;
+  border: 1.5px solid #e8e8e8;
+  border-radius: 12px;
+  background: #fff;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background 0.15s ease;
+  text-align: center;
+}
+.vip-pick-card:hover {
+  border-color: #6acdbb;
+}
+.vip-pick-card--active {
+  border-color: #6acdbb;
+  background: rgba(106, 205, 187, 0.1);
+  box-shadow: 0 0 0 2px rgba(106, 205, 187, 0.25);
+}
+.vip-pick-card__badge {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+.vip-pick-card__badge--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #f5f5f5;
+  color: #999;
+  font-size: 12px;
+  font-weight: 600;
+}
+.vip-pick-card__ribbon {
+  width: 88px;
+  height: 28px;
+  object-fit: contain;
+}
+.vip-pick-card__ribbon--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 88px;
+  height: 28px;
+  border-radius: 6px;
+  background: #f5f5f5;
+  color: #bbb;
+  font-size: 11px;
+}
+.vip-pick-card--duration {
+  min-height: 88px;
+}
+.vip-pick-card__name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1f1f1f;
+  line-height: 1.2;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vip-pick-card__meta {
+  font-size: 11px;
+  color: #8c8c8c;
+  line-height: 1.2;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* ========== 暗色适配（html.dark / .dark）========== */
+html.dark .vip-upgrade-preview,
+.dark .vip-upgrade-preview {
+  background: linear-gradient(135deg, #1a2332 0%, #243528 50%, #2d6b5f 100%);
+  box-shadow: inset 0 0 0 1px rgba(106, 205, 187, 0.18);
+}
+html.dark .vip-pick-scroll::-webkit-scrollbar-thumb,
+.dark .vip-pick-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.22);
+}
+html.dark .vip-pick-card,
+.dark .vip-pick-card {
+  border-color: #3f3f46;
+  background: #1f1f23;
+}
+html.dark .vip-pick-card:hover,
+.dark .vip-pick-card:hover {
+  border-color: #6acdbb;
+  background: #27272a;
+}
+html.dark .vip-pick-card--active,
+.dark .vip-pick-card--active {
+  border-color: #6acdbb;
+  background: rgba(106, 205, 187, 0.16);
+  box-shadow: 0 0 0 2px rgba(106, 205, 187, 0.28);
+}
+html.dark .vip-pick-card__badge--empty,
+.dark .vip-pick-card__badge--empty,
+html.dark .vip-pick-card__ribbon--empty,
+.dark .vip-pick-card__ribbon--empty {
+  background: #2a2a2e;
+  color: #a1a1aa;
+}
+html.dark .vip-pick-card__name,
+.dark .vip-pick-card__name {
+  color: #f4f4f5;
+}
+html.dark .vip-pick-card__meta,
+.dark .vip-pick-card__meta {
+  color: #a1a1aa;
+}
+</style>

apps/web-antd/src/components/warehouse-drug-search/warehouse-available-drug-search.vue

@@ -43,6 +43,10 @@ export interface WarehouseDrugItem {
   id: number;
   drug_name: string;
   pinyin_simple?: string;
+  /** 关键词命中的别名（后端 matched_alias） */
+  matched_alias?: string;
+  /** 命中别名对应拼音展示 */
+  matched_alias_pinyin?: string;
   specification?: string;
   image?: string;
   type?: number;
@@ -212,8 +216,27 @@ watch(
             <div v-else class="warehouse-drug-item__img-placeholder">无图</div>
           </div>
           <div class="warehouse-drug-item__info">
-            <div class="warehouse-drug-item__name">{{ item.drug_name }}</div>
+            <div
+              class="warehouse-drug-item__name"
+              :title="
+                item.matched_alias
+                  ? `${item.drug_name}（别名：${item.matched_alias}）`
+                  : item.drug_name
+              "
+            >
+              {{ item.drug_name }}
+            </div>
+            <!-- 与开方气泡一致：命中别名时展示别名及拼音 -->
+            <div v-if="item.matched_alias" class="warehouse-drug-item__alias">
+              别名：{{ item.matched_alias }}
+              <span v-if="item.matched_alias_pinyin">
+                （{{ item.matched_alias_pinyin }}）
+              </span>
+            </div>
             <div class="warehouse-drug-item__meta">
+              <span v-if="item.pinyin_simple && !item.matched_alias" class="warehouse-drug-item__py">
+                拼音：{{ item.pinyin_simple }}
+              </span>
               <span v-if="item.specification" class="warehouse-drug-item__spec">
                 规格：{{ item.specification }}
               </span>
@@ -321,7 +344,17 @@ watch(
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    margin-bottom: 2px;
+  }
+
+  &__alias {
+    font-size: 12px;
+    color: #8c8c8c;
+    line-height: 1.3;
     margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__meta {
@@ -332,6 +365,10 @@ watch(
     color: #999;
   }
 
+  &__py {
+    color: #8c8c8c;
+  }
+
   &__spec {
     color: #666;
   }

apps/web-antd/src/components/wx-user-patient/WxUserPatientDetailModal.vue

@@ -336,6 +336,14 @@ const orderColumns = [
                 bordered
                 size="small"
               >
+                <Descriptions.Item label="现病史">
+                  {{
+                    historyText(
+                      profile.health_inquiry.present_status,
+                      profile.health_inquiry.present_history,
+                    )
+                  }}
+                </Descriptions.Item>
                 <Descriptions.Item label="既往史">
                   {{
                     historyText(

apps/web-antd/src/composables/use-file-gallery-filter.ts

@@ -1,16 +1,15 @@
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, toValue, type MaybeRefOrGetter } from 'vue';
 
 import type { FileTypeItem } from '#/api/core/file-gallery';
 import { getFileTypes } from '#/api/core/file-gallery';
 import type { FileGroupOptionItem } from '#/api/core/file-group';
 import { useFileGroupCache } from '#/composables/use-file-group-cache';
+import { ALL_TYPE_ICON } from '#/composables/use-file-type-icon';
 
 export const ALL_TYPE_VALUE = -1;
 
 export const ALL_GROUP_VALUE = 0;
 
-import { ALL_TYPE_ICON } from '#/composables/use-file-type-icon';
-
 export interface FileGalleryTab {
   key: string;
   value: number;
@@ -18,7 +17,13 @@ export interface FileGalleryTab {
   icon?: string;
 }
 
-export function useFileGalleryFilter(storageKey: string) {
+/**
+ * 文件库筛选（类型 tab + 分组 + 关键字）
+ * @param storageKeyInput localStorage 键；支持动态 getter，便于按 acceptTypes 隔离记忆
+ */
+export function useFileGalleryFilter(
+  storageKeyInput: MaybeRefOrGetter<string> = 'file-picker-active-type',
+) {
   const fileTypes = ref<FileTypeItem[]>([]);
   const activeType = ref<number>(ALL_TYPE_VALUE);
   const activeGroupId = ref<number>(ALL_GROUP_VALUE);
@@ -27,6 +32,10 @@ export function useFileGalleryFilter(storageKey: string) {
 
   const { groupOptions, loadGroupOptions } = useFileGroupCache();
 
+  function resolveStorageKey() {
+    return toValue(storageKeyInput);
+  }
+
   const tabs = computed<FileGalleryTab[]>(() => [
     { key: 'all', value: ALL_TYPE_VALUE, label: '全部', icon: ALL_TYPE_ICON },
     ...fileTypes.value.map((item) => ({
@@ -48,7 +57,7 @@ export function useFileGalleryFilter(storageKey: string) {
   ]);
 
   function restoreActiveType() {
-    const saved = localStorage.getItem(storageKey);
+    const saved = localStorage.getItem(resolveStorageKey());
     if (saved === null) {
       activeType.value = ALL_TYPE_VALUE;
       return;
@@ -64,7 +73,7 @@ export function useFileGalleryFilter(storageKey: string) {
 
   function setActiveType(value: number) {
     activeType.value = value;
-    localStorage.setItem(storageKey, String(value));
+    localStorage.setItem(resolveStorageKey(), String(value));
   }
 
   function setActiveGroupId(value: number) {

apps/web-antd/src/constants/sensitive-fields.ts

@@ -17,6 +17,8 @@ export const ENCRYPT_FIELDS = new Set([
   'password',
   'patient_mobile',
   'phone',
+  'open_api_key',
+  'api_key',
 ]);
 
 /** 需要生成 _tm_text 并默认脱敏展示的字段（encrypt_only） */
@@ -96,7 +98,7 @@ export function maskSensitiveField(field: string, plainText: unknown): string {
     return '';
   }
   const str = String(plainText);
-  if (field === 'password') {
+  if (field === 'password' || field === 'api_key' || field === 'open_api_key') {
     return '*'.repeat(Math.max(str.length, 6));
   }
   if (PHONE_FIELDS.has(field)) {

apps/web-antd/src/layouts/auth.vue

@@ -8,6 +8,7 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 // const logo = 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/logo.png?Expires=1734595037&OSSAccessKeyId=TMP.3KhpnCAjxkdTGWSj1ZCdYe3e9c6MBfEVZwN1CiHdUKUAT2D1mPEpACYgYMkUiQDVqy9Zqb7VqgUoh21W37FC3CztogHJPN&Signature=KmymeelO2OZxaAmvm2ACDK5UfF8%3D';
 </script>
 
@@ -15,6 +16,7 @@ const logo = computed(() => preferences.logo.source);
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
     :version="preferences.app.version"

apps/web-antd/src/layouts/basic.vue

@@ -1,185 +1,197 @@
 <script lang="ts" setup>
+/**
+ * 管理端基础布局：铃铛站内信轮询 + 动作宿主挂载
+ */
 import type { NotificationItem } from '@vben/layouts';
 
-import {computed, onUnmounted, ref, watch} from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 
-import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
+import { AuthenticationLoginExpiredModal, VbenIcon } from '@vben/common-ui';
-
-// import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
-// import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
+import { $t } from '@vben/locales';
-// import { CircleHelp } from '@vben/icons';
 import {
   BasicLayout,
   LockScreen,
   Notification,
   UserDropdown,
 } from '@vben/layouts';
-import { preferences } from '@vben/preferences';
+import { preferences, usePreferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
-// import { openWindow } from '@vben/utils';
 
-import {
+import { notification } from 'ant-design-vue';
-  Bell,
+import { Bell, Users } from 'lucide-vue-next';
-  CalendarClock,
-  Megaphone,
-  Users,
-} from 'lucide-vue-next';
 
-// import { $t } from '#/locales';
+import DoctorTransferFloat from '#/components/doctor-transfer-float/DoctorTransferFloat.vue';
-import { useAuthStore } from '#/store';
+import HeaderVipBadge from '#/components/vip/HeaderVipBadge.vue';
-import LoginForm from '#/views/_core/authentication/login.vue';
 import SwitchAccountModal from '#/layouts/components/SwitchAccountModal.vue';
-import { useRouter } from 'vue-router';
+import { useAuthStore } from '#/store';
-import {getNoticeListApi, readAllApi} from "#/views/notice/api";
+import { formatTimeToRelative } from '#/util/tool';
-import {formatTimeToRelative} from "#/util/tool";
+import LoginForm from '#/views/_core/authentication/login.vue';
-import {notification} from "ant-design-vue";
+import NoticeActionHost from '#/views/notice/action/NoticeActionHost.vue';
+import {
+  emitNoticeRefresh,
+  onNoticeRefresh,
+  openNoticeAction,
+} from '#/views/notice/action/bus';
+import { resolveNoticeColor } from '#/views/notice/action/types';
+import {
+  getNoticeListApi,
+  getNoticeUnreadCountApi,
+  readAllApi,
+  readApi,
+} from '#/views/notice/api';
 
 const router = useRouter();
 const switchAccountModalRef = ref<InstanceType<typeof SwitchAccountModal>>();
-
-// 样式相关
-const typeIcons = {
-  0: Megaphone,
-  1: Bell,
-  2: CalendarClock,
-};
-
-const typeColors = {
-  0: 'text-sky-500',
-  1: 'text-amber-500',
-  2: 'text-emerald-500',
-};
-
-const typeBgColors = {
-  0: 'bg-sky-50',
-  1: 'bg-amber-50',
-  2: 'bg-emerald-50',
-};
-
-const typeBorderColors = {
-  0: 'border-sky-200',
-  1: 'border-amber-200',
-  2: 'border-emerald-200',
-};
-
 const notifications = ref<NotificationItem[]>([]);
+const unreadCount = ref(0);
 
-// 获取消息列表数据
+/** 拉取未读列表 + 角标数字 */
 const getNoticeList = async () => {
   try {
-    const res = await getNoticeListApi({
+    const [res, countRes] = await Promise.all([
-      status: 0,
+      getNoticeListApi({ status: 0, page: 1, pageSize: 20 }),
-    });
+      getNoticeUnreadCountApi().catch(() => null),
-    let message = '未读消息';
+    ]);
-    if (res.items.length > 0) {
+    const items = res?.items || [];
-      if (res.items.length > notifications.value.length) {
+    const prevLen = notifications.value.length;
-        if (notifications.value.length === 0) {
+    if (items.length > prevLen && prevLen > 0) {
-          message = '新消息';
+      notification.info({
-        }
+        message: '您有新消息',
-        notification.info({
+        description: `您有 ${items.length} 条未读消息请注意查收`,
-          message: `您有${message}`,
+        duration: 5,
-          description: `您有 ${res.items.length} 条${message}请注意查收`,
+      });
-          duration: 5,
-        });
-      }
-
-      notifications.value = res.items.map(item => ({
-        id: item.id,
-        icon: typeIcons[item.type],
-        // 将API返回的数据映射到组件需要的格式
-        message: item.title,
-        title: getMessageTypeName(item.type),
-        date: formatTimeToRelative(item.created_at),
-        color: typeColors[item.type],
-        isRead: item.status
-      }));
-    } else {
-      notifications.value = [];
     }
+    notifications.value = items.map((item: any) => {
+      const color = resolveNoticeColor(item.type_color);
+      return {
+        id: item.id,
+        // Notification 默认用组件当 icon；我们走自定义 content 槽，这里占位即可
+        icon: Bell as any,
+        message: item.detail || item.type_name || '',
+        title: item.title || '通知',
+        date: formatTimeToRelative(item.created_at),
+        color: color.text,
+        colorBg: color.bg,
+        isRead: Number(item.status) === 1,
+        status: item.status,
+        type_code: item.type_code,
+        type_name: item.type_name,
+        type_icon: item.type_icon,
+        type_color: item.type_color,
+        action_type: item.action_type,
+        action_payload: item.action_payload,
+        detail: item.detail,
+        content: item.content,
+        edit_type: item.edit_type,
+        priority: item.priority,
+        raw: item,
+      };
+    });
+    unreadCount.value = Number(
+      countRes?.count ?? res?.unread_total ?? items.length,
+    );
   } catch (error) {
     console.error('获取消息列表失败:', error);
   }
 };
 getNoticeList();
-// 每隔二十秒刷新一次
 let intervalId = setInterval(getNoticeList, 20_000);
 
-// 封装定时器重启逻辑
 const restartInterval = () => {
   clearInterval(intervalId);
-  getNoticeList(); // 立即获取最新数据
+  getNoticeList();
   intervalId = setInterval(getNoticeList, 20_000);
 };
 
-// 处理跨标签页修改
+const handleStorageChange = (event: StorageEvent) => {
-const handleStorageChange = (event) => {
   if (event.key === 'readStatus') {
     restartInterval();
   }
 };
 
-// 处理当前标签页修改（核心新增部分）
-const handleLocalChange = () => {
-  restartInterval();
-};
-
-// 添加双重监听
-window.addEventListener('storage', handleStorageChange); // 跨标签页监听
 const originalSetItem = localStorage.setItem.bind(localStorage);
-
-// 拦截当前页的 localStorage.setItem 操作
 localStorage.setItem = (key, value) => {
   originalSetItem(key, value);
   if (key === 'readStatus') {
-    handleLocalChange(); // 手动触发当前页回调
+    restartInterval();
   }
 };
 
-// 组件卸载时清理
+window.addEventListener('storage', handleStorageChange);
+const stopRefreshListen = onNoticeRefresh(() => restartInterval());
+
 onUnmounted(() => {
   clearInterval(intervalId);
   window.removeEventListener('storage', handleStorageChange);
-  localStorage.setItem = originalSetItem; // 恢复原始方法
+  localStorage.setItem = originalSetItem;
+  stopRefreshListen();
 });
 
-// 消息类型定义
-const messageTypes = [
-  { id: -1, name: '全部消息' },
-  { id: 0, name: '系统公告', icon: Megaphone },
-  { id: 1, name: '系统通知', icon: Bell },
-  { id: 2, name: '周报提醒', icon: CalendarClock },
-];
-// 根据类型ID获取类型名称
-const getMessageTypeName = (typeId) => {
-  const type = messageTypes.find(t => t.id === typeId);
-  return type ? type.name : '未知类型';
-};
 const goNoticeList = () => {
-  // TODO 跳转通知列表
   router.push('/notice/list');
 };
 
-// 处理消息点击
+/** 从铃铛列表移除并扣减角标 */
-const handleItemClick = (item) => {
+function removeFromBell(item: NotificationItem) {
-  notifications.value.forEach((value) => {
+  notifications.value = notifications.value.filter((n) => n.id !== item.id);
-    if (value.id === item.id) {
+  unreadCount.value = Math.max(0, unreadCount.value - 1);
-      value.status = 1;
+}
-      value.isRead = 1;
+
-    }
+/** 行点击：立刻取消未读并打开场景 */
+const handleItemClick = async (item: NotificationItem) => {
+  const raw = (item as any).raw || item;
+  const wasUnread = !item.isRead;
+  item.isRead = true;
+  if (wasUnread) {
+    removeFromBell(item);
+  }
+  await openNoticeAction({
+    ...raw,
+    id: item.id,
+    status: wasUnread ? 0 : 1,
   });
-  router.push(`/notice/detail/${item.id}`);
 };
 
+const handleClick = async (item: NotificationItem) => {
+  await handleItemClick(item);
+};
+
+/** 勾选已读：只标已读，不打开详情 */
+async function handleMarkRead(item: NotificationItem) {
+  if (item.isRead) return;
+  item.isRead = true;
+  removeFromBell(item);
+  try {
+    await readApi(Number(item.id));
+    emitNoticeRefresh();
+  } catch {
+    /* ignore */
+  }
+}
+
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
 const { destroyWatermark, updateWatermark } = useWatermark();
-const showDot = computed(() =>
+const { isDark } = usePreferences();
-  notifications.value.some((item) => !item.isRead),
+const showDot = computed(() => unreadCount.value > 0);
-);
+
+const showDoctorTransfer = computed(() => {
+  const info = userStore.userInfo as Record<string, any> | null | undefined;
+  if (!info) return false;
+  return !!(info.doctor_id && info.store_id);
+});
 
 const menus = computed(() => [
+  {
+    handler: () => {
+      router.push({ name: 'Profile' });
+    },
+    icon: 'lucide:user',
+    text: $t('page.auth.profile'),
+  },
   {
     handler: () => {
       switchAccountModalRef.value?.openModal();
@@ -201,7 +213,20 @@ async function handleLogout() {
 function handleNoticeClear() {
   readAllApi().then(() => {
     notifications.value = [];
-    // 成功后可以重新获取数据或者直接更新本地状态
+    unreadCount.value = 0;
+    notification.success({
+      message: '标记成功',
+      duration: 2,
+    });
+    emitNoticeRefresh();
+  });
+}
+
+/** 全部已读：必须走后端 API */
+function handleMakeAll() {
+  readAllApi().then(() => {
+    notifications.value = [];
+    unreadCount.value = 0;
     notification.success({
       message: '标记成功',
       duration: 2,
@@ -209,49 +234,100 @@ function handleNoticeClear() {
   });
 }
 
-function handleMakeAll() {
-  notifications.value.forEach((item) => (item.isRead = true));
-}
 watch(
-  () => preferences.app.watermark,
+  () => ({
-  async (enable) => {
+    enable: preferences.app.watermark,
+    isDark: isDark.value,
+  }),
+  async ({ enable }) => {
     if (enable) {
       await updateWatermark({
-        // 这里更改水印内容
-        // content: `${userStore.userInfo?.nick_name || import.meta.env.VITE_APP_TITLE}`,
         content: `${userStore.userInfo?.nick_name}\r\n${userStore.userInfo?.phone || import.meta.env.VITE_APP_TITLE}`,
       });
     } else {
       destroyWatermark();
     }
   },
-  {
+  { immediate: true },
-    immediate: true,
-  },
 );
 </script>
 
 <template>
-  <BasicLayout @clear-preferences-and-logout="handleLogout">
+  <BasicLayout
+    :avatar
+    :text="userStore.userInfo?.realName"
+    @clear-preferences-and-logout="handleLogout"
+    @logout="handleLogout"
+  >
+    <template #header-right-55>
+      <DoctorTransferFloat v-if="showDoctorTransfer" />
+    </template>
     <template #user-dropdown>
-      <UserDropdown
+      <!-- VIP 徽标放在头像左侧，与用户下拉并排 -->
-        :avatar
+      <div class="flex items-center">
-        :description="userStore.userInfo?.email"
+        <HeaderVipBadge />
-        :menus
+        <UserDropdown
-        :tag-text="userStore.userInfo?.roles?.name"
+          :avatar
-        :text="userStore.userInfo?.nick_name"
+          :menus
-        @logout="handleLogout"
+          :text="userStore.userInfo?.nick_name"
-      />
+          :description="userStore.userInfo?.email"
+          :tag-text="userStore.userInfo?.roles?.name"
+          @clear-preferences-and-logout="handleLogout"
+          @logout="handleLogout"
+        />
+      </div>
     </template>
     <template #notification>
       <Notification
         :dot="showDot"
+        :count="unreadCount"
         :notifications="notifications"
         @clear="handleNoticeClear"
         @make-all="handleMakeAll"
-        @read="handleItemClick"
+        @read="handleMarkRead"
         @view-all="goNoticeList"
-      />
+        @on-click="handleClick"
+      >
+        <template #content="{ item }">
+          <span
+            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>
+          <div class="min-w-0 flex-1 pr-8 leading-none">
+            <div class="mb-1 flex items-center gap-2">
+              <span
+                v-if="(item as any).type_name"
+                class="truncate text-[11px] font-semibold"
+                :class="(item as any).color"
+              >
+                {{ (item as any).type_name }}
+              </span>
+            </div>
+            <p class="truncate text-sm font-semibold text-foreground">
+              {{ item.title }}
+            </p>
+            <p
+              v-if="item.message"
+              class="mt-1 line-clamp-2 text-xs text-muted-foreground"
+            >
+              {{ item.message }}
+            </p>
+            <p class="mt-1 text-xs text-muted-foreground">{{ item.date }}</p>
+          </div>
+        </template>
+      </Notification>
+      <NoticeActionHost />
     </template>
     <template #extra>
       <AuthenticationLoginExpiredModal

apps/web-antd/src/locales/index.ts

@@ -1,7 +1,9 @@
-import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
 import type { Locale } from 'ant-design-vue/es/locale';
 
 import type { App } from 'vue';
+
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
 import { ref } from 'vue';
 
 import {

apps/web-antd/src/locales/langs/en-US/demos.json

@@ -6,7 +6,9 @@
     "about": "About",
     "document": "Document",
     "antdv": "Ant Design Vue Version",
+    "antdv-next": "Antdv Next Version",
     "naive-ui": "Naive UI Version",
-    "element-plus": "Element Plus Version"
+    "element-plus": "Element Plus Version",
+    "tdesign": "TDesign Vue Version"
   }
 }