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

.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,7 +622,8 @@ export type ComponentType =
   | 'DatePicker'
   | 'DefaultButton'
   | 'Divider'
-  | 'GalleryPickLink' // OA 场景表单的图片/文件素材选择（透传 acceptTypes 过滤类型）
+  /** OA 场景表单的图片/文件素材选择（透传 acceptTypes 过滤类型） */
+  | 'GalleryPickLink'
   | 'IconPicker'
   | 'Input'
   | 'InputNumber'
@@ -85,66 +647,89 @@ export type ComponentType =
   | '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,
@@ -157,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/request.ts

@@ -1,12 +1,13 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-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';
@@ -29,8 +30,9 @@ 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,
   });
 
@@ -174,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/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/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/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/markdown-editor.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * Markdown 编辑器表单组件（封装 md-editor-v3）
+ * 经 component-map 自动注册，schema 中以 component: 'MarkdownEditor' 使用（vben form 默认 v-model:value 绑定）
+ * 为什么封装：统一精简工具栏（轻量备注场景不需要图片/公式等重型功能）+ 主题跟随系统亮暗切换，避免各表单重复配置
+ */
+import type { ToolbarNames } from 'md-editor-v3';
+
+import { computed, defineAsyncComponent } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import { useVModel } from '@vueuse/core';
+
+import 'md-editor-v3/lib/style.css';
+
+// 本文件经 component-map 的 eager glob 全量打进主包，md-editor-v3（含 CodeMirror）体积大，
+// 必须异步加载：外壳进主包、库本体在编辑器真正渲染时才拉取，避免拖累全站首屏
+const MdEditor = defineAsyncComponent(() =>
+  import('md-editor-v3').then((m) => m.MdEditor),
+);
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '请输入内容（支持 Markdown 格式）',
+  },
+  /** 编辑器整体高度（px），弹窗场景建议 200-300 */
+  height: {
+    type: Number,
+    default: 240,
+  },
+});
+const emits = defineEmits(['update:value']);
+const mValue = useVModel(props, 'value', emits, {
+  defaultValue: props.value,
+  passive: true,
+});
+/** 主题必须跟随系统亮/暗切换，不能写死（与消息详情 MdPreview 的处理一致） */
+const { isDark } = usePreferences();
+const theme = computed(() => (isDark.value ? 'dark' : 'light'));
+/** 同页面可能挂载多个编辑器实例（如弹窗嵌套），随机 id 避免内部 DOM id 冲突 */
+const editorId = `md-form-${Math.random().toString(36).slice(2, 9)}`;
+/** 精简工具栏：加粗/斜体/删除线、标题/引用/列表/任务、代码/链接/表格，右侧仅保留预览切换 */
+const toolbars: ToolbarNames[] = [
+  'bold',
+  'italic',
+  'strikeThrough',
+  '-',
+  'title',
+  'quote',
+  'unorderedList',
+  'orderedList',
+  'task',
+  '-',
+  'code',
+  'link',
+  'table',
+  '=',
+  'preview',
+];
+</script>
+<template>
+  <MdEditor
+    :id="editorId"
+    v-model="mValue"
+    :theme="theme"
+    :placeholder="placeholder"
+    :toolbars="toolbars"
+    :footers="[]"
+    :preview="false"
+    :style="{ height: `${height}px` }"
+    class="md-form-editor"
+  />
+</template>
+<style scoped>
+/* 圆角与边框贴近 antd 输入组件，融入表单视觉 */
+.md-form-editor {
+  width: 100%;
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+}
+</style>

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/vip/HeaderVipBadge.vue

@@ -145,8 +145,9 @@ function openRecords() {
     >
       <template #content>
         <div class="header-vip-bubble">
-          <!-- 诊所端风格会员卡头图 -->
+          <!-- 黑金会员卡头图：与诊所设置/小程序会员卡同一视觉语言 -->
           <div class="header-vip-hero">
+            <div class="header-vip-hero__glow"></div>
             <VipBadgeCombo
               v-if="hasVipVisual"
               size="lg"
@@ -157,8 +158,10 @@ function openRecords() {
             />
             <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__title-row">
-              <div class="header-vip-hero__sub">{{ durationLabel }}</div>
+                <span class="header-vip-hero__title">{{ levelName }}</span>
+                <span class="header-vip-hero__chip">{{ durationLabel }}</span>
+              </div>
               <div class="header-vip-hero__expire">{{ expireText }}</div>
             </div>
           </div>
@@ -244,19 +247,37 @@ function openRecords() {
   background: hsl(var(--card, var(--background)));
   box-shadow: 0 8px 24px hsl(var(--foreground) / 0.12);
 }
+/* 黑金卡头：深色卡面亮暗主题通用 */
 .header-vip-hero {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 18px;
-  background: linear-gradient(135deg, #2c3e50 0%, #3d5a40 50%, #6acdbb 100%);
+  overflow: hidden;
+  background:
+    radial-gradient(120% 160% at 100% 0%, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0) 45%),
+    linear-gradient(135deg, #23201a 0%, #12100c 55%, #1f1a12 100%);
+  border-bottom: 1px solid rgba(220, 186, 110, 0.3);
+}
+.header-vip-hero__glow {
+  position: absolute;
+  top: -50px;
+  right: -40px;
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(240, 217, 168, 0.26) 0%, rgba(240, 217, 168, 0) 70%);
+  pointer-events: none;
 }
 .header-vip-hero__placeholder {
   width: 72px;
   height: 72px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.18);
+  background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 100%);
-  color: #fff;
+  border: 1px solid rgba(220, 186, 110, 0.4);
+  color: #f0d9a8;
+  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
   font-size: 28px;
   font-weight: 700;
   display: flex;
@@ -265,23 +286,36 @@ function openRecords() {
   flex-shrink: 0;
 }
 .header-vip-hero__info {
+  position: relative;
   min-width: 0;
-  color: #fff;
+}
+.header-vip-hero__title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 .header-vip-hero__title {
   font-size: 18px;
   font-weight: 700;
   line-height: 1.3;
+  color: #f5e3bd;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
 }
-.header-vip-hero__sub {
+.header-vip-hero__chip {
-  margin-top: 4px;
+  flex-shrink: 0;
-  font-size: 13px;
+  padding: 0 8px;
-  opacity: 0.9;
+  font-size: 11px;
+  line-height: 18px;
+  color: #e8cf9a;
+  background: rgba(212, 175, 55, 0.1);
+  border: 1px solid rgba(232, 207, 154, 0.5);
+  border-radius: 999px;
 }
 .header-vip-hero__expire {
-  margin-top: 4px;
+  margin-top: 6px;
   font-size: 12px;
-  opacity: 0.78;
+  color: rgba(240, 224, 190, 0.75);
 }
 .header-vip-body {
   padding: 12px 14px 14px;
@@ -342,8 +376,4 @@ function openRecords() {
   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

@@ -1,16 +1,22 @@
 <script lang="ts" setup>
 /**
- * 诊所列表 VIP 单元格：徽标+会员名，点击打开 VIP 入口弹窗
+ * 诊所列表 VIP 单元格：徽标+会员名+到期时间，点击打开 VIP 入口弹窗
  */
-import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
+import { computed } from 'vue';
 
-defineProps<{
+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
@@ -29,9 +35,7 @@ const emit = defineEmits<{
     />
     <div class="store-vip-cell__text">
       <div class="store-vip-cell__name">{{ vip?.level_name || '普通会员' }}</div>
-      <div class="store-vip-cell__sub">
+      <div class="store-vip-cell__sub">{{ subText }}</div>
-        {{ vip?.duration_label || '点击管理' }}
-      </div>
     </div>
   </div>
 </template>
@@ -56,14 +60,14 @@ const emit = defineEmits<{
 .store-vip-cell__name {
   font-size: 13px;
   font-weight: 600;
-  color: var(--foreground, #1f1f1f);
+  color: hsl(var(--foreground));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .store-vip-cell__sub {
   font-size: 11px;
-  color: #8c8c8c;
+  color: hsl(var(--muted-foreground));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -72,12 +76,4 @@ html.dark .store-vip-cell:hover,
 .dark .store-vip-cell:hover {
   background: rgba(106, 205, 187, 0.2);
 }
-html.dark .store-vip-cell__name,
-.dark .store-vip-cell__name {
-  color: #f4f4f5;
-}
-html.dark .store-vip-cell__sub,
-.dark .store-vip-cell__sub {
-  color: #a1a1aa;
-}
 </style>

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

@@ -34,7 +34,10 @@ const expireText = computed(() => {
 });
 </script>
 <template>
+  <!-- 黑金会员卡：与小程序端 vip-member-card 同一套视觉语言，深色卡面亮暗主题通用 -->
   <div class="store-vip-card">
+    <div class="store-vip-card__glow"></div>
+    <div class="store-vip-card__sheen"></div>
     <VipBadgeCombo
       v-if="hasVipVisual"
       size="xl"
@@ -45,11 +48,9 @@ const expireText = computed(() => {
     />
     <div v-else class="store-vip-card__placeholder">V</div>
     <div class="store-vip-card__info">
-      <div class="store-vip-card__title">
+      <div class="store-vip-card__title-row">
-        {{ vip?.level_name || '普通会员' }}
+        <span class="store-vip-card__title">{{ vip?.level_name || '普通会员' }}</span>
-      </div>
+        <span class="store-vip-card__chip">{{ vip?.duration_label || '普通会员' }}</span>
-      <div class="store-vip-card__sub">
-        {{ vip?.duration_label || '普通会员' }}
       </div>
       <div class="store-vip-card__expire">{{ expireText }}</div>
     </div>
@@ -57,50 +58,96 @@ const expireText = computed(() => {
 </template>
 <style scoped>
 .store-vip-card {
+  position: relative;
   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;
+  overflow: hidden;
+  border-radius: 18px;
+  /* 深色曜石底 + 右上暗金光晕，比单一渐变更有实体卡层次 */
+  background:
+    radial-gradient(120% 160% at 100% 0%, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0) 45%),
+    linear-gradient(135deg, #23201a 0%, #12100c 55%, #1f1a12 100%);
+  border: 1px solid rgba(220, 186, 110, 0.35);
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.28),
+    0 2px 8px rgba(212, 175, 55, 0.12);
+}
+/* 右上金色光晕：模拟灯光打在卡面的高光 */
+.store-vip-card__glow {
+  position: absolute;
+  top: -70px;
+  right: -50px;
+  width: 220px;
+  height: 220px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(240, 217, 168, 0.26) 0%, rgba(240, 217, 168, 0) 70%);
+  pointer-events: none;
+}
+/* 斜切静态流光条：金属光泽感 */
+.store-vip-card__sheen {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 32%;
+  width: 90px;
+  transform: skewX(-24deg);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  pointer-events: none;
 }
 .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;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  width: 120px;
+  height: 120px;
+  font-size: 48px;
+  font-weight: 700;
+  color: #f0d9a8;
+  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
+  background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 100%);
+  border: 1px solid rgba(220, 186, 110, 0.4);
+  border-radius: 50%;
+  box-shadow: inset 0 0 16px rgba(212, 175, 55, 0.15);
 }
 .store-vip-card__info {
+  position: relative;
   min-width: 0;
-  color: #fff;
+}
+.store-vip-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
 }
 .store-vip-card__title {
   font-size: 22px;
   font-weight: 700;
   line-height: 1.3;
-  margin-bottom: 6px;
+  color: #f5e3bd;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
 }
-.store-vip-card__sub {
+/* 期限徽章：金字描边小胶囊 */
-  font-size: 14px;
+.store-vip-card__chip {
-  opacity: 0.9;
+  flex-shrink: 0;
-  margin-bottom: 6px;
+  padding: 1px 10px;
+  font-size: 12px;
+  color: #e8cf9a;
+  background: rgba(212, 175, 55, 0.1);
+  border: 1px solid rgba(232, 207, 154, 0.5);
+  border-radius: 999px;
 }
 .store-vip-card__expire {
   font-size: 13px;
-  opacity: 0.78;
+  color: rgba(240, 224, 190, 0.75);
-}
-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/VipHubModal.vue

@@ -10,6 +10,7 @@ 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);
@@ -21,6 +22,7 @@ const title = computed(
   () => `VIP管理 - ${storeName.value || storeId.value || ''}`,
 );
 
+/** 当前等级 + 时长类型 */
 const currentLevelText = computed(() => {
   const v = vip.value;
   if (!v) return '当前：普通会员';
@@ -32,6 +34,20 @@ const currentLevelText = computed(() => {
   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,
 });
@@ -107,7 +123,12 @@ function openRecords() {
         :level-name="vip?.level_name"
         :duration-label="vip?.duration_label"
       />
-      <div class="vip-hub-current__text">{{ currentLevelText }}</div>
+      <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">
@@ -140,11 +161,21 @@ function openRecords() {
   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;

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

@@ -17,7 +17,7 @@ import {
   openVipStore,
 } from '#/views/system/vip/store/api';
 
-/** 时长预设 → 时效类型 code（与后端 VipDurationHelper 对齐） */
+/** 时长预设 → 时效类型 code（与后端 VipDurationHelper 对齐；keep 走当前会员 duration_type） */
 const PRESET_TO_DURATION: Record<string, string> = {
   '7d': 'trial',
   '1w': 'week',
@@ -33,6 +33,8 @@ 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>();
@@ -46,8 +48,28 @@ 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;
@@ -57,16 +79,18 @@ const selectedDurationType = computed(() =>
   ribbonByPreset(durationPreset.value),
 );
 
-/** 时长卡片数据：附带丝带图，避免模板重复查找 */
+/** 时长卡片：普通会员隐藏 keep；其它预设照常 */
 const durationCards = computed(() =>
-  presets.value.map((p) => {
+  presets.value
-    const ribbon = ribbonByPreset(p.value);
+    .filter((p) => p.value !== 'keep' || canKeepDuration.value)
-    return {
+    .map((p) => {
-      ...p,
+      const ribbon = ribbonByPreset(p.value);
-      ribbonUrl: ribbon?.badge_url || '',
+      return {
-      ribbonName: ribbon?.name || '',
+        ...p,
-    };
+        ribbonUrl: ribbon?.badge_url || '',
-  }),
+        ribbonName: ribbon?.name || '',
+      };
+    }),
 );
 
 const previewBadgeUrl = computed(() => selectedLevel.value?.badge_url || '');
@@ -78,10 +102,36 @@ const previewLevelName = computed(
 );
 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}`);
 
 /** 选择会员等级 */
@@ -139,6 +189,7 @@ const [Modal, modalApi] = useVbenModal({
       durationPreset.value = undefined;
       customYears.value = undefined;
       remark.value = '';
+      currentVip.value = null;
       return;
     }
     const data = modalApi.getData<Record<string, any>>() || {};
@@ -146,6 +197,7 @@ const [Modal, modalApi] = useVbenModal({
     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(),
@@ -157,10 +209,14 @@ const [Modal, modalApi] = useVbenModal({
       value: i.value,
     }));
     durationTypes.value = durationList || [];
-    // 回填当前 VIP 等级（便于续期）
+    // 回填当前 VIP 等级（便于续期/改档）
     if (data.vip?.level_id) {
       levelId.value = Number(data.vip.level_id);
     }
+    // 非普通会员：默认选「继承剩余时间」，到期日不改动
+    if (canKeepDuration.value) {
+      durationPreset.value = 'keep';
+    }
   },
 });
 
@@ -170,8 +226,9 @@ watch(durationPreset, (v) => {
 </script>
 <template>
   <Modal :title="title" class="w-[50%]">
-    <!-- 预览：徽标卡片 + 丝带（随时长自动适配） -->
+    <!-- 预览：黑金卡面 + 徽标丝带（随时长自动适配） -->
     <div class="vip-upgrade-preview mb-5">
+      <div class="vip-upgrade-preview__glow"></div>
       <VipBadgeCombo
         size="xl"
         :badge-url="previewBadgeUrl"
@@ -273,28 +330,53 @@ watch(durationPreset, (v) => {
   </Modal>
 </template>
 <style scoped>
+/* 黑金预览卡：与会员卡组件同一视觉语言，深色卡面亮暗主题通用 */
 .vip-upgrade-preview {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 20px 24px;
-  border-radius: 14px;
+  overflow: hidden;
-  background: linear-gradient(135deg, #2c3e50 0%, #3d5a40 50%, #6acdbb 100%);
+  border-radius: 16px;
-  color: #fff;
+  background:
+    radial-gradient(120% 160% at 100% 0%, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0) 45%),
+    linear-gradient(135deg, #23201a 0%, #12100c 55%, #1f1a12 100%);
+  border: 1px solid rgba(220, 186, 110, 0.35);
+  box-shadow:
+    0 10px 26px rgba(0, 0, 0, 0.24),
+    0 2px 8px rgba(212, 175, 55, 0.12);
+  color: #f5e3bd;
+}
+.vip-upgrade-preview__glow {
+  position: absolute;
+  top: -60px;
+  right: -40px;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(240, 217, 168, 0.26) 0%, rgba(240, 217, 168, 0) 70%);
+  pointer-events: none;
+}
+.vip-upgrade-preview__text {
+  position: relative;
+  min-width: 0;
 }
 .vip-upgrade-preview__title {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 4px;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
 }
 .vip-upgrade-preview__sub {
   font-size: 13px;
-  opacity: 0.9;
+  color: rgba(240, 224, 190, 0.85);
   margin-bottom: 6px;
 }
 .vip-upgrade-preview__price {
   font-size: 12px;
-  opacity: 0.8;
+  color: rgba(240, 224, 190, 0.68);
 }
 /* 两行 + 横向滑动的单选卡片轨道 */
 .vip-pick-scroll {
@@ -397,11 +479,7 @@ watch(durationPreset, (v) => {
   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);

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,187 +1,183 @@
 <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 HeaderVipBadge from '#/components/vip/HeaderVipBadge.vue';
-import { useAuthStore } from '#/store';
-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);
-);
 
-/** 与原先悬浮窗一致：有 doctor_id 且绑定门店才显示传方入口 */
 const showDoctorTransfer = computed(() => {
   const info = userStore.userInfo as Record<string, any> | null | undefined;
   if (!info) return false;
@@ -189,6 +185,13 @@ const showDoctorTransfer = computed(() => {
 });
 
 const menus = computed(() => [
+  {
+    handler: () => {
+      router.push({ name: 'Profile' });
+    },
+    icon: 'lucide:user',
+    text: $t('page.auth.profile'),
+  },
   {
     handler: () => {
       switchAccountModalRef.value?.openModal();
@@ -210,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,
@@ -218,43 +234,45 @@ 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
-    <!-- index=55：紧挨全局搜索(50)右侧 -->
+    :avatar
+    :text="userStore.userInfo?.realName"
+    @clear-preferences-and-logout="handleLogout"
+    @logout="handleLogout"
+  >
     <template #header-right-55>
       <DoctorTransferFloat v-if="showDoctorTransfer" />
     </template>
     <template #user-dropdown>
+      <!-- VIP 徽标放在头像左侧，与用户下拉并排 -->
       <div class="flex items-center">
         <HeaderVipBadge />
         <UserDropdown
           :avatar
-          :description="userStore.userInfo?.email"
           :menus
-          :tag-text="userStore.userInfo?.roles?.name"
           :text="userStore.userInfo?.nick_name"
+          :description="userStore.userInfo?.email"
+          :tag-text="userStore.userInfo?.roles?.name"
+          @clear-preferences-and-logout="handleLogout"
           @logout="handleLogout"
         />
       </div>
@@ -262,12 +280,54 @@ watch(
     <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"
   }
 }

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

@@ -4,7 +4,8 @@
     "register": "Register",
     "codeLogin": "Code Login",
     "qrcodeLogin": "Qr Code Login",
-    "forgetPassword": "Forget Password"
+    "forgetPassword": "Forget Password",
+    "profile": "Profile"
   },
   "dashboard": {
     "title": "Dashboard",

apps/web-antd/src/locales/langs/zh-CN/demos.json

@@ -6,7 +6,9 @@
     "about": "关于",
     "document": "文档",
     "antdv": "Ant Design Vue 版本",
+    "antdv-next": "Antdv Next 版本",
     "naive-ui": "Naive UI 版本",
-    "element-plus": "Element Plus 版本"
+    "element-plus": "Element Plus 版本",
+    "tdesign": "TDesign Vue 版本"
   }
 }

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -4,7 +4,8 @@
     "register": "注册",
     "codeLogin": "验证码登录",
     "qrcodeLogin": "二维码登录",
-    "forgetPassword": "忘记密码"
+    "forgetPassword": "忘记密码",
+    "profile": "个人中心"
   },
   "dashboard": {
     "title": "概览",

apps/web-antd/src/main.ts

@@ -1,7 +1,7 @@
 import { initPreferences } from '@vben/preferences';
 import { unmountGlobalLoading } from '@vben/utils';
 
-import { overridesPreferences } from './preferences';
+import { overridesPreferences, preferencesExtension } from './preferences';
 
 // eslint-disable-next-line n/no-extraneous-import
 import '@fortawesome/fontawesome-free/css/all.min.css';
@@ -18,6 +18,7 @@ async function initApplication() {
 
   // app偏好设置初始化
   await initPreferences({
+    extension: preferencesExtension,
     namespace,
     overrides: overridesPreferences,
   });

apps/web-antd/src/preferences.ts

@@ -1,4 +1,3 @@
-import { defineOverridesPreferences } from '@vben/preferences';
 // {
 //   "app": {
 //   "layout": "sidebar-nav"
@@ -8,6 +7,19 @@ import { defineOverridesPreferences } from '@vben/preferences';
 //     "enable": false
 //   }
 // }
+import {
+  appCopyrightPreferences,
+  defineOverridesPreferences,
+  definePreferencesExtension,
+} from '@vben/preferences';
+
+interface WebAntdPreferencesExtension {
+  defaultTableSize: number;
+  enableFormFullscreen: boolean;
+  reportTitle: string;
+  tenantMode: 'multi' | 'single';
+}
+
 /**
  * @description 项目配置文件
  * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
@@ -80,4 +92,54 @@ export const overridesPreferences = defineOverridesPreferences({
   tabbar: {
     enable: true,
   },
+  copyright: appCopyrightPreferences,
 });
+
+export const preferencesExtension =
+  definePreferencesExtension<WebAntdPreferencesExtension>({
+    tabLabel: 'preferences.antd.tabLabel',
+    title: 'preferences.antd.title',
+    fields: [
+      {
+        component: 'switch',
+        defaultValue: true,
+        key: 'enableFormFullscreen',
+        label: 'preferences.antd.fields.enableFormFullscreen.label',
+        tip: 'preferences.antd.fields.enableFormFullscreen.tip',
+      },
+      {
+        component: 'select',
+        defaultValue: 'single',
+        key: 'tenantMode',
+        label: 'preferences.antd.fields.tenantMode.label',
+        options: [
+          {
+            label: 'preferences.antd.fields.tenantMode.options.single.label',
+            value: 'single',
+          },
+          {
+            label: 'preferences.antd.fields.tenantMode.options.multi.label',
+            value: 'multi',
+          },
+        ],
+      },
+      {
+        component: 'number',
+        componentProps: {
+          max: 200,
+          min: 10,
+          step: 10,
+        },
+        defaultValue: 20,
+        key: 'defaultTableSize',
+        label: 'preferences.antd.fields.defaultTableSize.label',
+      },
+      {
+        component: 'input',
+        defaultValue: '',
+        key: 'reportTitle',
+        label: 'preferences.antd.fields.reportTitle.label',
+        placeholder: 'preferences.antd.fields.reportTitle.placeholder',
+      },
+    ],
+  });

apps/web-antd/src/router/guard.ts

@@ -18,7 +18,7 @@ function setupCommonGuard(router: Router) {
   // 记录已经加载的页面
   const loadedPaths = new Set<string>();
 
-  router.beforeEach(async (to) => {
+  router.beforeEach((to) => {
     to.meta.loaded = loadedPaths.has(to.path);
 
     // 页面加载进度条

apps/web-antd/src/router/routes/core.ts

@@ -1,11 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
 
-import { AuthPageLayout } from '#/layouts';
 import { $t } from '#/locales';
-import Login from '#/views/_core/authentication/login.vue';
 
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
 /** 全局404页面 */
 const fallbackNotFoundRoute: RouteRecordRaw = {
   component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -21,13 +22,21 @@ const fallbackNotFoundRoute: RouteRecordRaw = {
 
 /** 基本路由，这些路由是必须存在的 */
 const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
   {
+    component: BasicLayout,
     meta: {
+      hideInBreadcrumb: true,
       title: 'Root',
     },
     name: 'Root',
     path: '/',
-    redirect: DEFAULT_HOME_PATH,
+    redirect: preferences.app.defaultHomePath,
+    children: [],
   },
   {
     component: AuthPageLayout,
@@ -42,7 +51,7 @@ const coreRoutes: RouteRecordRaw[] = [
       {
         name: 'Login',
         path: 'login',
-        component: Login,
+        component: () => import('#/views/_core/authentication/login.vue'),
         meta: {
           title: $t('page.auth.login'),
         },

apps/web-antd/src/router/routes/modules/dashboard.ts

@@ -1,22 +1,20 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       icon: 'lucide:layout-dashboard',
       order: -1,
       title: $t('page.dashboard.title'),
     },
     name: 'Dashboard',
-    path: '/',
+    path: '/dashboard',
     children: [
       {
         name: 'Analytics',
-        path: '/analytics',
+        path: 'analytics',
         component: () => import('#/views/dashboard/analytics/index.vue'),
         meta: {
           affixTab: true,
@@ -26,7 +24,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'Workspace',
-        path: '/workspace',
+        path: 'workspace',
         component: () => import('#/views/dashboard/workspace/index.vue'),
         meta: {
           icon: 'carbon:workspace',

apps/web-antd/src/router/routes/modules/vben.ts

@@ -1,40 +1,33 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import {
+  VBEN_ANTDV_NEXT_PREVIEW_URL,
   VBEN_DOC_URL,
   VBEN_ELE_PREVIEW_URL,
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
   VBEN_NAIVE_PREVIEW_URL,
+  VBEN_TD_PREVIEW_URL,
 } from '@vben/constants';
+import { SvgAntdvNextLogoIcon, SvgTDesignIcon } from '@vben/icons';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
   {
-    component: BasicLayout,
     meta: {
       badgeType: 'dot',
       icon: VBEN_LOGO_URL,
-      order: 9999,
+      order: 9998,
       title: $t('demos.vben.title'),
     },
     name: 'VbenProject',
     path: '/vben-admin',
     children: [
-      {
-        name: 'VbenAbout',
-        path: '/vben-admin/about',
-        component: () => import('#/views/_core/about/index.vue'),
-        meta: {
-          icon: 'lucide:copyright',
-          title: $t('demos.vben.about'),
-        },
-      },
       {
         name: 'VbenDocument',
-        path: '/vben-admin/document',
+        path: 'document',
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
@@ -44,7 +37,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         name: 'VbenGithub',
-        path: '/vben-admin/github',
+        path: 'github',
         component: IFrameView,
         meta: {
           icon: 'mdi:github',
@@ -52,9 +45,20 @@ const routes: RouteRecordRaw[] = [
           title: 'Github',
         },
       },
+      {
+        name: 'VbenAntdVNext',
+        path: 'antdv-next',
+        component: IFrameView,
+        meta: {
+          badgeType: 'dot',
+          icon: SvgAntdvNextLogoIcon,
+          link: VBEN_ANTDV_NEXT_PREVIEW_URL,
+          title: $t('demos.vben.antdv-next'),
+        },
+      },
       {
         name: 'VbenNaive',
-        path: '/vben-admin/naive',
+        path: 'naive',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -63,9 +67,20 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.vben.naive-ui'),
         },
       },
+      {
+        name: 'VbenTDesign',
+        path: 'tdesign',
+        component: IFrameView,
+        meta: {
+          badgeType: 'dot',
+          icon: SvgTDesignIcon,
+          link: VBEN_TD_PREVIEW_URL,
+          title: $t('demos.vben.tdesign'),
+        },
+      },
       {
         name: 'VbenElementPlus',
-        path: '/vben-admin/ele',
+        path: 'ele',
         component: IFrameView,
         meta: {
           badgeType: 'dot',
@@ -76,6 +91,26 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    name: 'VbenAbout',
+    path: '/vben-admin/about',
+    component: () => import('#/views/_core/about/index.vue'),
+    meta: {
+      icon: 'lucide:copyright',
+      title: $t('demos.vben.about'),
+      order: 9999,
+    },
+  },
+  {
+    name: 'Profile',
+    path: '/profile',
+    component: () => import('#/views/_core/profile/index.vue'),
+    meta: {
+      icon: 'lucide:user',
+      hideInMenu: true,
+      title: $t('page.auth.profile'),
+    },
+  },
 ];
 
 export default routes;

apps/web-antd/src/store/auth.ts

@@ -3,6 +3,7 @@ import type { Recordable, UserInfo } from '@vben/types';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { preferences } from '@vben/preferences';
 import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
 import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
@@ -32,6 +33,7 @@ export const useAuthStore = defineStore('auth', () => {
     params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
+    // 异步处理用户登录操作并获取 accessToken
     let userInfo: null | UserInfo = null;
     try {
       loginLoading.value = true;

apps/web-antd/src/utils/chinesePrescriptionMargin.ts

@@ -1,60 +1,60 @@
-/**
+/**
-
+ * 中药处方毛利率计算（仅商品计费，不含诊疗费/加工费）
- * 中药处方毛利率计算（仅商品计费，不含诊疗费/加工费）
+ */
-
+
- */
+export function isSeeRateEnabled(seeRate: unknown): boolean {
-
+  return Number(seeRate) === 1;
-
+}
-
+
-export function isSeeRateEnabled(seeRate: unknown): boolean {
+function isValidBuyPrice(value: unknown): boolean {
-
+  if (value === null || value === undefined || value === '') {
-  return Number(seeRate) === 1;
+    return false;
-
+  }
-}
+  const n = Number(value);
-
+  return !Number.isNaN(n);
-
+}
-
+
-function isValidBuyPrice(value: unknown): boolean {
+export function calcItemMarginPercent(
-
+  price: number | string | undefined,
-  if (value === null || value === undefined || value === '') {
+  buyPrice: number | string | undefined,
-
+): string {
-    return false;
+  const p = Number(price);
-
+  if (!p || p <= 0 || !isValidBuyPrice(buyPrice)) {
-  }
+    return '--';
-
+  }
-  const n = Number(value);
+  const b = Number(buyPrice);
-
+  return (((p - b) / p) * 100).toFixed(2);
-  return !Number.isNaN(n);
+}
-
+
-}
+export interface ChineseDrugMarginRow {
-
+  price?: number | string;
-
+  buy_price?: number | string;
-
+  number?: number | string;
-export function calcItemMarginPercent(
+  select_number?: number | string;
-
+}
-  price: number | string | undefined,
+
-
+export function calcTotalMarginPercent(
-  buyPrice: number | string | undefined,
+  drugs: ChineseDrugMarginRow[],
-
+  dosage: number,
-): string {
+): string {
-
+  if (!drugs?.length || dosage <= 0) {
-  const p = Number(price);
+    return '0.00';
-
+  }
-  if (!p || p <= 0 || !isValidBuyPrice(buyPrice)) {
+  let saleTotal = 0;
-
+  let buyTotal = 0;
-    return '--';
+  for (const drug of drugs) {
-
+    if (!isValidBuyPrice(drug.buy_price)) {
-  }
+      return '--';
-
+    }
-  const b = Number(buyPrice);
+    const qty = Number(drug.number ?? drug.select_number ?? 1);
-
+    const price = Number(drug.price || 0);
-  return (((p - b) / p) * 100).toFixed(2);
+    const buyPrice = Number(drug.buy_price);
-
+    saleTotal += price * qty * dosage;
-}
+    buyTotal += buyPrice * qty * dosage;
-
+  }
-
+  if (saleTotal <= 0) {
-
+    return '0.00';
-export interface ChineseDrugMarginRow {
+  }
-
+  return (((saleTotal - buyTotal) / saleTotal) * 100).toFixed(2);
-  price?: number | string;
+}
-
+

apps/web-antd/src/utils/vip.ts

@@ -144,3 +144,58 @@ export function useVipPermission(
 export function useVipGate() {
   return useVipPermission();
 }
+
+/**
+ * 格式化 VIP 到期时间文案（列表/弹窗共用）
+ * @param vip 门店 VIP 信息
+ * @param options.emptyText 普通会员/无数据时的文案，默认空串
+ * @param options.lifetimeText 终身文案，默认「终身」
+ * @param options.withPrefix 是否加「至」前缀（非终身时）
+ */
+export function formatVipExpireAt(
+  vip?: StoreVipInfo | Record<string, any> | null,
+  options?: {
+    emptyText?: string;
+    lifetimeText?: string;
+    withPrefix?: boolean;
+  },
+): string {
+  const emptyText = options?.emptyText ?? '';
+  const lifetimeText = options?.lifetimeText ?? '终身';
+  const withPrefix = options?.withPrefix ?? false;
+  if (!vip) return emptyText;
+  const code = String(vip.level_code || 'V0').trim() || 'V0';
+  if (code === 'V0') return emptyText;
+  if (vip.is_lifetime) return lifetimeText;
+  const raw = vip.expire_at as unknown;
+  if (raw == null || raw === '' || raw === 0) {
+    // 无到期日且非 V0：按终身展示（与列表列逻辑一致）
+    return lifetimeText;
+  }
+  // 后端偶发已格式化成 Y-m-d H:i:s
+  if (typeof raw === 'string' && Number.isNaN(Number(raw))) {
+    return withPrefix ? `至 ${raw}` : raw;
+  }
+  const n = Number(raw);
+  if (!(n > 0)) return lifetimeText;
+  const d = new Date(n * 1000);
+  if (Number.isNaN(d.getTime())) return emptyText;
+  const pad = (x: number) => String(x).padStart(2, '0');
+  const text = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+  return withPrefix ? `至 ${text}` : text;
+}
+
+/**
+ * 列表副文案：时长类型 + 到期（如「月卡 · 至 2026-08-10 …」）
+ */
+export function formatVipDurationExpireLine(
+  vip?: StoreVipInfo | Record<string, any> | null,
+): string {
+  if (!vip) return '点击管理';
+  const code = String(vip.level_code || 'V0').trim() || 'V0';
+  if (code === 'V0') return '点击管理';
+  const duration = String(vip.duration_label || '').trim();
+  const expire = formatVipExpireAt(vip, { withPrefix: true, lifetimeText: '终身' });
+  if (duration && expire) return `${duration} · ${expire}`;
+  return duration || expire || '点击管理';
+}

apps/web-antd/src/views/_core/authentication/code-login.vue

@@ -53,8 +53,7 @@ const formSchema = computed((): VbenFormSchema[] => {
  * @param values 登录表单数据
  */
 async function handleLogin(values: Recordable<any>) {
-  // eslint-disable-next-line no-console
+  void values;
-  console.log(values);
 }
 </script>
 

apps/web-antd/src/views/_core/authentication/forget-password.vue

@@ -29,8 +29,7 @@ const formSchema = computed((): VbenFormSchema[] => {
 });
 
 function handleSubmit(value: Recordable<any>) {
-  // eslint-disable-next-line no-console
+  void value;
-  console.log('reset email:', value);
 }
 </script>
 

apps/web-antd/src/views/_core/authentication/register.vue

@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string({ required_error: $t('authentication.passwordTip') })
+            .string({ error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
@@ -82,8 +82,7 @@ const formSchema = computed((): VbenFormSchema[] => {
 });
 
 function handleSubmit(value: Recordable<any>) {
-  // eslint-disable-next-line no-console
+  void value;
-  console.log('register submit:', value);
 }
 </script>
 

apps/web-antd/src/views/_core/profile/api/index.ts

@@ -0,0 +1,20 @@
+import { requestClient } from '#/api/request';
+
+// 个人中心接口（后端 routes/admin.php 的 auth 分组，AdminController → common AdminProfileService）
+const prefix = 'auth/';
+
+/**
+ * 获取我的个人中心资料
+ * 与 auth/my-info（Redis 会话快照）不同，这里返回实时库数据 + 只读展示字段（登录账号/所属门店/最后登录时间等）
+ */
+export async function getMyProfile() {
+  return requestClient.get<any>(`${prefix}my-profile`);
+}
+
+/**
+ * 修改我的资料（后端白名单：仅昵称 nick_name、头像 avatar）
+ * 保存成功后后端会同步刷新 Redis 会话，前端只需重拉 my-info 即可让顶栏生效
+ */
+export async function updateMyProfile(data: any) {
+  return requestClient.post<any>(`${prefix}update-my-profile`, data);
+}

apps/web-antd/src/views/_core/profile/base-setting.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+/**
+ * 个人中心 - 基本资料
+ * 可编辑：头像（复用表单 Avatar 上传组件）、昵称（与后端 update-my-profile 白名单一致）
+ * 只读展示：登录账号/手机号/角色/所属门店/最后登录时间等（账号身份信息不允许自助修改）
+ * 保存成功后重拉 my-info 刷新全局登录态，顶栏/工作台头像昵称立即生效
+ */
+import { computed, ref, watch } from 'vue';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { useAuthStore } from '#/store/auth';
+
+import { updateMyProfile } from './api';
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(['saved']);
+
+const authStore = useAuthStore();
+
+/** 可编辑字段表单：仅头像 + 昵称，其余字段一律只读展示 */
+const [Form, formApi] = useVbenForm({
+  wrapperClass: 'grid-cols-12',
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    labelWidth: 80,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Avatar',
+      fieldName: 'avatar',
+      label: '头像',
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'nick_name',
+      label: '昵称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入昵称',
+        maxlength: 20,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+// 父组件拉取到实时资料后回填表单（保存成功刷新后同样走这里）
+watch(
+  () => props.profile,
+  (val: any) => {
+    if (val && val.id) {
+      formApi.setValues({
+        avatar: val.avatar,
+        nick_name: val.nick_name,
+      });
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+/** 只读信息行：为空的可选字段（门店/工号/邮箱）不展示，避免一排「-」 */
+const readonlyRows = computed(() => {
+  const p: any = props.profile || {};
+  const rows: { label: string; value: string }[] = [
+    { label: '登录账号', value: p.login_account },
+    { label: '手机号', value: p.phone },
+    { label: '角色', value: p.role_name },
+  ];
+  if (p.store_name) {
+    rows.push({ label: '所属门店', value: p.store_name });
+  }
+  if (p.job_number) {
+    rows.push({ label: '工号', value: p.job_number });
+  }
+  if (p.email) {
+    rows.push({ label: '邮箱', value: p.email });
+  }
+  rows.push({ label: '最后登录', value: p.last_login_time });
+  rows.push({ label: '创建时间', value: p.created_at });
+  return rows.map((row) => ({ ...row, value: row.value || '-' }));
+});
+
+const saving = ref(false);
+
+/**
+ * 保存资料：校验 → 提交白名单字段 → 重拉全局登录态 → 通知父组件刷新
+ * 为什么要 fetchUserInfo：后端已刷新 Redis 会话，前端重拉 my-info 才能让顶栏/工作台立即显示新头像昵称
+ */
+function handleSave() {
+  formApi.validate().then(async (e: any) => {
+    if (!e.valid) return;
+    const values = await formApi.getValues();
+    saving.value = true;
+    try {
+      await updateMyProfile({
+        nick_name: values.nick_name,
+        avatar: values.avatar || '',
+      });
+      message.success('保存成功');
+      await authStore.fetchUserInfo();
+      emits('saved');
+    } finally {
+      saving.value = false;
+    }
+  });
+}
+</script>
+<template>
+  <div class="profile-base w-full lg:w-2/3">
+    <Form />
+    <Button type="primary" :loading="saving" @click="handleSave">
+      保存资料
+    </Button>
+    <div class="profile-base__section-title">账号信息</div>
+    <div class="profile-base__grid">
+      <div
+        v-for="row in readonlyRows"
+        :key="row.label"
+        class="profile-base__row"
+      >
+        <span class="profile-base__label">{{ row.label }}</span>
+        <span class="profile-base__value">{{ row.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+/* 只读信息区：全部走主题变量，暗色模式自动适配 */
+.profile-base__section-title {
+  padding-bottom: 10px;
+  margin-top: 28px;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.profile-base__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 24px;
+}
+
+.profile-base__row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px dashed hsl(var(--border) / 0.6);
+}
+
+.profile-base__label {
+  flex-shrink: 0;
+  width: 72px;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+}
+
+.profile-base__value {
+  overflow: hidden;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  .profile-base__grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

apps/web-antd/src/views/_core/profile/index.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * 个人中心：左侧账号卡（头像/昵称/角色）+ 右侧 Tab（基本资料 / 修改密码）
+ * 入口：顶栏头像下拉「个人中心」、工作台问候头；静态路由 /profile（hideInMenu，不走 xk_menu）
+ * 资料数据统一从 auth/my-profile 实时接口拉取，子组件保存成功后回调刷新
+ */
+import { computed, onMounted, ref } from 'vue';
+
+import { Profile } from '@vben/common-ui';
+
+import { getMyProfile } from './api';
+import ProfileBase from './base-setting.vue';
+import ProfilePasswordSetting from './password-setting.vue';
+
+const tabsValue = ref<string>('basic');
+
+const tabs = ref([
+  {
+    label: '基本资料',
+    value: 'basic',
+  },
+  {
+    label: '修改密码',
+    value: 'password',
+  },
+]);
+
+/** 个人中心资料（basic tab 编辑 + 左侧账号卡展示共用一份数据） */
+const profile = ref<any>({});
+
+/**
+ * 左侧账号卡数据映射
+ * Profile 壳组件展示 realName（大字）与 username（小字），这里映射为 昵称 + 角色名
+ * avatar 为空时必须传 undefined（不能传空串），Profile 内部才会 ?? 兜底系统默认头像
+ */
+const cardUserInfo = computed(() => ({
+  avatar: profile.value.avatar || undefined,
+  nick_name: profile.value.nick_name || '',
+  userId: String(profile.value.id || ''),
+  username: profile.value.role_name || '',
+  realName: profile.value.nick_name || '',
+}));
+
+/** 拉取实时资料（初始化 + 保存成功后刷新） */
+async function loadProfile() {
+  profile.value = (await getMyProfile()) || {};
+}
+
+onMounted(loadProfile);
+</script>
+<template>
+  <Profile
+    v-model:model-value="tabsValue"
+    title="个人中心"
+    :user-info="cardUserInfo"
+    :tabs="tabs"
+  >
+    <template #content>
+      <ProfileBase
+        v-if="tabsValue === 'basic'"
+        :profile="profile"
+        @saved="loadProfile"
+      />
+      <ProfilePasswordSetting v-if="tabsValue === 'password'" />
+    </template>
+  </Profile>
+</template>

apps/web-antd/src/views/_core/profile/password-setting.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * 个人中心 - 修改密码
+ * 复用顶栏「修改密码」弹窗同一份表单配置（layouts/config/form.ts 的 passwordModalForm）
+ * 与同一个接口（admin/update-password），保证两个入口口径完全一致，不重复造轮子
+ */
+import { ref } from 'vue';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { passwordModalForm } from '#/layouts/config/form';
+import { updatePassword } from '#/views/system/admin/api';
+
+const [Form, formApi] = useVbenForm(passwordModalForm);
+
+const submitting = ref(false);
+
+/**
+ * 提交改密：校验 → 调 admin/update-password → 清空表单
+ * 成功提示与顶栏弹窗一致（token 仍有效，下次登录使用新密码）
+ */
+function handleSubmit() {
+  formApi.validate().then(async (e: any) => {
+    if (!e.valid) return;
+    const values = await formApi.getValues();
+    submitting.value = true;
+    try {
+      await updatePassword(values);
+      message.success('修改成功，请重新登录');
+      formApi.resetForm();
+    } finally {
+      submitting.value = false;
+    }
+  });
+}
+</script>
+<template>
+  <div class="w-full lg:w-1/2">
+    <Form />
+    <Button
+      class="mt-4"
+      type="primary"
+      :loading="submitting"
+      @click="handleSubmit"
+    >
+      修改密码
+    </Button>
+  </div>
+</template>

apps/web-antd/src/views/business/express/express-company/config/table.ts

@@ -56,7 +56,7 @@ export const gridOptions: VxeGridProps<RowType> = {
     // custom: true, // 自定义列
     zoom: true, // 最大化最小化
     slots: {
-      buttons: 'toolbar-buttons',
+      buttons: 'toolbar-actions',
     },
     custom: {
       // 自定义列-图标

apps/web-antd/src/views/business/express/express-company/index.vue

@@ -68,7 +68,7 @@ const deleteApi = (row: any) => {
   <Page auto-content-height title="快递公司管理">
     <FormModal />
     <Grid>
-      <template #toolbar-buttons>
+      <template #toolbar-actions>
         <TableAction
           :actions="[
             {

apps/web-antd/src/views/business/order/prescription/config/table.ts

@@ -74,7 +74,7 @@ export const gridOptions: VxeGridProps<RowType> = {
     // custom: true, // 自定义列
     zoom: true, // 最大化最小化
     slots: {
-      buttons: 'toolbar-buttons',
+      buttons: 'toolbar-actions',
     },
     custom: {
       // 自定义列-图标

apps/web-antd/src/views/business/order/prescription/index.vue

@@ -102,7 +102,7 @@ const openPrescriptionSourceModal = (id: number) => {
       </Tabs>
     </div>
     <Grid>
-      <template #toolbar-buttons>
+      <template #toolbar-actions>
         <TableAction :actions="[]" :drop-down-actions="[]">
           <template #more>
             <Button style="margin-left: 16px">

apps/web-antd/src/views/business/order/product-order/config/table.ts

@@ -121,7 +121,7 @@ export const gridOptions: VxeGridProps<RowType> = {
     export: false,
     zoom: true,
     slots: {
-      buttons: 'toolbar-buttons',
+      buttons: 'toolbar-actions',
     },
     custom: {
       icon: 'vxe-icon-menu',

apps/web-antd/src/views/business/order/product-order/index.vue

@@ -867,9 +867,9 @@ const openOrderAmountVerify = () => {
     <PrescriptionDetailModal />
     <TraceDrawer />
     <ChinaErpSyncDrawer @synced="() => gridApi.query()" />
-    <AnalysisOverview :items="overviewItems" :my-card="false" />
+    <AnalysisOverview :items="overviewItems" />
     <Grid>
-      <template #toolbar-buttons>
+      <template #toolbar-actions>
         <TableAction
           :flex="false"
           :actions="[

apps/web-antd/src/views/business/order/register/config/table.ts

@@ -68,7 +68,7 @@ export const gridOptions: VxeGridProps<RegisterOrderItem> = {
     // custom: true, // 自定义列
     zoom: true, // 最大化最小化
     slots: {
-      buttons: 'toolbar-buttons',
+      buttons: 'toolbar-actions',
     },
     custom: {
       // 自定义列-图标

apps/web-antd/src/views/business/order/register/index.vue

@@ -121,7 +121,7 @@ function formatRegisterPrice(price: unknown) {
     <RefundModal />
     <StoreCardModalComp />
     <Grid>
-      <template #toolbar-buttons>
+      <template #toolbar-actions>
         <TableAction :actions="[]" :drop-down-actions="[]">
           <template #more>
             <Button style="margin-left: 16px">

apps/web-antd/src/views/business/patient-call-log-dict/config/table.ts

@@ -69,7 +69,7 @@ export const gridOptions: VxeGridProps<RowType> = {
     export: false,
     zoom: true,
     slots: {
-      buttons: 'toolbar-buttons',
+      buttons: 'toolbar-actions',
     },
     custom: {
       icon: 'vxe-icon-menu',

apps/web-antd/src/views/business/patient-call-log-dict/index.vue

@@ -78,7 +78,7 @@ const deleteDictApi = (row: any) => {
       />
 
       <Grid>
-        <template #toolbar-buttons>
+        <template #toolbar-actions>
           <Button
             v-if="hasTopTableDropDownActions"
             danger

apps/web-antd/src/views/business/product/china-medicine/config/table.ts

@@ -62,7 +62,7 @@ export const gridOptions: VxeGridProps<RowType> = {
     // custom: true, // 自定义列
     zoom: true, // 最大化最小化
     slots: {
-      buttons: 'toolbar-buttons',
+      buttons: 'toolbar-actions',
     },
     custom: {
       // 自定义列-图标

apps/web-antd/src/views/business/product/china-medicine/index.vue

@@ -143,7 +143,7 @@ const openDrugNumberBatchModal = () => {
     <DrugDetailModalComp />
     <FormModal />
     <Grid>
-      <template #toolbar-buttons>
+      <template #toolbar-actions>
         <TableAction
           :actions="[
             {

apps/web-antd/src/views/business/product/drug-categories/config/table.ts

@@ -77,7 +77,7 @@ export const gridOptions: VxeGridProps<RowType> = {
     export: false,
     zoom: true,
     slots: {
-      buttons: 'toolbar-buttons',
+      buttons: 'toolbar-actions',
     },
     custom: {
       icon: 'vxe-icon-menu',